Small preact-based (like React.js) project
https://inga-lovinde.github.io/static/komoot-demo/
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
33 lines
976 B
33 lines
976 B
import leaflet from 'leaflet';
|
|
import { toPairs } from '../../../shared/collections';
|
|
import type { Marker } from '../../types';
|
|
|
|
export type MarkerLayersStyle = {
|
|
circleStyle: Pick<leaflet.CircleMarkerOptions, 'color' | 'radius'>;
|
|
};
|
|
|
|
export const getLayersForMarkers = (
|
|
markers: Marker[],
|
|
markerLayersStyle: MarkerLayersStyle,
|
|
) => [
|
|
// lines
|
|
...toPairs(markers).map(([a, b]) =>
|
|
leaflet.polyline([a.coordinates, b.coordinates]),
|
|
),
|
|
// circles and labels
|
|
...markers.map((marker) =>
|
|
leaflet
|
|
.circleMarker(marker.coordinates, {
|
|
...markerLayersStyle.circleStyle,
|
|
bubblingMouseEvents: false,
|
|
fill: true,
|
|
fillOpacity: 100,
|
|
})
|
|
.on('click', marker.remove)
|
|
.bindTooltip(marker.shortLabel, {
|
|
permanent: true,
|
|
direction: 'center',
|
|
className: 'text',
|
|
}),
|
|
),
|
|
];
|
|
|