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 (;). +
After copying the tags, paste them into the Tags field in the popup.
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 (;). +
;