diff --git a/webapp/public/multi-directional-marker.png b/webapp/public/multi-directional-marker.png new file mode 100644 index 0000000..037d3f2 Binary files /dev/null and b/webapp/public/multi-directional-marker.png differ diff --git a/webapp/src/components/LeafletMap.vue b/webapp/src/components/LeafletMap.vue index e724e07..62e2c33 100644 --- a/webapp/src/components/LeafletMap.vue +++ b/webapp/src/components/LeafletMap.vue @@ -55,19 +55,27 @@ let clusterLayer: MarkerClusterGroup; let currentLocationLayer: FeatureGroup; // Marker Creation Utilities -function createSVGMarker(alpr: ALPR): string { - const orientationDegrees = alpr.tags.direction || alpr.tags['camera:direction']; +function createSVGMarkers(alpr: ALPR): string { + const orientationValues = (alpr.tags.direction || alpr.tags['camera:direction'] || '') + .split(';') + .map(val => val.trim()); + const fovPath = ` `; - return ` - - ${orientationDegrees ? fovPath : ''} - - - - + const allDirectionsPath = orientationValues.map(degrees => ` + + ${fovPath} + + `).join(''); + + return ` + ${allDirectionsPath} + + + + `; } @@ -76,7 +84,7 @@ function createMarker(alpr: ALPR): Marker | CircleMarker { if (hasPlottableOrientation(alpr.tags.direction || alpr.tags['camera:direction'])) { const icon = L.divIcon({ className: 'leaflet-data-marker', - html: createSVGMarker(alpr), + html: createSVGMarkers(alpr), iconSize: [60, 60], iconAnchor: [30, 30], popupAnchor: [0, 0], diff --git a/webapp/src/views/ReportView.vue b/webapp/src/views/ReportView.vue index 13d13b8..85efff1 100644 --- a/webapp/src/views/ReportView.vue +++ b/webapp/src/views/ReportView.vue @@ -52,7 +52,7 @@ - +

After copying the tags, paste them into the Tags field in the popup.

@@ -74,6 +74,15 @@

If you know the direction that the ALPR is facing, you can use the up and down arrows to set the direction it faces.

+ + +

+ To report two cameras that are on the same pole, separate directions with a semi-colon (;). +