Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: chirpwireless/ui-kit
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: v0.29.0
Choose a base ref
...
head repository: chirpwireless/ui-kit
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: v0.30.0
Choose a head ref
  • 2 commits
  • 4 files changed
  • 3 contributors

Commits on Nov 7, 2024

  1. map-line-string (#50) 

    * feat: added linestring feature to map

* feat: added line visibility

* fix: lines do not appear without visibility data

---------

Co-authored-by: Denis Shtefan <45861949+dshtefan@users.noreply.github.com>
    @marbleblazer @dshtefan
    marbleblazer and dshtefan authored Nov 7, 2024
    Loading
    Loading status checks…
    Copy the full SHA
    0083281 View commit details

  2. v0.30.0

    @github-actions
    github-actions[bot] committed Nov 7, 2024
    Loading
    Loading status checks…
    Copy the full SHA
    339b65b View commit details
Showing with 196 additions and 5 deletions.
  1. +1 −1 package.json
  2. +82 −3 src/lib/map/index.tsx
  3. +89 −0 src/lib/map/map.stories.tsx
  4. +24 −1 src/lib/map/style.ts
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@chirpwireless/ui-kit",
"version": "0.29.0",
"version": "0.30.0",
"type": "module",
"declaration": true,
"main": "dist/index.cjs.js",
85 changes: 82 additions & 3 deletions src/lib/map/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -26,6 +26,7 @@ type Props = {
isSingleDraw?: boolean; // draw only one feature, after draw mode change - delete all features
data?: GeoJSON.GeoJSON | null; // only one feature, if you want provide feature collection - develop it
markerVisibility?: { [key: number]: boolean };
isLineMarkersNeeded?: boolean;
onChange?: (value: GeoJSON.GeoJSON) => void;
accessToken?: string;
centeringCoordinates?: Coordinates;
@@ -40,6 +41,7 @@ export const Map: React.FC<Props> = ({
isDrawable = false,
isSingleDraw = true,
centeringCoordinates,
isLineMarkersNeeded = true,
getMapStyleId = getUiKitMapStyleId,
markerVisibility = {},
}) => {
@@ -49,7 +51,7 @@ export const Map: React.FC<Props> = ({
const drawRef = useRef<MapboxDraw | null>(null);
const [_, setActiveDrawMode] = useState('');
const { isMobile } = useBreakpoints();
const markerRefs = useRef<{ [key: number]: mapboxgl.Marker }>({});
const markerRefs = useRef<{ [key: number | string]: mapboxgl.Marker }>({});

const { palette } = useTheme();

@@ -208,6 +210,7 @@ export const Map: React.FC<Props> = ({
const markerGeometry = marker.geometry;
const popupData: Record<string, string> = marker?.properties?.popupData;
const device_id = marker.properties?.device_id;
const lineId = marker.properties?.lineId;

if (markerGeometry.type === 'Point') {
if (data.features.length === 1) {
@@ -239,14 +242,90 @@ export const Map: React.FC<Props> = ({
delete markerRefs.current[device_id];
}
}
} else if (markerGeometry.type === 'LineString') {
const sourceId = `route-${lineId}`;
if (markerVisibility[lineId] !== undefined) {
if (map.current.getSource(sourceId)) {
// Visibility линий
if (markerVisibility[lineId]) {
map.current.setLayoutProperty(sourceId, 'visibility', 'visible');
} else {
map.current.setLayoutProperty(sourceId, 'visibility', 'none');
}

(map.current.getSource(sourceId) as mapboxgl.GeoJSONSource).setData({
type: 'FeatureCollection',
features: [marker],
});
} else {
map.current.addSource(sourceId, {
type: 'geojson',
data: {
type: 'FeatureCollection',
features: [marker],
},
});

map.current.addLayer({
id: sourceId,
type: 'line',
source: sourceId,
layout: {
'line-join': 'round',
'line-cap': 'round',
},
paint: {
'line-color': '#FF4D14',
'line-width': 1,
},
});
}
}

// Отрисовка маркеров на линии
if (markerGeometry.coordinates && Array.isArray(markerGeometry.coordinates)) {
markerGeometry.coordinates.forEach((coordinate, index) => {
if (Array.isArray(coordinate) && coordinate.length === 2) {
const markerElement = document.createElement('div');

if (index === 0) {
markerElement.classList.add('start-line-marker');
} else if (index === markerGeometry.coordinates.length - 1) {
markerElement.classList.add('end-line-marker');
} else if (isLineMarkersNeeded) {
markerElement.classList.add('common-line-marker');
}

if (map.current) {
const markerKey = `${lineId}-${index}`;
if (markerVisibility[lineId]) {
if (!markerRefs.current[markerKey]) {
const lineMarker = new mapboxgl.Marker(markerElement)
.setLngLat(coordinate as [number, number])
.addTo(map.current);

markerRefs.current[markerKey] = lineMarker;
}
} else {
if (markerRefs.current[markerKey]) {
markerRefs.current[markerKey].remove();
delete markerRefs.current[markerKey];
}
}
}
}
});
}
}
}
}

// (map.current?.getSource('mapbox-gl-draw-cold') as mapboxgl.GeoJSONSource)?.setData(data);
}
}

map.current.on('style.load', () => {
addDataToMap();
});

if (singleMarkerCenter?.length === 2) {
map.current.flyTo({ center: singleMarkerCenter as [number, number], essential: true });
}
89 changes: 89 additions & 0 deletions src/lib/map/map.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -106,6 +106,95 @@ export const ThreeMarkers: Story = {
},
};

export const LineWithPolygons: Story = {
render: () => {
const [markerVisibility, setMarkerVisibility] = useState({ 1: true, 2: true, 3: true });

const handleVisibilityChange = (deviceId: number) => (event: React.ChangeEvent<HTMLInputElement>) => {
setMarkerVisibility((prevVisibility) => ({
...prevVisibility,
[deviceId]: event.target.checked,
}));
};

return (
<Box sx={{ width: '900px', height: '1600px' }}>
<Box sx={{ display: 'flex', justifyContent: 'space-around', mb: 2 }}>
<label>
<input type="checkbox" checked={markerVisibility[1]} onChange={handleVisibilityChange(1)} />
Line 1
</label>
<label>
<input type="checkbox" checked={markerVisibility[2]} onChange={handleVisibilityChange(2)} />
Line 2
</label>
<label>
<input type="checkbox" checked={markerVisibility[3]} onChange={handleVisibilityChange(3)} />
Line 3
</label>
</Box>
<Map
markerVisibility={markerVisibility}
isLineMarkersNeeded
data={{
type: 'FeatureCollection',
features: [
{
type: 'Feature',
geometry: {
type: 'LineString',
coordinates: [
[37.707938391380537, 50.629305557231135],
[38.36757031342043, 49.58805663850933],
[38.988345205065315, 51.172665398308254],
[39.904827800820726, 52.33581991843607],
],
},
properties: {
device_id: 1,
lineId: 1,
},
},
{
type: 'Feature',
geometry: {
type: 'LineString',
coordinates: [
[36.707938391380537, 50.629305557231135],
[37.36757031342043, 49.58805663850933],
[37.988345205065315, 51.172665398308254],
[38.904827800820726, 52.33581991843607],
],
},
properties: {
device_id: 2,
lineId: 2,
},
},
{
type: 'Feature',
geometry: {
type: 'LineString',
coordinates: [
[35.707938391380537, 50.629305557231135],
[36.36757031342043, 49.58805663850933],
[36.988345205065315, 51.172665398308254],
[38.904827800820726, 52.33581991843607],
],
},
properties: {
device_id: 3,
lineId: 3,
},
},
],
}}
/>
</Box>
);
},
};

export const Drawable: Story = {
render: () => {
const [drawState, setDrawState] = useState<GeoJSON.GeoJSON | null>({
25 changes: 24 additions & 1 deletion src/lib/map/style.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { alpha, styled } from '@mui/material';
import { styled } from '@mui/material';
import { Box } from '@mui/material';

import { CurrentTheme, SIDEBAR_WIDTH } from '@chirp/ui/styles/constants';
@@ -393,6 +393,29 @@ export const MapContainer = styled(Box, {
color: theme.palette.text.tertiary,
padding: '8px',
},

'.common-line-marker': {
width: '6px',
height: '6px',
backgroundColor: theme.palette.accent.accent,
borderRadius: '50%',
},

'.start-line-marker': {
width: '6px',
height: '6px',
backgroundColor: theme.palette.accent.accent,
borderRadius: '50%',
boxShadow: '0 0 11.08px #55E050, 0 0 28px #55E050',
},

'.end-line-marker': {
width: '6px',
height: '6px',
backgroundColor: theme.palette.accent.accent,
borderRadius: '50%',
boxShadow: '0 0 11.08px red, 0 0 28px red',
},
}));

export const MapDrawModeTabsWrapper = styled(Box)(() => ({