diff --git a/webapp/src/components/LeafletMap.vue b/webapp/src/components/LeafletMap.vue index ad94465..2e45b63 100644 --- a/webapp/src/components/LeafletMap.vue +++ b/webapp/src/components/LeafletMap.vue @@ -100,20 +100,28 @@ function populateMap() { map.removeLayer(clusterLayer); } - clusterLayer = L.markerClusterGroup(); + clusterLayer = L.markerClusterGroup({ + chunkedLoading: true, + chunkProgress: () => {}, // update progress bar! + disableClusteringAtZoom: 16, // TODO: should probably match the ShowFOV threshold + removeOutsideVisibleBounds: true, + }); circlesLayer = L.featureGroup(); for (const alpr of props.alprs) { const { lat, lon: lng } = alpr; - const orientationDegrees = alpr.tags?.direction || 0; // TODO: make sure this works with nodes w/o orientation + const orientationDegrees = alpr.tags.direction; // TODO: make sure this works with nodes w/o orientation let marker: L.CircleMarker | L.Marker; // content of @/public/map-icon.svg; TODO: import it here if possible + const fovPath = ` + + + `; const svgMarker = ` - - + ${orientationDegrees ? fovPath : ''}