Created
June 12, 2025 13:52
-
-
Save youssef22222/14da17c6fb5e2075545ddbdf018742bf to your computer and use it in GitHub Desktop.
Speed Violation Map - 3181 BBD (CTS-OBD) - 1749736350
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Speed Violation Path - 3181 BBD (CTS-OBD)</title> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" /> | |
| <style> | |
| html, body { height: 100%; margin: 0; padding: 0; } | |
| #map { height: 100%; } | |
| .number-icon { | |
| background-color: #4285F4; | |
| border: 2px solid white; | |
| border-radius: 50%; | |
| color: white; | |
| font-weight: bold; | |
| text-align: center; | |
| font-size: 12px; | |
| line-height: 20px; | |
| width: 24px; | |
| height: 24px; | |
| margin-left: -12px; | |
| margin-top: -12px; | |
| box-shadow: 0 2px 5px rgba(0,0,0,0.3); | |
| } | |
| .start-icon { | |
| background-color: #00C853; | |
| } | |
| .end-icon { | |
| background-color: #FF6F00; /* Orange for violation/end point */ | |
| width: 30px; | |
| height: 30px; | |
| line-height: 26px; | |
| font-size: 14px; | |
| } | |
| .popup-content { | |
| min-width: 250px; | |
| } | |
| .popup-content table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| } | |
| .popup-content td { | |
| padding: 2px 5px; | |
| border-bottom: 1px solid #eee; | |
| } | |
| .popup-content td:first-child { | |
| font-weight: bold; | |
| width: 40%; | |
| } | |
| .speed-ok { color: green; } | |
| .speed-violation { color: red; font-weight: bold; } | |
| .legend-toggle { | |
| position: absolute; | |
| top: 90px; | |
| right: 10px; | |
| z-index: 1000; | |
| background: white; | |
| padding: 8px; | |
| border: 2px solid #ccc; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| font-size: 14px; | |
| font-family: Arial, sans-serif; | |
| box-shadow: 0 1px 5px rgba(0,0,0,0.4); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="map"></div> | |
| <div id="legend-toggle" class="legend-toggle">Hide Legend</div> | |
| <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script> | |
| <script src="https://unpkg.com/leaflet-polylinedecorator@1.6.0/dist/leaflet.polylineDecorator.js"></script> | |
| <script> | |
| // Initialize the map | |
| var map = L.map('map').setView([26.1878855, 50.186036187499994], 14); | |
| // Add OpenStreetMap tile layer | |
| L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { | |
| maxZoom: 19, | |
| attribution: '© OpenStreetMap contributors' | |
| }).addTo(map); | |
| // Define the coordinates and the detailed path data | |
| var latlngs = [ | |
| [26.19293, 50.18789], | |
| [26.193282, 50.188703], | |
| [26.193307, 50.188125], | |
| [26.1932, 50.188888], | |
| [26.19337, 50.188308], | |
| [26.193098, 50.188882], | |
| [26.192238, 50.188272], | |
| [26.191133, 50.188208], | |
| [26.190352, 50.188242], | |
| [26.182173, 50.18314], | |
| [26.18267, 50.183473], | |
| [26.181877, 50.182935], | |
| [26.183195, 50.18382], | |
| [26.181488, 50.182677], | |
| [26.181035, 50.182613], | |
| [26.18082, 50.182403] | |
| ]; | |
| var pathData = [{"latitude": 26.19293, "longitude": 50.18789, "time": "06/12/25,12:27:41", "speed": 107, "speed_limit": 40, "street_name": "", "street_name_ar": "", "distance_to_segment": 6.52, "vehicle_direction": 118, "segment_bearing": 40.0, "nearest_segment": [[26.1924107, 50.1873188], [26.1934325, 50.1882757]], "closest_point": [26.1929723505454, 50.18784477710598], "angle_difference": null}, {"latitude": 26.193282, "longitude": 50.188703, "time": "06/12/25,16:50:14", "speed": 132, "speed_limit": 40, "street_name": "", "street_name_ar": "", "distance_to_segment": 10.35, "vehicle_direction": 68, "segment_bearing": 127.1, "nearest_segment": [[26.1932545, 50.1885724], [26.193127, 50.1887602]], "closest_point": [26.19320248447077, 50.18864901581482], "angle_difference": null}, {"latitude": 26.193307, "longitude": 50.188125, "time": "06/12/25,16:50:13", "speed": 122, "speed_limit": 40, "street_name": "", "street_name_ar": "", "distance_to_segment": 2.55, "vehicle_direction": 52, "segment_bearing": 40.0, "nearest_segment": [[26.1924107, 50.1873188], [26.1934325, 50.1882757]], "closest_point": [26.19329045005788, 50.18814267241181], "angle_difference": 12.0}, {"latitude": 26.1932, "longitude": 50.188888, "time": "06/12/25,16:50:14", "speed": 132, "speed_limit": 40, "street_name": "", "street_name_ar": "", "distance_to_segment": 14.7, "vehicle_direction": 107, "segment_bearing": 132.8, "nearest_segment": [[26.193127, 50.1887602], [26.1930344, 50.1888718]], "closest_point": [26.193093962880017, 50.188800015794705], "angle_difference": 25.8}, {"latitude": 26.19337, "longitude": 50.188308, "time": "06/12/25,16:50:13", "speed": 131, "speed_limit": 40, "street_name": "", "street_name_ar": "", "distance_to_segment": 6.98, "vehicle_direction": 57, "segment_bearing": 40.0, "nearest_segment": [[26.1924107, 50.1873188], [26.1934325, 50.1882757]], "closest_point": [26.193415317535088, 50.188259608885616], "angle_difference": 17.0}, {"latitude": 26.193098, "longitude": 50.188882, "time": "06/12/25,16:50:18", "speed": 105, "speed_limit": 40, "street_name": "", "street_name_ar": "", "distance_to_segment": 5.92, "vehicle_direction": 105, "segment_bearing": 132.8, "nearest_segment": [[26.193127, 50.1887602], [26.1930344, 50.1888718]], "closest_point": [26.193055320614835, 50.18884658681841], "angle_difference": 27.8}, {"latitude": 26.192238, "longitude": 50.188272, "time": "06/12/25,16:50:31", "speed": 135, "speed_limit": 40, "street_name": "", "street_name_ar": "", "distance_to_segment": 5.73, "vehicle_direction": 210, "segment_bearing": 30.0, "nearest_segment": [[26.1918386, 50.1880805], [26.1922287, 50.188332]], "closest_point": [26.192207944542954, 50.18831861882224], "angle_difference": 0.0}, {"latitude": 26.191133, "longitude": 50.188208, "time": "06/12/25,16:50:49", "speed": 126, "speed_limit": 40, "street_name": "", "street_name_ar": "", "distance_to_segment": 1.91, "vehicle_direction": 212, "segment_bearing": 121.5, "nearest_segment": [[26.1913841, 50.1877874], [26.1908701, 50.1887233]], "closest_point": [26.1911484459296, 50.188216482965935], "angle_difference": null}, {"latitude": 26.190352, "longitude": 50.188242, "time": "06/12/25,16:51:00", "speed": 124, "speed_limit": 100, "street_name": "King Khaled Road", "street_name_ar": "\u0637\u0631\u064a\u0642 \u0627\u0644\u0645\u0644\u0643 \u062e\u0627\u0644\u062f", "distance_to_segment": 11.69, "vehicle_direction": 200, "segment_bearing": 210.9, "nearest_segment": [[26.1908701, 50.1887233], [26.190293, 50.188339]], "closest_point": [26.190293, 50.188339], "angle_difference": 10.9}, {"latitude": 26.182173, "longitude": 50.18314, "time": "06/12/25,16:52:03", "speed": 180, "speed_limit": 110, "street_name": "", "street_name_ar": "", "distance_to_segment": 9.02, "vehicle_direction": 209, "segment_bearing": 207.6, "nearest_segment": [[26.1822474, 50.1830818], [26.1815841, 50.1826953]], "closest_point": [26.18221717501753, 50.183064188126444], "angle_difference": 1.4}, {"latitude": 26.18267, "longitude": 50.183473, "time": "06/12/25,16:52:03", "speed": 185, "speed_limit": 100, "street_name": "King Khaled Road", "street_name_ar": "\u0637\u0631\u064a\u0642 \u0627\u0644\u0645\u0644\u0643 \u062e\u0627\u0644\u062f", "distance_to_segment": 12.3, "vehicle_direction": 211, "segment_bearing": 208.2, "nearest_segment": [[26.183082, 50.1835795], [26.1822474, 50.1830818]], "closest_point": [26.182731229338042, 50.18337032367786], "angle_difference": 2.8}, {"latitude": 26.181877, "longitude": 50.182935, "time": "06/12/25,16:52:03", "speed": 175, "speed_limit": 110, "street_name": "", "street_name_ar": "", "distance_to_segment": 6.13, "vehicle_direction": 209, "segment_bearing": 207.6, "nearest_segment": [[26.1822474, 50.1830818], [26.1815841, 50.1826953]], "closest_point": [26.181907027595088, 50.18288346751922], "angle_difference": 1.4}, {"latitude": 26.183195, "longitude": 50.18382, "time": "06/12/25,16:52:03", "speed": 156, "speed_limit": 100, "street_name": "King Khaled Road", "street_name_ar": "\u0637\u0631\u064a\u0642 \u0627\u0644\u0645\u0644\u0643 \u062e\u0627\u0644\u062f", "distance_to_segment": 13.24, "vehicle_direction": 213, "segment_bearing": 31.0, "nearest_segment": [[26.1820841, 50.1832309], [26.1867518, 50.1863531]], "closest_point": [26.183123843617924, 50.1839263790419], "angle_difference": 2.0}, {"latitude": 26.181488, "longitude": 50.182677, "time": "06/12/25,16:52:03", "speed": 168, "speed_limit": 110, "street_name": "", "street_name_ar": "", "distance_to_segment": 3.47, "vehicle_direction": 210, "segment_bearing": 208.3, "nearest_segment": [[26.1815841, 50.1826953], [26.1813499, 50.1825549]], "closest_point": [26.181505336006268, 50.182648081961055], "angle_difference": 1.7}, {"latitude": 26.181035, "longitude": 50.182613, "time": "06/12/25,16:52:15", "speed": 108, "speed_limit": 100, "street_name": "King Khaled Road", "street_name_ar": "\u0637\u0631\u064a\u0642 \u0627\u0644\u0645\u0644\u0643 \u062e\u0627\u0644\u062f", "distance_to_segment": 3.44, "vehicle_direction": 66, "segment_bearing": 25.9, "nearest_segment": [[26.1808962, 50.1825761], [26.181726, 50.1830249]], "closest_point": [26.18101902766467, 50.18264253173765], "angle_difference": null}, {"latitude": 26.18082, "longitude": 50.182403, "time": "06/12/25,16:52:14", "speed": 114, "speed_limit": 110, "street_name": "", "street_name_ar": "", "distance_to_segment": 14.59, "vehicle_direction": 159, "segment_bearing": 104.9, "nearest_segment": [[26.1809607, 50.1823573], [26.1809511, 50.1823976]], "closest_point": [26.1809511, 50.1823976], "angle_difference": null}]; | |
| // Draw the polyline (straight lines between points) | |
| var polyline = L.polyline(latlngs, { | |
| color: 'blue', | |
| weight: 4, | |
| opacity: 0.6, | |
| dashArray: '10, 5' | |
| }).addTo(map); | |
| // Add directional arrows | |
| var decorator = L.polylineDecorator(polyline, { | |
| patterns: [ | |
| { | |
| offset: 25, | |
| repeat: 50, | |
| symbol: L.Symbol.arrowHead({ | |
| pixelSize: 12, | |
| polygon: false, | |
| pathOptions: { | |
| stroke: true, | |
| color: 'blue', | |
| weight: 2, | |
| opacity: 0.8 | |
| } | |
| }) | |
| } | |
| ] | |
| }).addTo(map); | |
| // Function to create numbered div icons | |
| function createNumberedIcon(number, extraClass = '') { | |
| return L.divIcon({ | |
| className: 'number-icon ' + extraClass, | |
| html: number.toString(), | |
| iconSize: [24, 24] | |
| }); | |
| } | |
| // Function to create popup content | |
| function createPopupContent(pointNum, data) { | |
| var lat = data.latitude; | |
| var lon = data.longitude; | |
| var isViolation = data.speed && data.speed_limit && (data.speed > data.speed_limit); | |
| var speedClass = isViolation ? 'speed-violation' : 'speed-ok'; | |
| var html = '<div class="popup-content">'; | |
| html += '<h4 style="margin: 0 0 5px 0;">Point ' + pointNum + '</h4>'; | |
| html += '<table>'; | |
| html += '<tr><td>Latitude:</td><td>' + lat.toFixed(6) + '</td></tr>'; | |
| html += '<tr><td>Longitude:</td><td>' + lon.toFixed(6) + '</td></tr>'; | |
| if (data.time) { | |
| html += '<tr><td>Time:</td><td>' + data.time + '</td></tr>'; | |
| } | |
| if (data.device_name) { | |
| html += '<tr><td>Vehicle:</td><td>' + data.device_name + '</td></tr>'; | |
| } | |
| if (data.street_name_ar) { | |
| html += '<tr><td>Street (AR):</td><td style="direction: rtl;">' + data.street_name_ar + '</td></tr>'; | |
| } | |
| if (data.street_name) { // This is street_name_en | |
| html += '<tr><td>Street (EN):</td><td>' + data.street_name + '</td></tr>'; | |
| } | |
| if (data.distance_to_segment !== undefined) { | |
| html += '<tr><td>Dist to street:</td><td>' + data.distance_to_segment.toFixed(2) + ' m</td></tr>'; | |
| } | |
| if (data.vehicle_direction !== undefined) { | |
| html += '<tr><td>Vehicle Dir:</td><td>' + data.vehicle_direction.toFixed(1) + '°</td></tr>'; | |
| } | |
| if (data.segment_bearing !== undefined) { | |
| html += '<tr><td>Street Bearing:</td><td>' + data.segment_bearing.toFixed(1) + '°</td></tr>'; | |
| } | |
| if (data.angle_difference !== undefined) { | |
| html += '<tr><td>Direction Diff:</td><td>' + data.angle_difference.toFixed(1) + '°</td></tr>'; | |
| } | |
| if (data.speed_limit) { | |
| html += '<tr><td>Speed Limit:</td><td>' + data.speed_limit + ' km/h</td></tr>'; | |
| } | |
| if (data.speed) { | |
| html += '<tr><td>Vehicle Speed:</td><td class="' + speedClass + '">' + data.speed + ' km/h</td></tr>'; | |
| } | |
| if (isViolation) { | |
| var overSpeed = data.speed - data.speed_limit; | |
| html += '<tr><td>Over Speed:</td><td class="speed-violation">+' + overSpeed + ' km/h</td></tr>'; | |
| } | |
| html += '</table>'; | |
| html += '</div>'; | |
| return html; | |
| } | |
| // Add markers for all points | |
| for (var i = 0; i < pathData.length; i++) { | |
| var iconClass = ''; | |
| var icon; | |
| var data = pathData[i]; | |
| data.device_name = "3181 BBD (CTS-OBD)"; // Add device name to each point's data | |
| if (i === 0) { | |
| iconClass = 'start-icon'; | |
| icon = createNumberedIcon('S', iconClass); | |
| } else if (i === latlngs.length - 1) { | |
| iconClass = 'end-icon'; // End point is the violation point | |
| icon = createNumberedIcon('V', iconClass); | |
| } else { | |
| icon = createNumberedIcon(i + 1); | |
| } | |
| var popupContent = createPopupContent(i + 1, data); | |
| var vehicleMarker = L.marker([data.latitude, data.longitude], {icon: icon}) | |
| .addTo(map) | |
| .bindPopup(popupContent); | |
| // Draw the nearest street segment for each point if available | |
| if (data.nearest_segment && data.nearest_segment.length === 2) { | |
| L.polyline(data.nearest_segment, { | |
| color: 'red', | |
| weight: 6, | |
| opacity: 0.8 | |
| }).addTo(map).bindPopup('Nearest Street Segment for Point ' + (i + 1)); | |
| // Add start and end circles for the segment | |
| L.circleMarker(data.nearest_segment[0], { radius: 4, color: 'black', fillColor: 'red', fillOpacity: 1 }).addTo(map); | |
| L.circleMarker(data.nearest_segment[1], { radius: 4, color: 'black', fillColor: 'red', fillOpacity: 1 }).addTo(map); | |
| } | |
| // Draw the closest point on the segment and a line to it | |
| if (data.closest_point && data.closest_point.length === 2) { | |
| // Draw a small yellow circle at the closest point on the segment | |
| L.circleMarker(data.closest_point, { radius: 4, color: 'black', fillColor: 'yellow', fillOpacity: 1 }).addTo(map); | |
| // Draw a dashed line from the vehicle to the closest point | |
| var line_to_closest = [ | |
| [data.latitude, data.longitude], | |
| data.closest_point | |
| ]; | |
| L.polyline(line_to_closest, { | |
| color: 'grey', | |
| weight: 2, | |
| opacity: 0.8, | |
| dashArray: '5, 5' | |
| }).addTo(map); | |
| } | |
| } | |
| // Fit the map to show all points | |
| map.fitBounds(polyline.getBounds().pad(0.1)); | |
| // Add a legend | |
| var legend = L.control({position: 'bottomright'}); | |
| legend.onAdd = function (map) { | |
| var div = L.DomUtil.create('div', 'legend'); | |
| div.style.background = 'white'; | |
| div.style.padding = '10px'; | |
| div.style.border = '2px solid #ccc'; | |
| div.style.borderRadius = '5px'; | |
| div.style.fontSize = '12px'; | |
| div.innerHTML = '<h4 style="margin: 0 0 5px 0;">Legend</h4>' + | |
| '<p style="margin: 2px 0;"><span style="color: #00C853; font-weight: bold;">S</span> Start Point</p>' + | |
| '<p style="margin: 2px 0;"><span style="color: #4285F4; font-weight: bold;">1-9</span> Path Points</p>' + | |
| '<p style="margin: 2px 0;"><span style="color: #FF6F00; font-weight: bold;">V</span> Violation Location</p>' + | |
| '<p style="margin: 2px 0;"><span style="background: #9b59b6; display: inline-block; width: 30px; height: 6px; border-radius: 3px; margin-right: 5px;"></span> Nearest Street Segment</p>' + | |
| '<p style="margin: 2px 0;"><span style="color: blue;">- - →</span> Vehicle Path</p>' + | |
| '<hr style="margin: 5px 0;">' + | |
| '<p style="margin: 2px 0; font-style: italic; font-size: 11px;">Note: Lines show direct paths<br>between GPS points, not<br>actual street routes.</p>'; | |
| return div; | |
| }; | |
| legend.addTo(map); | |
| var legendContainer = legend.getContainer(); | |
| // Add info control | |
| var info = L.control({position: 'topleft'}); | |
| info.onAdd = function (map) { | |
| var div = L.DomUtil.create('div', 'info'); | |
| div.style.background = 'rgba(255,255,255,0.9)'; | |
| div.style.padding = '8px'; | |
| div.style.border = '2px solid #ccc'; | |
| div.style.borderRadius = '5px'; | |
| div.style.fontSize = '14px'; | |
| var violationCount = 0; | |
| for (var i = 0; i < pathData.length; i++) { | |
| var d = pathData[i]; | |
| if (d.speed && d.speed_limit && d.speed > d.speed_limit) { | |
| violationCount++; | |
| } | |
| } | |
| div.innerHTML = '<b>Vehicle:</b> 3181 BBD (CTS-OBD)<br>' + | |
| '<b>Total Points:</b> ' + latlngs.length + '<br>' + | |
| '<b>Violations on Path:</b> ' + violationCount; | |
| return div; | |
| }; | |
| info.addTo(map); | |
| // Legend toggle logic | |
| var toggleButton = document.getElementById('legend-toggle'); | |
| var legendVisible = true; | |
| toggleButton.addEventListener('click', function() { | |
| if (legendVisible) { | |
| legendContainer.style.display = 'none'; | |
| toggleButton.innerHTML = 'Show Legend'; | |
| } else { | |
| legendContainer.style.display = 'block'; | |
| toggleButton.innerHTML = 'Hide Legend'; | |
| } | |
| legendVisible = !legendVisible; | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment