Skip to content

Instantly share code, notes, and snippets.

@youssef22222

youssef22222/index.html

Created June 18, 2025 07:55
Show Gist options
  • Save youssef22222/351439889c0062ef2e439138bde3702d to your computer and use it in GitHub Desktop.
Save youssef22222/351439889c0062ef2e439138bde3702d to your computer and use it in GitHub Desktop.
Download ZIP
Speed Violation Map - 6379 XBDMazda (FMC150) - 1750233337
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Speed Violation Path - 6379 XBDMazda (FMC150)</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" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}
#map {
height: 100%;
position: relative;
}
/* Enhanced marker styles */
.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;
border: 3px solid white;
font-size: 14px;
font-weight: bold;
}
.end-icon {
background-color: #FF1744;
border: 3px solid white;
width: 32px;
height: 32px;
line-height: 26px;
font-size: 16px;
font-weight: bold;
margin-left: -16px;
margin-top: -16px;
position: relative;
}
/* Pulsing animation for violation point */
.pulse-ring {
border: 3px solid #FF1744;
border-radius: 50%;
height: 50px;
width: 50px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
animation: pulsate 2s ease-out;
animation-iteration-count: infinite;
opacity: 0;
}
@keyframes pulsate {
0% {
transform: translate(-50%, -50%) scale(0.1, 0.1);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: translate(-50%, -50%) scale(1.2, 1.2);
opacity: 0;
}
}
/* Enhanced popup styles */
.popup-content {
min-width: 280px;
font-family: inherit;
}
.popup-content table {
width: 100%;
border-collapse: collapse;
}
.popup-content td {
padding: 4px 8px;
border-bottom: 1px solid #eee;
font-size: 13px;
}
.popup-content td:first-child {
font-weight: 600;
width: 45%;
color: #555;
}
.popup-content td:last-child {
color: #2c3e50;
}
.popup-title {
font-weight: 600;
color: #2c3e50;
margin-bottom: 8px;
padding-bottom: 8px;
border-bottom: 2px solid #e9ecef;
font-size: 16px;
}
.speed-ok {
color: #27ae60;
font-weight: bold;
}
.speed-violation {
color: #e74c3c;
font-weight: bold;
}
/* Enhanced legend styles */
.legend {
position: absolute;
bottom: 20px;
right: 20px;
background: white;
padding: 15px 20px;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,0.15);
font-size: 13px;
z-index: 1000;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
transform: translateX(0);
min-width: 200px;
}
.legend.collapsed {
transform: translateX(calc(100% + 20px));
}
.legend-toggle-btn {
position: absolute;
left: -35px;
top: 50%;
width: 35px;
height: 50px;
background-color: #3498db;
color: white;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
transition: all 0.3s ease;
z-index: 1001;
border-radius: 8px 0 0 8px;
transform: translateY(-50%);
}
.legend-toggle-btn:hover {
background-color: #2980b9;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.legend-toggle-btn i {
transition: transform 0.3s ease;
}
.legend.collapsed .legend-toggle-btn i {
transform: rotate(180deg);
}
.legend-title {
font-weight: 600;
margin-bottom: 12px;
color: #2c3e50;
font-size: 14px;
}
.legend-item {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 8px;
font-size: 12px;
}
.legend-item:last-child {
margin-bottom: 0;
}
.legend-marker {
width: 18px;
height: 18px;
border-radius: 50%;
border: 2px solid white;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
flex-shrink: 0;
}
.legend-line {
width: 25px;
height: 4px;
border-radius: 2px;
flex-shrink: 0;
}
.legend-arrow {
width: 25px;
height: 4px;
background: #3498db;
position: relative;
flex-shrink: 0;
}
.legend-arrow::after {
content: '';
position: absolute;
right: 0;
top: -3px;
width: 0;
height: 0;
border-left: 8px solid #3498db;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
}
/* Info control styles */
.info-control {
min-width: 200px;
position: absolute;
top: 20px;
left: 20px;
background: rgba(255,255,255,0.95);
padding: 15px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
font-size: 14px;
z-index: 1000;
}
.info-control h4 {
margin: 0 0 8px 0;
color: #2c3e50;
font-size: 16px;
}
.info-control div {
margin: 3px 0;
}
/* Enhanced leaflet popup */
.leaflet-popup-content {
margin: 13px 19px;
font-size: 14px;
line-height: 1.5;
}
</style>
</head>
<body>
<div id="map"></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.267962055555557, 50.154160233333336], 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.211762, 50.196908],
[26.190958, 50.18859],
[26.191737, 50.187992],
[26.180948, 50.182305],
[26.219177, 50.196702],
[26.24397, 50.197237],
[26.25989, 50.190947],
[26.268298, 50.187518],
[26.211972, 50.1969],
[26.185478, 50.18486],
[26.18098, 50.182397],
[26.223423, 50.195868],
[26.250665, 50.196978],
[26.254962, 50.194305],
[26.267362, 50.18751],
[26.29489, 50.16963],
[26.342437, 50.179168],
[26.344337, 50.179187],
[26.362015, 50.17843],
[26.352695, 50.178645],
[26.32459, 50.179355],
[26.30478, 50.173727],
[26.292848, 50.157507],
[26.292535, 50.159573],
[26.294935, 50.168807],
[26.248902, 50.197333],
[26.24038, 50.195655],
[26.190972, 50.188525],
[26.181, 50.182327],
[26.242163, 50.196583],
[26.263048, 50.189312],
[26.287595, 50.179247],
[26.285593, 50.190567],
[26.284083, 50.197635],
[26.289135, 50.179728],
[26.218447, 50.206795],
[26.401038, 49.876102],
[26.439738, 49.808028],
[26.44426, 49.806635],
[26.448748, 49.805287],
[26.462198, 49.802023],
[26.471323, 49.796882],
[26.446115, 49.80572],
[26.377565, 50.006978],
[26.379453, 50.011797],
[26.185202, 50.184722],
[26.18903, 50.180217],
[26.193585, 50.176403],
[26.197963, 50.186728],
[26.181127, 50.182328],
[26.200733, 50.195773],
[26.205037, 50.197487],
[26.211422, 50.198363],
[26.243175, 50.19702],
[26.251568, 50.196462],
[26.287597, 50.17922],
[26.285772, 50.190228],
[26.283578, 50.197477],
[26.288322, 50.182857],
[26.289155, 50.179672],
[26.234987, 50.19443],
[26.19114, 50.188632],
[26.181042, 50.182362],
[26.258355, 50.191928],
[26.262543, 50.189833],
[26.243187, 50.196792],
[26.190967, 50.188593],
[26.22232, 50.196007],
[26.249578, 50.197283],
[26.25732, 50.192645],
[26.26839, 50.18755],
[26.185468, 50.184843],
[26.36197, 50.178468],
[26.352383, 50.178618],
[26.278002, 50.182885],
[26.24917, 50.197208],
[26.22222, 50.19573],
[26.217515, 50.196272],
[26.208438, 50.197273],
[26.191023, 50.188378],
[26.18276, 50.183318],
[26.181013, 50.182327],
[26.287612, 50.17926],
[26.284008, 50.197683],
[26.286817, 50.188015],
[26.294692, 50.169872],
[26.32331, 50.17958],
[26.29915, 50.166695],
[26.290312, 50.175797],
[26.218227, 50.206982]
];
var pathData = [{"latitude": 26.211762, "longitude": 50.196908, "time": "06/16/25,13:40:57", "speed": 67, "speed_limit": 60, "street_name": null, "street_name_ar": null, "distance_to_segment": 1.78, "vehicle_direction": 174, "segment_bearing": 180.0, "nearest_segment": [[26.2124636, 50.1968903], [26.2115147, 50.1968901]], "closest_point": [26.211762003761805, 50.196890152124304]}, {"latitude": 26.190958, "longitude": 50.18859, "time": "06/16/25,13:43:10", "speed": 71, "speed_limit": 40, "street_name": null, "street_name_ar": null, "distance_to_segment": 1.4, "vehicle_direction": 211, "segment_bearing": 121.5, "nearest_segment": [[26.1913841, 50.1877874], [26.1908701, 50.1887233]], "closest_point": [26.190946713254515, 50.18858380127452]}, {"latitude": 26.191737, "longitude": 50.187992, "time": "06/16/25,16:54:56", "speed": 42, "speed_limit": 40, "street_name": null, "street_name_ar": null, "distance_to_segment": 1.99, "vehicle_direction": 31, "segment_bearing": 30.1, "nearest_segment": [[26.1913841, 50.1877874], [26.1918386, 50.1880805]], "closest_point": [26.191726533493583, 50.18800823004833]}, {"latitude": 26.180948, "longitude": 50.182305, "time": "06/16/25,19:00:32", "speed": 52, "speed_limit": 40, "street_name": null, "street_name_ar": null, "distance_to_segment": 4.43, "vehicle_direction": 208, "segment_bearing": 129.5, "nearest_segment": [[26.1809944, 50.1823117], [26.1809607, 50.1823573]], "closest_point": [26.180981212027184, 50.182329544853424]}, {"latitude": 26.219177, "longitude": 50.196702, "time": "06/16/25,19:04:22", "speed": 67, "speed_limit": 50, "street_name": null, "street_name_ar": null, "distance_to_segment": 0.7, "vehicle_direction": 354, "segment_bearing": 22.4, "nearest_segment": [[26.219068, 50.1966444], [26.2191899, 50.1967004]], "closest_point": [26.21917985495407, 50.19669578537676]}, {"latitude": 26.24397, "longitude": 50.197237, "time": "06/16/25,19:24:38", "speed": 113, "speed_limit": 110, "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.42, "vehicle_direction": 19, "segment_bearing": 14.6, "nearest_segment": [[26.2428935, 50.1969601], [26.2444024, 50.1973978]], "closest_point": [26.243960536272386, 50.19726962467123]}, {"latitude": 26.25989, "longitude": 50.190947, "time": "06/16/25,19:25:56", "speed": 80, "speed_limit": 60, "street_name": null, "street_name_ar": "\u0637\u0631\u064a\u0642 \u0627\u0644\u0645\u0644\u0643 \u062e\u0627\u0644\u062f \u0627\u0644\u0641\u0631\u0639\u064a", "distance_to_segment": 5.5, "vehicle_direction": 324, "segment_bearing": 335.5, "nearest_segment": [[26.2597155, 50.1910962], [26.2606681, 50.1906113]], "closest_point": [26.25991440802247, 50.190994950262336]}, {"latitude": 26.268298, "longitude": 50.187518, "time": "06/16/25,19:27:27", "speed": 65, "speed_limit": 60, "street_name": null, "street_name_ar": "20th Street", "distance_to_segment": 7.32, "vehicle_direction": 339, "segment_bearing": 70.8, "nearest_segment": [[26.2683114, 50.1873379], [26.2685176, 50.1879996]], "closest_point": [26.268361369373014, 50.18749825273581]}, {"latitude": 26.211972, "longitude": 50.1969, "time": "06/16/25,19:40:12", "speed": 66, "speed_limit": 60, "street_name": null, "street_name_ar": null, "distance_to_segment": 0.98, "vehicle_direction": 173, "segment_bearing": 180.0, "nearest_segment": [[26.2124636, 50.1968903], [26.2115147, 50.1968901]], "closest_point": [26.21197200206631, 50.19689019638572]}, {"latitude": 26.185478, "longitude": 50.18486, "time": "06/16/25,19:43:42", "speed": 36, "speed_limit": 30, "street_name": null, "street_name_ar": null, "distance_to_segment": 3.21, "vehicle_direction": 210, "segment_bearing": 278.4, "nearest_segment": [[26.1854742, 50.1851091], [26.1855213, 50.1847529]], "closest_point": [26.18550663755088, 50.184863786717145]}, {"latitude": 26.18098, "longitude": 50.182397, "time": "06/17/25,03:28:59", "speed": 94, "speed_limit": 40, "street_name": null, "street_name_ar": null, "distance_to_segment": 3.09, "vehicle_direction": 210, "segment_bearing": 104.9, "nearest_segment": [[26.1809607, 50.1823573], [26.1809511, 50.1823976]], "closest_point": [26.18095278713882, 50.18239051753183]}, {"latitude": 26.223423, "longitude": 50.195868, "time": "06/17/25,03:32:35", "speed": 113, "speed_limit": 110, "street_name": "King Khaled Road", "street_name_ar": "\u0637\u0631\u064a\u0642 \u0627\u0644\u0645\u0644\u0643 \u062e\u0627\u0644\u062f", "distance_to_segment": 7.11, "vehicle_direction": 353, "segment_bearing": 354.3, "nearest_segment": [[26.221408, 50.1961629], [26.2244909, 50.1958212]], "closest_point": [26.223430835588093, 50.1959386945699]}, {"latitude": 26.250665, "longitude": 50.196978, "time": "06/17/25,03:34:20", "speed": 117, "speed_limit": 110, "street_name": "King Khaled Road", "street_name_ar": "\u0637\u0631\u064a\u0642 \u0627\u0644\u0645\u0644\u0643 \u062e\u0627\u0644\u062f", "distance_to_segment": 0.08, "vehicle_direction": 1, "segment_bearing": 344.6, "nearest_segment": [[26.249619, 50.1973004], [26.25072, 50.1969619]], "closest_point": [26.250665227421397, 50.196978739707404]}, {"latitude": 26.254962, "longitude": 50.194305, "time": "06/17/25,03:34:39", "speed": 111, "speed_limit": 110, "street_name": null, "street_name_ar": null, "distance_to_segment": 0.24, "vehicle_direction": 341, "segment_bearing": 320.0, "nearest_segment": [[26.2543783, 50.1948539], [26.2554333, 50.1938674]], "closest_point": [26.254963546017265, 50.19430665336869]}, {"latitude": 26.267362, "longitude": 50.18751, "time": "06/17/25,03:35:30", "speed": 112, "speed_limit": 110, "street_name": "King Khaled Road", "street_name_ar": "\u0637\u0631\u064a\u0642 \u0627\u0644\u0645\u0644\u0643 \u062e\u0627\u0644\u062f", "distance_to_segment": 4.64, "vehicle_direction": 338, "segment_bearing": 338.8, "nearest_segment": [[26.2635741, 50.1892005], [26.2679627, 50.1872996]], "closest_point": [26.267380159398794, 50.1875519245292]}, {"latitude": 26.29489, "longitude": 50.16963, "time": "06/17/25,03:39:35", "speed": 54, "speed_limit": 40, "street_name": null, "street_name_ar": null, "distance_to_segment": 9.28, "vehicle_direction": 306, "segment_bearing": 321.6, "nearest_segment": [[26.2947719, 50.1696163], [26.2952981, 50.1691508]], "closest_point": [26.2948313528218, 50.169563705380945]}, {"latitude": 26.342437, "longitude": 50.179168, "time": "06/17/25,03:43:29", "speed": 94, "speed_limit": 60, "street_name": null, "street_name_ar": "King Saud Road", "distance_to_segment": 3.57, "vehicle_direction": 358, "segment_bearing": 358.4, "nearest_segment": [[26.342014, 50.1791449], [26.3443044, 50.1790757]], "closest_point": [26.34243591694014, 50.179132152596814]}, {"latitude": 26.344337, "longitude": 50.179187, "time": "06/17/25,03:43:42", "speed": 79, "speed_limit": 40, "street_name": null, "street_name_ar": null, "distance_to_segment": 1.51, "vehicle_direction": 0, "segment_bearing": 64.5, "nearest_segment": [[26.3443044, 50.1790757], [26.34461, 50.1797908]], "closest_point": [26.344349653461492, 50.179181592507575]}, {"latitude": 26.362015, "longitude": 50.17843, "time": "06/17/25,06:28:00", "speed": 72, "speed_limit": 40, "street_name": null, "street_name_ar": null, "distance_to_segment": 6.22, "vehicle_direction": 359, "segment_bearing": 307.6, "nearest_segment": [[26.3619285, 50.1784775], [26.3619591, 50.1784331]], "closest_point": [26.3619591, 50.1784331]}, {"latitude": 26.352695, "longitude": 50.178645, "time": "06/17/25,06:28:56", "speed": 74, "speed_limit": 60, "street_name": "King Saud Road", "street_name_ar": "\u0637\u0631\u064a\u0642 \u0627\u0644\u0645\u0644\u0643 \u0633\u0639\u0648\u062f", "distance_to_segment": 6.88, "vehicle_direction": 177, "segment_bearing": 178.4, "nearest_segment": [[26.3561771, 50.1784666], [26.3526239, 50.1785782]], "closest_point": [26.352692833922966, 50.178576034902115]}, {"latitude": 26.32459, "longitude": 50.179355, "time": "06/17/25,06:31:01", "speed": 108, "speed_limit": 100, "street_name": "King Saud Road", "street_name_ar": "\u0637\u0631\u064a\u0642 \u0627\u0644\u0645\u0644\u0643 \u0633\u0639\u0648\u062f", "distance_to_segment": 7.54, "vehicle_direction": 178, "segment_bearing": 358.3, "nearest_segment": [[26.3239171, 50.1794536], [26.3271943, 50.179342]], "closest_point": [26.324592574365337, 50.179430597760536]}, {"latitude": 26.30478, "longitude": 50.173727, "time": "06/17/25,06:32:30", "speed": 108, "speed_limit": 100, "street_name": "King Saud Road", "street_name_ar": "\u0637\u0631\u064a\u0642 \u0627\u0644\u0645\u0644\u0643 \u0633\u0639\u0648\u062f", "distance_to_segment": 4.22, "vehicle_direction": 211, "segment_bearing": 31.0, "nearest_segment": [[26.3046136, 50.1736645], [26.3077163, 50.1757469]], "closest_point": [26.304757243018532, 50.17376090707184]}, {"latitude": 26.292848, "longitude": 50.157507, "time": "06/17/25,06:33:52", "speed": 77, "speed_limit": 40, "street_name": null, "street_name_ar": null, "distance_to_segment": 3.54, "vehicle_direction": 221, "segment_bearing": 183.2, "nearest_segment": [[26.2929929, 50.1575516], [26.2927938, 50.1575392]], "closest_point": [26.292845792903908, 50.157542438131635]}, {"latitude": 26.292535, "longitude": 50.159573, "time": "06/17/25,06:34:12", "speed": 54, "speed_limit": 40, "street_name": null, "street_name_ar": null, "distance_to_segment": 1.6, "vehicle_direction": 56, "segment_bearing": 35.0, "nearest_segment": [[26.2922492, 50.1593304], [26.2925449, 50.1595613]], "closest_point": [26.292544425420505, 50.159560929420344]}, {"latitude": 26.294935, "longitude": 50.168807, "time": "06/17/25,06:35:00", "speed": 84, "speed_limit": 80, "street_name": "Custodian of the Two Holly Mosques Road", "street_name_ar": "\u0637\u0631\u064a\u0642 \u062e\u0627\u062f\u0645 \u0627\u0644\u062d\u0631\u0645\u064a\u0646 \u0627\u0644\u0634\u0631\u064a\u0641\u064a\u0646", "distance_to_segment": 0.78, "vehicle_direction": 96, "segment_bearing": 127.9, "nearest_segment": [[26.2952648, 50.1683471], [26.2944474, 50.1695184]], "closest_point": [26.294940955279895, 50.16881115593425]}, {"latitude": 26.248902, "longitude": 50.197333, "time": "06/17/25,06:38:44", "speed": 122, "speed_limit": 110, "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.57, "vehicle_direction": 156, "segment_bearing": 350.0, "nearest_segment": [[26.248313, 50.1975866], [26.2492008, 50.1974124]], "closest_point": [26.248928079371975, 50.19746591197725]}, {"latitude": 26.24038, "longitude": 50.195655, "time": "06/17/25,06:39:14", "speed": 115, "speed_limit": 110, "street_name": "King Khaled Road", "street_name_ar": "\u0637\u0631\u064a\u0642 \u0627\u0644\u0645\u0644\u0643 \u062e\u0627\u0644\u062f", "distance_to_segment": 9.38, "vehicle_direction": 189, "segment_bearing": 199.3, "nearest_segment": [[26.2407109, 50.195685], [26.2392521, 50.1951147]], "closest_point": [26.24041369447945, 50.19556881114041]}, {"latitude": 26.190972, "longitude": 50.188525, "time": "06/17/25,06:43:14", "speed": 66, "speed_limit": 40, "street_name": null, "street_name_ar": null, "distance_to_segment": 0.67, "vehicle_direction": 214, "segment_bearing": 121.5, "nearest_segment": [[26.1913841, 50.1877874], [26.1908701, 50.1887233]], "closest_point": [26.190977383384745, 50.1885279565763]}, {"latitude": 26.181, "longitude": 50.182327, "time": "06/17/25,07:01:27", "speed": 82, "speed_limit": 40, "street_name": null, "street_name_ar": null, "distance_to_segment": 1.46, "vehicle_direction": 209, "segment_bearing": 129.5, "nearest_segment": [[26.1809944, 50.1823117], [26.1809607, 50.1823573]], "closest_point": [26.180989065105674, 50.182318918729415]}, {"latitude": 26.242163, "longitude": 50.196583, "time": "06/17/25,07:06:16", "speed": 114, "speed_limit": 110, "street_name": "King Khaled Road", "street_name_ar": "\u0637\u0631\u064a\u0642 \u0627\u0644\u0645\u0644\u0643 \u062e\u0627\u0644\u062f", "distance_to_segment": 7.69, "vehicle_direction": 11, "segment_bearing": 19.9, "nearest_segment": [[26.241577, 50.1964279], [26.2428935, 50.1969601]], "closest_point": [26.242134579515835, 50.19665330358399]}, {"latitude": 26.263048, "longitude": 50.189312, "time": "06/17/25,07:07:42", "speed": 111, "speed_limit": 110, "street_name": "King Khaled Road", "street_name_ar": "\u0637\u0631\u064a\u0642 \u0627\u0644\u0645\u0644\u0643 \u062e\u0627\u0644\u062f", "distance_to_segment": 9.44, "vehicle_direction": 331, "segment_bearing": 340.1, "nearest_segment": [[26.261549, 50.1900161], [26.2635741, 50.1892005]], "closest_point": [26.26308278682135, 50.189398374193125]}, {"latitude": 26.287595, "longitude": 50.179247, "time": "06/17/25,07:09:36", "speed": 70, "speed_limit": 50, "street_name": null, "street_name_ar": null, "distance_to_segment": 2.3, "vehicle_direction": 338, "segment_bearing": 358.5, "nearest_segment": [[26.2874, 50.1792759], [26.2876552, 50.1792683]], "closest_point": [26.287595687106933, 50.17927007232753]}, {"latitude": 26.285593, "longitude": 50.190567, "time": "06/17/25,07:10:42", "speed": 78, "speed_limit": 60, "street_name": null, "street_name_ar": null, "distance_to_segment": 7.84, "vehicle_direction": 108, "segment_bearing": 107.2, "nearest_segment": [[26.285802, 50.1900779], [26.2855937, 50.1908306]], "closest_point": [26.285661408906797, 50.190585931281106]}, {"latitude": 26.284083, "longitude": 50.197635, "time": "06/17/25,07:18:09", "speed": 65, "speed_limit": 60, "street_name": null, "street_name_ar": null, "distance_to_segment": 3.9, "vehicle_direction": 288, "segment_bearing": 287.5, "nearest_segment": [[26.2839493, 50.1979784], [26.2841447, 50.1972868]], "closest_point": [26.28404903331241, 50.19762540328115]}, {"latitude": 26.289135, "longitude": 50.179728, "time": "06/17/25,07:19:45", "speed": 66, "speed_limit": 50, "street_name": null, "street_name_ar": null, "distance_to_segment": 2.17, "vehicle_direction": 288, "segment_bearing": 264.3, "nearest_segment": [[26.2891291, 50.1798805], [26.2891134, 50.1797057]], "closest_point": [26.289115559743752, 50.179729746064204]}, {"latitude": 26.218447, "longitude": 50.206795, "time": "06/17/25,07:26:13", "speed": 77, "speed_limit": 50, "street_name": null, "street_name_ar": null, "distance_to_segment": 0.31, "vehicle_direction": 83, "segment_bearing": 91.6, "nearest_segment": [[26.218454, 50.2066242], [26.2184355, 50.2073813]], "closest_point": [26.218449824756384, 50.2067950690239]}, {"latitude": 26.401038, "longitude": 49.876102, "time": "06/17/25,09:12:29", "speed": 113, "speed_limit": 90, "street_name": "King Fahd Road", "street_name_ar": "\u0637\u0631\u064a\u0642 \u0627\u0644\u0645\u0644\u0643 \u0641\u0647\u062f", "distance_to_segment": 12.47, "vehicle_direction": 281, "segment_bearing": 280.1, "nearest_segment": [[26.4007857, 49.8769664], [26.4029607, 49.8633828]], "closest_point": [26.400926954362433, 49.87608421942183]}, {"latitude": 26.439738, "longitude": 49.808028, "time": "06/17/25,09:38:23", "speed": 115, "speed_limit": 50, "street_name": null, "street_name_ar": null, "distance_to_segment": 0.18, "vehicle_direction": 344, "segment_bearing": 348.2, "nearest_segment": [[26.4391959, 49.8081524], [26.4402755, 49.8079009]], "closest_point": [26.439737583303877, 49.80802621127184]}, {"latitude": 26.44426, "longitude": 49.806635, "time": "06/17/25,09:38:42", "speed": 116, "speed_limit": 45, "street_name": null, "street_name_ar": null, "distance_to_segment": 1.02, "vehicle_direction": 344, "segment_bearing": 342.0, "nearest_segment": [[26.4436531, 49.8068659], [26.4447897, 49.8064535]], "closest_point": [26.444263428937997, 49.80664445036598]}, {"latitude": 26.448748, "longitude": 49.805287, "time": "06/17/25,09:38:56", "speed": 115, "speed_limit": 90, "street_name": "King Fahd Road", "street_name_ar": "\u0637\u0631\u064a\u0642 \u0627\u0644\u0645\u0644\u0643 \u0641\u0647\u062f", "distance_to_segment": 2.94, "vehicle_direction": 344, "segment_bearing": 345.6, "nearest_segment": [[26.4447897, 49.8064535], [26.4492608, 49.8051703]], "closest_point": [26.448756080148858, 49.805315153953835]}, {"latitude": 26.462198, "longitude": 49.802023, "time": "06/17/25,09:39:52", "speed": 96, "speed_limit": 60, "street_name": null, "street_name_ar": "\u0637\u0631\u064a\u0642 \u0627\u0644\u0645\u0637\u0627\u0631", "distance_to_segment": 5.97, "vehicle_direction": 344, "segment_bearing": 352.7, "nearest_segment": [[26.4618703, 49.8020095], [26.4623204, 49.8019451]], "closest_point": [26.462189533186226, 49.80196382433416]}, {"latitude": 26.471323, "longitude": 49.796882, "time": "06/17/25,09:41:35", "speed": 62, "speed_limit": 20, "street_name": null, "street_name_ar": null, "distance_to_segment": 0.91, "vehicle_direction": 179, "segment_bearing": 166.5, "nearest_segment": [[26.4717559, 49.7967754], [26.4711997, 49.7969244]], "closest_point": [26.471325341860094, 49.796890741896526]}, {"latitude": 26.446115, "longitude": 49.80572, "time": "06/17/25,09:46:21", "speed": 91, "speed_limit": 90, "street_name": "King Fahd Road", "street_name_ar": "\u0637\u0631\u064a\u0642 \u0627\u0644\u0645\u0644\u0643 \u0641\u0647\u062f", "distance_to_segment": 0.7, "vehicle_direction": 163, "segment_bearing": 164.0, "nearest_segment": [[26.4491808, 49.8047327], [26.4438778, 49.8064278]], "closest_point": [26.44611287727741, 49.8057133592131]}, {"latitude": 26.377565, "longitude": 50.006978, "time": "06/17/25,09:59:49", "speed": 98, "speed_limit": 40, "street_name": null, "street_name_ar": null, "distance_to_segment": 3.81, "vehicle_direction": 66, "segment_bearing": 57.7, "nearest_segment": [[26.3768967, 50.0058698], [26.3777766, 50.0074226]], "closest_point": [26.377534469093934, 50.00699530045353]}, {"latitude": 26.379453, "longitude": 50.011797, "time": "06/17/25,10:00:11", "speed": 93, "speed_limit": 90, "street_name": "King Fahd Road", "street_name_ar": "\u0637\u0631\u064a\u0642 \u0627\u0644\u0645\u0644\u0643 \u0641\u0647\u062f", "distance_to_segment": 4.7, "vehicle_direction": 66, "segment_bearing": 66.3, "nearest_segment": [[26.3777766, 50.0074226], [26.3797523, 50.0124402]], "closest_point": [26.379492857795817, 50.01178130583403]}, {"latitude": 26.185202, "longitude": 50.184722, "time": "06/17/25,10:19:59", "speed": 73, "speed_limit": 30, "street_name": null, "street_name_ar": null, "distance_to_segment": 7.99, "vehicle_direction": 212, "segment_bearing": 133.6, "nearest_segment": [[26.1852421, 50.1845598], [26.1850235, 50.1848152]], "closest_point": [26.18514501640301, 50.18467322703876]}, {"latitude": 26.18903, "longitude": 50.180217, "time": "06/17/25,10:22:29", "speed": 44, "speed_limit": 40, "street_name": null, "street_name_ar": null, "distance_to_segment": 7.59, "vehicle_direction": 307, "segment_bearing": 309.2, "nearest_segment": [[26.188826, 50.1803756], [26.1892881, 50.1797453]], "closest_point": [26.188972943993893, 50.18017516979149]}, {"latitude": 26.193585, "longitude": 50.176403, "time": "06/17/25,10:27:49", "speed": 44, "speed_limit": 40, "street_name": null, "street_name_ar": null, "distance_to_segment": 4.15, "vehicle_direction": 325, "segment_bearing": 61.0, "nearest_segment": [[26.1935873, 50.1763222], [26.1937409, 50.1766309]], "closest_point": [26.193619069011156, 50.17638604826656]}, {"latitude": 26.197963, "longitude": 50.186728, "time": "06/17/25,10:33:56", "speed": 47, "speed_limit": 40, "street_name": null, "street_name_ar": null, "distance_to_segment": 2.9, "vehicle_direction": 130, "segment_bearing": 129.9, "nearest_segment": [[26.1981147, 50.1865711], [26.1976846, 50.1871435]], "closest_point": [26.19798460663913, 50.18674423517731]}, {"latitude": 26.181127, "longitude": 50.182328, "time": "06/17/25,10:36:29", "speed": 87, "speed_limit": 40, "street_name": null, "street_name_ar": null, "distance_to_segment": 1.77, "vehicle_direction": 210, "segment_bearing": 219.4, "nearest_segment": [[26.1813499, 50.1825549], [26.1810931, 50.1823198]], "closest_point": [26.181115626655117, 50.18234042311767]}, {"latitude": 26.200733, "longitude": 50.195773, "time": "06/17/25,10:38:37", "speed": 83, "speed_limit": 40, "street_name": null, "street_name_ar": null, "distance_to_segment": 1.16, "vehicle_direction": 31, "segment_bearing": 92.3, "nearest_segment": [[26.200727, 50.1956499], [26.2006851, 50.1968162]], "closest_point": [26.20072259099587, 50.19577262605053]}, {"latitude": 26.205037, "longitude": 50.197487, "time": "06/17/25,10:39:08", "speed": 63, "speed_limit": 40, "street_name": null, "street_name_ar": null, "distance_to_segment": 0.34, "vehicle_direction": 27, "segment_bearing": 6.9, "nearest_segment": [[26.2049937, 50.1974846], [26.2051133, 50.1975007]], "closest_point": [26.20503654664003, 50.197490367816926]}, {"latitude": 26.211422, "longitude": 50.198363, "time": "06/17/25,10:40:14", "speed": 61, "speed_limit": 40, "street_name": null, "street_name_ar": null, "distance_to_segment": 3.78, "vehicle_direction": 358, "segment_bearing": 2.1, "nearest_segment": [[26.2112188, 50.1983169], [26.2118815, 50.1983437]], "closest_point": [26.211423529489068, 50.19832517938782]}, {"latitude": 26.243175, "longitude": 50.19702, "time": "06/17/25,10:58:50", "speed": 121, "speed_limit": 110, "street_name": "King Khaled Road", "street_name_ar": "\u0637\u0631\u064a\u0642 \u0627\u0644\u0645\u0644\u0643 \u062e\u0627\u0644\u062f", "distance_to_segment": 2.1, "vehicle_direction": 15, "segment_bearing": 14.6, "nearest_segment": [[26.2428935, 50.1969601], [26.2444024, 50.1973978]], "closest_point": [26.243169178546495, 50.19704006851998]}, {"latitude": 26.251568, "longitude": 50.196462, "time": "06/17/25,10:59:20", "speed": 117, "speed_limit": 110, "street_name": "King Khaled Road", "street_name_ar": "\u0637\u0631\u064a\u0642 \u0627\u0644\u0645\u0644\u0643 \u062e\u0627\u0644\u062f", "distance_to_segment": 10.72, "vehicle_direction": 357, "segment_bearing": 335.3, "nearest_segment": [[26.2513111, 50.1967119], [26.2522741, 50.1962171]], "closest_point": [26.251615926611475, 50.196555276731715]}, {"latitude": 26.287597, "longitude": 50.17922, "time": "06/17/25,11:01:57", "speed": 68, "speed_limit": 50, "street_name": null, "street_name_ar": null, "distance_to_segment": 4.99, "vehicle_direction": 339, "segment_bearing": 358.5, "nearest_segment": [[26.2874, 50.1792759], [26.2876552, 50.1792683]], "closest_point": [26.28759848869749, 50.17926998889459]}, {"latitude": 26.285772, "longitude": 50.190228, "time": "06/17/25,11:02:58", "speed": 74, "speed_limit": 60, "street_name": null, "street_name_ar": null, "distance_to_segment": 1.23, "vehicle_direction": 108, "segment_bearing": 107.2, "nearest_segment": [[26.285802, 50.1900779], [26.2855937, 50.1908306]], "closest_point": [26.28576128254368, 50.19022503408243]}, {"latitude": 26.283578, "longitude": 50.197477, "time": "06/17/25,11:03:43", "speed": 62, "speed_limit": 60, "street_name": "Riyadh Street", "street_name_ar": "\u0634\u0627\u0631\u0639 \u0627\u0644\u0631\u064a\u0627\u0636", "distance_to_segment": 2.88, "vehicle_direction": 111, "segment_bearing": 137.2, "nearest_segment": [[26.2836496, 50.197364], [26.2835345, 50.1974828]], "closest_point": [26.283558460606585, 50.19745806915672]}, {"latitude": 26.288322, "longitude": 50.182857, "time": "06/17/25,11:09:27", "speed": 75, "speed_limit": 50, "street_name": null, "street_name_ar": null, "distance_to_segment": 0.9, "vehicle_direction": 287, "segment_bearing": 289.5, "nearest_segment": [[26.2878941, 50.1842345], [26.2885052, 50.1823058]], "closest_point": [26.288329774268952, 50.18285946324247]}, {"latitude": 26.289155, "longitude": 50.179672, "time": "06/17/25,11:09:43", "speed": 76, "speed_limit": 50, "street_name": null, "street_name_ar": null, "distance_to_segment": 5.24, "vehicle_direction": 288, "segment_bearing": 257.8, "nearest_segment": [[26.2891134, 50.1797057], [26.2890927, 50.1795991]], "closest_point": [26.28910860542145, 50.17968100907857]}, {"latitude": 26.234987, "longitude": 50.19443, "time": "06/17/25,11:57:05", "speed": 114, "speed_limit": 110, "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.49, "vehicle_direction": 198, "segment_bearing": 182.7, "nearest_segment": [[26.2361726, 50.194368], [26.2348869, 50.1942993]], "closest_point": [26.234993678940683, 50.194305005618126]}, {"latitude": 26.19114, "longitude": 50.188632, "time": "06/17/25,12:00:39", "speed": 70, "speed_limit": 40, "street_name": null, "street_name_ar": null, "distance_to_segment": 20.93, "vehicle_direction": 211, "segment_bearing": 121.5, "nearest_segment": [[26.1913841, 50.1877874], [26.1908701, 50.1887233]], "closest_point": [26.190971166675425, 50.18853927606707]}, {"latitude": 26.181042, "longitude": 50.182362, "time": "06/17/25,13:15:31", "speed": 77, "speed_limit": 40, "street_name": null, "street_name_ar": null, "distance_to_segment": 5.65, "vehicle_direction": 209, "segment_bearing": 196.3, "nearest_segment": [[26.1810931, 50.1823198], [26.1810353, 50.182301]], "closest_point": [26.181059301610055, 50.18230880675206]}, {"latitude": 26.258355, "longitude": 50.191928, "time": "06/17/25,13:22:08", "speed": 78, "speed_limit": 60, "street_name": null, "street_name_ar": "\u0637\u0631\u064a\u0642 \u0627\u0644\u0645\u0644\u0643 \u062e\u0627\u0644\u062f \u0627\u0644\u0641\u0631\u0639\u064a", "distance_to_segment": 0.56, "vehicle_direction": 324, "segment_bearing": 324.4, "nearest_segment": [[26.2578041, 50.1923615], [26.2584696, 50.1918295]], "closest_point": [26.258351640125746, 50.191923796999404]}, {"latitude": 26.262543, "longitude": 50.189833, "time": "06/17/25,13:22:48", "speed": 59, "speed_limit": 40, "street_name": null, "street_name_ar": "26th Street", "distance_to_segment": 4.87, "vehicle_direction": 325, "segment_bearing": 71.0, "nearest_segment": [[26.2625682, 50.1897649], [26.2627837, 50.1904622]], "closest_point": [26.262585214302607, 50.18981995370398]}, {"latitude": 26.243187, "longitude": 50.196792, "time": "06/17/25,13:49:13", "speed": 111, "speed_limit": 110, "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.06, "vehicle_direction": 178, "segment_bearing": 199.4, "nearest_segment": [[26.2435093, 50.1967798], [26.242216, 50.1962734]], "closest_point": [26.243233987007866, 50.19667199941296]}, {"latitude": 26.190967, "longitude": 50.188593, "time": "06/17/25,13:53:29", "speed": 69, "speed_limit": 40, "street_name": null, "street_name_ar": null, "distance_to_segment": 2.41, "vehicle_direction": 212, "segment_bearing": 121.5, "nearest_segment": [[26.1913841, 50.1877874], [26.1908701, 50.1887233]], "closest_point": [26.190947533009147, 50.18858230865124]}, {"latitude": 26.22232, "longitude": 50.196007, "time": "06/17/25,20:08:05", "speed": 114, "speed_limit": 110, "street_name": "King Khaled Road", "street_name_ar": "\u0637\u0631\u064a\u0642 \u0627\u0644\u0645\u0644\u0643 \u062e\u0627\u0644\u062f", "distance_to_segment": 5.44, "vehicle_direction": 353, "segment_bearing": 354.3, "nearest_segment": [[26.221408, 50.1961629], [26.2244909, 50.1958212]], "closest_point": [26.222326001970984, 50.196061151233096]}, {"latitude": 26.249578, "longitude": 50.197283, "time": "06/17/25,20:09:47", "speed": 117, "speed_limit": 110, "street_name": "King Khaled Road", "street_name_ar": "\u0637\u0631\u064a\u0642 \u0627\u0644\u0645\u0644\u0643 \u062e\u0627\u0644\u062f", "distance_to_segment": 2.76, "vehicle_direction": 7, "segment_bearing": 346.5, "nearest_segment": [[26.2492008, 50.1974124], [26.249619, 50.1973004]], "closest_point": [26.24958509200767, 50.19730948105008]}, {"latitude": 26.25732, "longitude": 50.192645, "time": "06/17/25,20:10:31", "speed": 82, "speed_limit": 60, "street_name": null, "street_name_ar": "\u0637\u0631\u064a\u0642 \u0627\u0644\u0645\u0644\u0643 \u062e\u0627\u0644\u062f \u0627\u0644\u0641\u0631\u0639\u064a", "distance_to_segment": 9.1, "vehicle_direction": 327, "segment_bearing": 324.3, "nearest_segment": [[26.25704, 50.1929809], [26.2574231, 50.1926741]], "closest_point": [26.25737448372858, 50.19271303362587]}, {"latitude": 26.26839, "longitude": 50.18755, "time": "06/17/25,20:12:05", "speed": 68, "speed_limit": 60, "street_name": null, "street_name_ar": "20th Street", "distance_to_segment": 1.32, "vehicle_direction": 338, "segment_bearing": 70.8, "nearest_segment": [[26.2683114, 50.1873379], [26.2685176, 50.1879996]], "closest_point": [26.268378601794346, 50.18755355192687]}, {"latitude": 26.185468, "longitude": 50.184843, "time": "06/17/25,20:29:39", "speed": 54, "speed_limit": 30, "street_name": null, "street_name_ar": null, "distance_to_segment": 4.55, "vehicle_direction": 213, "segment_bearing": 278.4, "nearest_segment": [[26.1854742, 50.1851091], [26.1855213, 50.1847529]], "closest_point": [26.185508674976578, 50.18484837841493]}, {"latitude": 26.36197, "longitude": 50.178468, "time": "06/18/25,05:48:27", "speed": 84, "speed_limit": 40, "street_name": null, "street_name_ar": null, "distance_to_segment": 3.1, "vehicle_direction": 357, "segment_bearing": 307.6, "nearest_segment": [[26.3619285, 50.1784775], [26.3619591, 50.1784331]], "closest_point": [26.36194630295902, 50.17845166825554]}, {"latitude": 26.352383, "longitude": 50.178618, "time": "06/18/25,05:49:20", "speed": 84, "speed_limit": 60, "street_name": "King Saud Road", "street_name_ar": "\u0637\u0631\u064a\u0642 \u0627\u0644\u0645\u0644\u0643 \u0633\u0639\u0648\u062f", "distance_to_segment": 3.26, "vehicle_direction": 178, "segment_bearing": 178.5, "nearest_segment": [[26.3526239, 50.1785782], [26.349042, 50.1786838]], "closest_point": [26.35238203685226, 50.17858533050291]}, {"latitude": 26.278002, "longitude": 50.182885, "time": "06/18/25,05:56:33", "speed": 115, "speed_limit": 110, "street_name": "King Khaled Road", "street_name_ar": "\u0637\u0631\u064a\u0642 \u0627\u0644\u0645\u0644\u0643 \u062e\u0627\u0644\u062f", "distance_to_segment": 8.35, "vehicle_direction": 158, "segment_bearing": 158.9, "nearest_segment": [[26.2820518, 50.1810501], [26.2751079, 50.1840428]], "closest_point": [26.27796946703403, 50.18280951443098]}, {"latitude": 26.24917, "longitude": 50.197208, "time": "06/18/25,05:58:28", "speed": 102, "speed_limit": 90, "street_name": null, "street_name_ar": "Southern Street", "distance_to_segment": 7.26, "vehicle_direction": 148, "segment_bearing": 58.6, "nearest_segment": [[26.2491215, 50.1969801], [26.2492719, 50.1972551]], "closest_point": [26.249228609823632, 50.197175945754644]}, {"latitude": 26.22222, "longitude": 50.19573, "time": "06/18/25,06:00:08", "speed": 115, "speed_limit": 110, "street_name": "King Khaled Road", "street_name_ar": "\u0637\u0631\u064a\u0642 \u0627\u0644\u0645\u0644\u0643 \u062e\u0627\u0644\u062f", "distance_to_segment": 1.77, "vehicle_direction": 174, "segment_bearing": 174.0, "nearest_segment": [[26.2239462, 50.1955447], [26.2190474, 50.1961212]], "closest_point": [26.222222071052606, 50.195747598738095]}, {"latitude": 26.217515, "longitude": 50.196272, "time": "06/18/25,06:00:27", "speed": 111, "speed_limit": 110, "street_name": "King Khaled Road", "street_name_ar": "\u0637\u0631\u064a\u0642 \u0627\u0644\u0645\u0644\u0643 \u062e\u0627\u0644\u062f", "distance_to_segment": 0.12, "vehicle_direction": 174, "segment_bearing": 174.1, "nearest_segment": [[26.2182376, 50.1961901], [26.2175131, 50.1962734]], "closest_point": [26.217515134076816, 50.196273166130304]}, {"latitude": 26.208438, "longitude": 50.197273, "time": "06/18/25,06:01:07", "speed": 101, "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": 1.62, "vehicle_direction": 174, "segment_bearing": 177.5, "nearest_segment": [[26.2089591, 50.1972637], [26.2083192, 50.1972951]], "closest_point": [26.208438796476575, 50.19728923138089]}, {"latitude": 26.191023, "longitude": 50.188378, "time": "06/18/25,06:02:44", "speed": 66, "speed_limit": 40, "street_name": null, "street_name_ar": null, "distance_to_segment": 3.5, "vehicle_direction": 213, "segment_bearing": 121.5, "nearest_segment": [[26.1913841, 50.1877874], [26.1908701, 50.1887233]], "closest_point": [26.191051226357306, 50.18839350202762]}, {"latitude": 26.18276, "longitude": 50.183318, "time": "06/18/25,06:26:11", "speed": 77, "speed_limit": 40, "street_name": null, "street_name_ar": null, "distance_to_segment": 2.0, "vehicle_direction": 210, "segment_bearing": 218.7, "nearest_segment": [[26.183082, 50.1835795], [26.1826004, 50.1831503]], "closest_point": [26.18277264854889, 50.18330380722007]}, {"latitude": 26.181013, "longitude": 50.182327, "time": "06/18/25,06:26:28", "speed": 80, "speed_limit": 40, "street_name": null, "street_name_ar": null, "distance_to_segment": 1.96, "vehicle_direction": 209, "segment_bearing": 166.8, "nearest_segment": [[26.1810353, 50.182301], [26.1809944, 50.1823117]], "closest_point": [26.18100806224305, 50.182308125770156]}, {"latitude": 26.287612, "longitude": 50.17926, "time": "06/18/25,06:36:28", "speed": 54, "speed_limit": 50, "street_name": null, "street_name_ar": null, "distance_to_segment": 0.96, "vehicle_direction": 337, "segment_bearing": 358.5, "nearest_segment": [[26.2874, 50.1792759], [26.2876552, 50.1792683]], "closest_point": [26.287612285239014, 50.179269578025796]}, {"latitude": 26.284008, "longitude": 50.197683, "time": "06/18/25,06:53:45", "speed": 61, "speed_limit": 60, "street_name": null, "street_name_ar": null, "distance_to_segment": 2.63, "vehicle_direction": 288, "segment_bearing": 287.5, "nearest_segment": [[26.2839493, 50.1979784], [26.2841447, 50.1972868]], "closest_point": [26.284030929940453, 50.197689478470735]}, {"latitude": 26.286817, "longitude": 50.188015, "time": "06/18/25,06:54:41", "speed": 68, "speed_limit": 60, "street_name": null, "street_name_ar": null, "distance_to_segment": 4.62, "vehicle_direction": 288, "segment_bearing": 287.2, "nearest_segment": [[26.2867507, 50.1884095], [26.2868881, 50.1879157]], "closest_point": [26.286857346025183, 50.188026226293765]}, {"latitude": 26.294692, "longitude": 50.169872, "time": "06/18/25,06:56:21", "speed": 70, "speed_limit": 60, "street_name": null, "street_name_ar": null, "distance_to_segment": 4.21, "vehicle_direction": 305, "segment_bearing": 298.2, "nearest_segment": [[26.2943865, 50.1704195], [26.2947719, 50.1696163]], "closest_point": [26.294657215899438, 50.169855309521466]}, {"latitude": 26.32331, "longitude": 50.17958, "time": "06/18/25,07:27:11", "speed": 80, "speed_limit": 40, "street_name": null, "street_name_ar": "King Saud Road", "distance_to_segment": 1.31, "vehicle_direction": 358, "segment_bearing": 358.2, "nearest_segment": [[26.3230815, 50.1796011], [26.3238633, 50.1795738]], "closest_point": [26.323310457616635, 50.17959310493357]}, {"latitude": 26.29915, "longitude": 50.166695, "time": "06/18/25,07:31:08", "speed": 101, "speed_limit": 100, "street_name": "King Saud Road", "street_name_ar": "\u0637\u0631\u064a\u0642 \u0627\u0644\u0645\u0644\u0643 \u0633\u0639\u0648\u062f", "distance_to_segment": 1.73, "vehicle_direction": 227, "segment_bearing": 235.1, "nearest_segment": [[26.3008662, 50.1694718], [26.298996, 50.1664787]], "closest_point": [26.29913644459203, 50.16670346992215]}, {"latitude": 26.290312, "longitude": 50.175797, "time": "06/18/25,07:33:03", "speed": 91, "speed_limit": 80, "street_name": "Custodian of the Two Holly Mosques Road", "street_name_ar": "\u0637\u0631\u064a\u0642 \u062e\u0627\u062f\u0645 \u0627\u0644\u062d\u0631\u0645\u064a\u0646 \u0627\u0644\u0634\u0631\u064a\u0641\u064a\u0646", "distance_to_segment": 7.92, "vehicle_direction": 126, "segment_bearing": 126.3, "nearest_segment": [[26.2911676, 50.1746329], [26.2902271, 50.1760591]], "closest_point": [26.290373288211917, 50.17583741618518]}, {"latitude": 26.218227, "longitude": 50.206982, "time": "06/18/25,07:55:37", "speed": 76, "speed_limit": 60, "street_name": null, "street_name_ar": null, "distance_to_segment": 6.78, "vehicle_direction": 80, "segment_bearing": 347.9, "nearest_segment": [[26.2181259, 50.2070756], [26.2182606, 50.2070434]], "closest_point": [26.218242700516083, 50.207047678866985]}];
// Add device name to each point's data
pathData.forEach(function(data) {
data.device_name = "6379 XBDMazda (FMC150)";
});
// 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 pulsing marker for violation point
function createPulsingIcon() {
return L.divIcon({
className: 'number-icon end-icon',
html: 'V<div class="pulse-ring"></div>',
iconSize: [32, 32]
});
}
// 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 += '<div class="popup-title">Point ' + pointNum + '</div>';
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) {
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.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;
}
// Function to create direction arrow from point
function createDirectionArrow(lat, lon, direction) {
if (direction === undefined || direction === null) return null;
var arrowLength = 0.0002; // Length of arrow in degrees
var radians = direction * Math.PI / 180;
var endLat = lat + arrowLength * Math.cos(radians);
var endLon = lon + arrowLength * Math.sin(radians);
var arrow = L.polyline([[lat, lon], [endLat, endLon]], {
color: '#3498db',
weight: 3,
opacity: 0.8
});
var decorator = L.polylineDecorator(arrow, {
patterns: [{
offset: '100%',
repeat: 0,
symbol: L.Symbol.arrowHead({
pixelSize: 12,
polygon: false,
pathOptions: {
stroke: true,
color: '#3498db',
weight: 2,
opacity: 0.9
}
})
}]
});
return { arrow: arrow, decorator: decorator };
}
// Add markers for all points
var allBounds = [];
for (var i = 0; i < pathData.length; i++) {
var data = pathData[i];
var iconClass = '';
var icon;
if (i === 0) {
icon = createNumberedIcon('S', 'start-icon');
} else if (i === latlngs.length - 1) {
icon = createPulsingIcon(); // Use pulsing icon for violation point
} else {
icon = createNumberedIcon(i + 1);
}
var popupContent = createPopupContent(i + 1, data);
// Add marker to map
var vehicleMarker = L.marker([data.latitude, data.longitude], {icon: icon})
.addTo(map)
.bindPopup(popupContent);
allBounds.push([data.latitude, data.longitude]);
// Add direction arrow for each point
if (data.vehicle_direction !== undefined && data.vehicle_direction !== null) {
var directionArrowData = createDirectionArrow(data.latitude, data.longitude, data.vehicle_direction);
if (directionArrowData) {
directionArrowData.arrow.addTo(map);
directionArrowData.decorator.addTo(map);
}
}
// Draw the nearest street segment for each point if available
if (data.nearest_segment && data.nearest_segment.length === 2) {
var segmentPolyline = L.polyline(data.nearest_segment, {
color: '#9b59b6',
weight: 8,
opacity: 0.8
}).addTo(map).bindPopup('Nearest Street Segment for Point ' + (i + 1));
// Add enhanced start and end circles for the segment
L.circleMarker(data.nearest_segment[0], {
radius: 6,
color: '#8e44ad',
fillColor: '#9b59b6',
fillOpacity: 1,
weight: 2
}).addTo(map);
L.circleMarker(data.nearest_segment[1], {
radius: 6,
color: '#8e44ad',
fillColor: '#9b59b6',
fillOpacity: 1,
weight: 2
}).addTo(map);
}
// Draw the closest point on the segment and a line to it
if (data.closest_point && data.closest_point.length === 2) {
// Enhanced closest point marker
L.circleMarker(data.closest_point, {
radius: 8,
color: '#e67e22',
fillColor: '#f39c12',
fillOpacity: 1,
weight: 3
}).addTo(map).bindPopup('Closest Point on Street<br>Distance: ' + (data.distance_to_segment ? data.distance_to_segment.toFixed(2) + ' m' : 'N/A'));
// Enhanced dashed line from vehicle to closest point
var lineToClosest = [
[data.latitude, data.longitude],
data.closest_point
];
L.polyline(lineToClosest, {
color: '#3498db',
weight: 3,
opacity: 0.7,
dashArray: '8, 8'
}).addTo(map);
}
}
// Fit the map to show all points
if (allBounds.length > 0) {
var bounds = L.latLngBounds(allBounds);
map.fitBounds(bounds.pad(0.1));
}
// Add enhanced legend with toggle functionality
var legendHtml = '<button class="legend-toggle-btn" onclick="toggleLegend()"><i class="fas fa-chevron-right"></i></button>';
legendHtml += '<div class="legend-title">Map Legend</div>';
legendHtml += '<div class="legend-item"><div class="legend-marker" style="background: #00C853;"></div><span>Start Point</span></div>';
legendHtml += '<div class="legend-item"><div class="legend-marker" style="background: #4285F4;"></div><span>Path Points</span></div>';
legendHtml += '<div class="legend-item"><div class="legend-marker" style="background: #FF1744;"></div><span>Violation Location</span></div>';
legendHtml += '<div class="legend-item"><div class="legend-arrow"></div><span>Vehicle Direction</span></div>';
legendHtml += '<div class="legend-item"><div class="legend-line" style="background: #9b59b6; height: 6px;"></div><span>Nearest Street Segment</span></div>';
legendHtml += '<div class="legend-item"><div class="legend-marker" style="background: #f39c12;"></div><span>Closest Point</span></div>';
legendHtml += '<div class="legend-item"><div class="legend-line" style="background: #3498db; border: 2px dashed #3498db; height: 2px;"></div><span>Distance Line</span></div>';
var legendControl = L.control({position: 'bottomright'});
legendControl.onAdd = function (map) {
var div = L.DomUtil.create('div', 'legend');
div.id = 'mapLegend';
div.innerHTML = legendHtml;
return div;
};
legendControl.addTo(map);
// Toggle legend function
function toggleLegend() {
var legend = document.getElementById('mapLegend');
legend.classList.toggle('collapsed');
}
// Add info control
var infoControl = L.control({position: 'topleft'});
infoControl.onAdd = function (map) {
var div = L.DomUtil.create('div', 'info-control');
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 = '<h4><i class="fas fa-car" style="margin-right: 8px; color: #3498db;"></i>Vehicle Path Analysis</h4>' +
'<div><strong>Vehicle:</strong> 6379 XBDMazda (FMC150)</div>' +
'<div><strong>Total Points:</strong> ' + latlngs.length + '</div>' +
'<div><strong>Violations:</strong> ' + violationCount + '</div>';
return div;
};
infoControl.addTo(map);
// Add zoom control to top right
L.control.zoom({position: 'topright'}).addTo(map);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment