Skip to content

Instantly share code, notes, and snippets.

@youssef22222

youssef22222/index.html

Created June 12, 2025 14:46
Show Gist options
  • Save youssef22222/5fddf7dde806b489b1187e3c4f4ab7c6 to your computer and use it in GitHub Desktop.
Save youssef22222/5fddf7dde806b489b1187e3c4f4ab7c6 to your computer and use it in GitHub Desktop.
Download ZIP
Speed Violation Map - 1692 EDD/New (Afzal) - 1749739586
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Speed Violation Path - 1692 EDD/New (Afzal)</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.32624888732394, 50.0495828309859], 14);
// Add OpenStreetMap tile layer
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '&copy; OpenStreetMap contributors'
}).addTo(map);
// Define the coordinates and the detailed path data
var latlngs = [
[26.864942, 49.770333],
[26.830917, 49.797538],
[26.748077, 49.86894],
[26.656478, 49.926685],
[26.651943, 49.92752],
[26.558905, 49.953805],
[26.55443, 49.955117],
[26.496778, 49.983363],
[26.479832, 49.989242],
[26.477022, 49.99075],
[26.466735, 50.003848],
[26.465568, 50.004652],
[26.461525, 50.007037],
[26.386658, 50.020822],
[26.382118, 50.022142],
[26.313648, 50.04107],
[26.310197, 50.042147],
[26.30083, 50.040895],
[26.238595, 49.993983],
[26.234002, 49.98989],
[26.234333, 49.98918],
[26.243205, 49.981925],
[26.242028, 49.982473],
[26.238635, 49.976663],
[26.242428, 49.973637],
[26.256782, 49.971423],
[26.24621, 49.979195],
[26.242638, 49.973562],
[26.242405, 49.973588],
[26.242528, 49.973532],
[26.241585, 49.974107],
[26.238523, 49.976742],
[26.238568, 49.977033],
[26.238515, 49.976885],
[26.240022, 49.97938],
[26.241903, 49.98299],
[26.242057, 49.982732],
[26.242033, 49.982875],
[26.233317, 49.99059],
[26.237367, 49.993767],
[26.241212, 49.996443],
[26.301993, 50.042672],
[26.29971, 50.04067],
[26.295493, 50.049487],
[26.301297, 50.04654],
[26.297187, 50.048703],
[26.302265, 50.044668],
[26.291312, 50.051605],
[26.281875, 50.062602],
[26.279565, 50.067407],
[26.214483, 50.177773],
[26.217622, 50.19825],
[26.22149, 50.196145],
[26.25051, 50.197032],
[26.254638, 50.194612],
[26.258445, 50.191842],
[26.266603, 50.188348],
[26.26712, 50.189373],
[26.268878, 50.188805],
[26.270443, 50.193582],
[26.271485, 50.1958],
[26.271357, 50.19582],
[26.275068, 50.194303],
[26.285802, 50.189892],
[26.285855, 50.19004],
[26.282937, 50.199882],
[26.281562, 50.204777],
[26.28035, 50.209725],
[26.27949, 50.214677],
[26.279145, 50.217615],
[26.284197, 50.219233]
];
var pathData = [{"latitude": 26.864942, "longitude": 49.770333, "time": "06/12/25,12:40:55", "speed": 206, "speed_limit": 120, "street_name": "Dhahran Jubail Expressway", "street_name_ar": "\u0637\u0631\u064a\u0642 \u0627\u0644\u0638\u0647\u0631\u0627\u0646 \u0627\u0644\u062c\u0628\u064a\u0644 \u0627\u0644\u0633\u0631\u064a\u0639", "distance_to_segment": 7.55, "vehicle_direction": 129, "segment_bearing": 132.4, "nearest_segment": [[26.8667993, 49.7679405], [26.863677, 49.7717739]], "closest_point": [26.864887059454407, 49.77028825098724], "angle_difference": 3.4}, {"latitude": 26.830917, "longitude": 49.797538, "time": "06/12/25,12:43:37", "speed": 201, "speed_limit": 120, "street_name": "Dhahran Jubail Expressway", "street_name_ar": "\u0637\u0631\u064a\u0642 \u0627\u0644\u0638\u0647\u0631\u0627\u0646 \u0627\u0644\u062c\u0628\u064a\u0644 \u0627\u0644\u0633\u0631\u064a\u0639", "distance_to_segment": 2.01, "vehicle_direction": 149, "segment_bearing": 149.5, "nearest_segment": [[26.8329402, 49.7961802], [26.8305947, 49.7977272]], "closest_point": [26.830906255762233, 49.797521710013136], "angle_difference": 0.5}, {"latitude": 26.748077, "longitude": 49.86894, "time": "06/12/25,12:50:19", "speed": 206, "speed_limit": 120, "street_name": "Dhahran Jubail Expressway", "street_name_ar": "\u0637\u0631\u064a\u0642 \u0627\u0644\u0638\u0647\u0631\u0627\u0646 \u0627\u0644\u062c\u0628\u064a\u0644 \u0627\u0644\u0633\u0631\u064a\u0639", "distance_to_segment": 0.39, "vehicle_direction": 156, "segment_bearing": 156.2, "nearest_segment": [[26.7502086, 49.8678813], [26.7471033, 49.8694173]], "closest_point": [26.748075279543855, 49.86893652178876], "angle_difference": 0.2}, {"latitude": 26.656478, "longitude": 49.926685, "time": "06/12/25,12:56:45", "speed": 213, "speed_limit": 120, "street_name": "Dhahran Jubail Expressway", "street_name_ar": "\u0637\u0631\u064a\u0642 \u0627\u0644\u0638\u0647\u0631\u0627\u0646 \u0627\u0644\u062c\u0628\u064a\u0644 \u0627\u0644\u0633\u0631\u064a\u0639", "distance_to_segment": 5.66, "vehicle_direction": 170, "segment_bearing": 170.6, "nearest_segment": [[26.6593496, 49.9260945], [26.6545753, 49.9269804]], "closest_point": [26.656467657429527, 49.92662926172908], "angle_difference": 0.6}, {"latitude": 26.651943, "longitude": 49.92752, "time": "06/12/25,12:57:02", "speed": 217, "speed_limit": 120, "street_name": "Dhahran Jubail Expressway", "street_name_ar": "\u0637\u0631\u064a\u0642 \u0627\u0644\u0638\u0647\u0631\u0627\u0646 \u0627\u0644\u062c\u0628\u064a\u0644 \u0627\u0644\u0633\u0631\u064a\u0639", "distance_to_segment": 7.74, "vehicle_direction": 171, "segment_bearing": 170.9, "nearest_segment": [[26.6542951, 49.9270189], [26.6486678, 49.9280291]], "closest_point": [26.651929285840918, 49.92744360553614], "angle_difference": 0.1}, {"latitude": 26.558905, "longitude": 49.953805, "time": "06/12/25,13:02:47", "speed": 211, "speed_limit": 120, "street_name": "Dhahran Jubail Expressway", "street_name_ar": "\u0637\u0631\u064a\u0642 \u0627\u0644\u0638\u0647\u0631\u0627\u0646 \u0627\u0644\u062c\u0628\u064a\u0644 \u0627\u0644\u0633\u0631\u064a\u0639", "distance_to_segment": 3.36, "vehicle_direction": 152, "segment_bearing": 160.9, "nearest_segment": [[26.559338, 49.9536017], [26.5588739, 49.9537814]], "closest_point": [26.55889299869117, 49.95377400496702], "angle_difference": 8.9}, {"latitude": 26.55443, "longitude": 49.955117, "time": "06/12/25,13:03:04", "speed": 208, "speed_limit": 120, "street_name": "Dhahran Jubail Expressway", "street_name_ar": "\u0637\u0631\u064a\u0642 \u0627\u0644\u0638\u0647\u0631\u0627\u0646 \u0627\u0644\u062c\u0628\u064a\u0644 \u0627\u0644\u0633\u0631\u064a\u0639", "distance_to_segment": 2.32, "vehicle_direction": 160, "segment_bearing": 168.5, "nearest_segment": [[26.5552019, 49.9549171], [26.553759, 49.9552464]], "closest_point": [26.55442485107079, 49.955094438840106], "angle_difference": 8.5}, {"latitude": 26.496778, "longitude": 49.983363, "time": "06/12/25,13:07:10", "speed": 198, "speed_limit": 120, "street_name": "", "street_name_ar": "To Road 95", "distance_to_segment": 0.95, "vehicle_direction": 147, "segment_bearing": 147.8, "nearest_segment": [[26.4978788, 49.9825766], [26.496404, 49.9836152]], "closest_point": [26.49677273574902, 49.98335552482443], "angle_difference": 0.8}, {"latitude": 26.479832, "longitude": 49.989242, "time": "06/12/25,13:08:24", "speed": 204, "speed_limit": 120, "street_name": "", "street_name_ar": "To Road 95", "distance_to_segment": 1.58, "vehicle_direction": 177, "segment_bearing": 159.7, "nearest_segment": [[26.4798324, 49.989225], [26.4790277, 49.9895575]], "closest_point": [26.479826058364182, 49.98922762034784], "angle_difference": 17.3}, {"latitude": 26.477022, "longitude": 49.99075, "time": "06/12/25,13:08:43", "speed": 211, "speed_limit": 120, "street_name": "", "street_name_ar": "Entry onto Hwy 95", "distance_to_segment": 1.08, "vehicle_direction": 164, "segment_bearing": 144.5, "nearest_segment": [[26.4770951, 49.9907049], [26.4768765, 49.9908793]], "closest_point": [26.477028444617968, 49.99075807794431], "angle_difference": 19.5}, {"latitude": 26.466735, "longitude": 50.003848, "time": "06/12/25,13:09:38", "speed": 187, "speed_limit": 120, "street_name": "Abu Hadriah Rd", "street_name_ar": "\u0637\u0631\u064a\u0642 \u0623\u0628\u0648\u062d\u062f\u0631\u064a\u0629", "distance_to_segment": 3.58, "vehicle_direction": 135, "segment_bearing": 143.5, "nearest_segment": [[26.4676362, 50.0031486], [26.4663554, 50.0042057]], "closest_point": [26.466756796986274, 50.0038744095923], "angle_difference": 8.5}, {"latitude": 26.465568, "longitude": 50.004652, "time": "06/12/25,13:09:44", "speed": 190, "speed_limit": 120, "street_name": "", "street_name_ar": "", "distance_to_segment": 3.29, "vehicle_direction": 147, "segment_bearing": 155.0, "nearest_segment": [[26.4663554, 50.0042057], [26.4646757, 50.0050804]], "closest_point": [26.46555314449839, 50.00462347274945], "angle_difference": 8.0}, {"latitude": 26.461525, "longitude": 50.007037, "time": "06/12/25,13:10:05", "speed": 195, "speed_limit": 120, "street_name": "Abu Hadriah Rd", "street_name_ar": "\u0637\u0631\u064a\u0642 \u0623\u0628\u0648\u062d\u062f\u0631\u064a\u0629", "distance_to_segment": 2.44, "vehicle_direction": 149, "segment_bearing": 156.1, "nearest_segment": [[26.4615957, 50.0069752], [26.4604457, 50.0075452]], "closest_point": [26.461514353241473, 50.0070155196977], "angle_difference": 7.1}, {"latitude": 26.386658, "longitude": 50.020822, "time": "06/12/25,13:15:10", "speed": 192, "speed_limit": 120, "street_name": "Abu Hadriah Rd", "street_name_ar": "\u0637\u0631\u064a\u0642 \u0623\u0628\u0648\u062d\u062f\u0631\u064a\u0629", "distance_to_segment": 0.4, "vehicle_direction": 165, "segment_bearing": 164.8, "nearest_segment": [[26.3869449, 50.0207391], [26.3866396, 50.0208317]], "closest_point": [26.38665914411202, 50.02082577211014], "angle_difference": 0.2}, {"latitude": 26.382118, "longitude": 50.022142, "time": "06/12/25,13:15:30", "speed": 200, "speed_limit": 120, "street_name": "Abu Hadriah Rd", "street_name_ar": "\u0637\u0631\u064a\u0642 \u0623\u0628\u0648\u062d\u062f\u0631\u064a\u0629", "distance_to_segment": 4.41, "vehicle_direction": 164, "segment_bearing": 164.6, "nearest_segment": [[26.3836845, 50.0217064], [26.3819761, 50.0222314]], "closest_point": [26.382130858259373, 50.0221838420006], "angle_difference": 0.6}, {"latitude": 26.313648, "longitude": 50.04107, "time": "06/12/25,13:20:29", "speed": 186, "speed_limit": 120, "street_name": "", "street_name_ar": "", "distance_to_segment": 5.87, "vehicle_direction": 159, "segment_bearing": 158.3, "nearest_segment": [[26.3169083, 50.0395578], [26.3114624, 50.0419781]], "closest_point": [26.313624531008408, 50.04101719258715], "angle_difference": 0.7}, {"latitude": 26.310197, "longitude": 50.042147, "time": "06/12/25,13:20:43", "speed": 185, "speed_limit": 60, "street_name": "", "street_name_ar": "", "distance_to_segment": 11.86, "vehicle_direction": 158, "segment_bearing": 182.6, "nearest_segment": [[26.3103844, 50.0420373], [26.3093676, 50.0419863]], "closest_point": [26.310202958724773, 50.042028199385285], "angle_difference": 24.6}, {"latitude": 26.30083, "longitude": 50.040895, "time": "06/12/25,13:21:25", "speed": 191, "speed_limit": 120, "street_name": "", "street_name_ar": "", "distance_to_segment": 11.62, "vehicle_direction": 178, "segment_bearing": 211.7, "nearest_segment": [[26.3013544, 50.041392], [26.3003995, 50.040735]], "closest_point": [26.30076639978633, 50.040987438118776], "angle_difference": null}, {"latitude": 26.238595, "longitude": 49.993983, "time": "06/12/25,13:26:38", "speed": 180, "speed_limit": 120, "street_name": "", "street_name_ar": "", "distance_to_segment": 3.1, "vehicle_direction": 214, "segment_bearing": 217.0, "nearest_segment": [[26.2406077, 49.9957155], [26.2356212, 49.9915191]], "closest_point": [26.238575930494008, 49.994005659920795], "angle_difference": 3.0}, {"latitude": 26.234002, "longitude": 49.98989, "time": "06/12/25,13:27:52", "speed": 128, "speed_limit": 40, "street_name": "", "street_name_ar": "", "distance_to_segment": 2.73, "vehicle_direction": 241, "segment_bearing": 278.9, "nearest_segment": [[26.2339676, 49.9899587], [26.23401, 49.9896555]], "closest_point": [26.23397768266644, 49.989886599423016], "angle_difference": null}, {"latitude": 26.234333, "longitude": 49.98918, "time": "06/12/25,13:27:58", "speed": 134, "speed_limit": 40, "street_name": "", "street_name_ar": "Makkah Road", "distance_to_segment": 0.06, "vehicle_direction": 290, "segment_bearing": 307.2, "nearest_segment": [[26.23401, 49.9896555], [26.2343928, 49.9890932]], "closest_point": [26.23433348426249, 49.989180329673985], "angle_difference": 17.2}, {"latitude": 26.243205, "longitude": 49.981925, "time": "06/12/25,13:29:32", "speed": 109, "speed_limit": 40, "street_name": "", "street_name_ar": "Makkah Road", "distance_to_segment": 1.53, "vehicle_direction": 205, "segment_bearing": 144.7, "nearest_segment": [[26.2433696, 49.9817765], [26.2422129, 49.9826886]], "closest_point": [26.24319590444058, 49.981913465263034], "angle_difference": null}, {"latitude": 26.242028, "longitude": 49.982473, "time": "06/12/25,13:29:47", "speed": 129, "speed_limit": 40, "street_name": "", "street_name_ar": "", "distance_to_segment": 4.71, "vehicle_direction": 177, "segment_bearing": 55.4, "nearest_segment": [[26.241533, 49.9815916], [26.2422129, 49.9826886]], "closest_point": [26.242065045085706, 49.98245004015153], "angle_difference": null}, {"latitude": 26.238635, "longitude": 49.976663, "time": "06/12/25,13:30:52", "speed": 122, "speed_limit": 40, "street_name": "", "street_name_ar": "", "distance_to_segment": 7.1, "vehicle_direction": 269, "segment_bearing": 325.1, "nearest_segment": [[26.2385397, 49.9768235], [26.2415708, 49.9744657]], "closest_point": [26.238676856981225, 49.97671680977852], "angle_difference": null}, {"latitude": 26.242428, "longitude": 49.973637, "time": "06/12/25,13:31:44", "speed": 109, "speed_limit": 40, "street_name": "", "street_name_ar": "", "distance_to_segment": 5.65, "vehicle_direction": 182, "segment_bearing": 145.2, "nearest_segment": [[26.2446578, 49.9718382], [26.2407507, 49.9748698]], "closest_point": [26.24239474989784, 49.97359414755437], "angle_difference": null}, {"latitude": 26.256782, "longitude": 49.971423, "time": "06/12/25,16:46:16", "speed": 145, "speed_limit": 40, "street_name": "", "street_name_ar": "Makkah Road", "distance_to_segment": 5.6, "vehicle_direction": 144, "segment_bearing": 145.2, "nearest_segment": [[26.2570816, 49.9711229], [26.255706, 49.9721884]], "closest_point": [26.25674906127492, 49.971380474884825], "angle_difference": 1.2}, {"latitude": 26.24621, "longitude": 49.979195, "time": "06/12/25,16:47:34", "speed": 127, "speed_limit": 40, "street_name": "", "street_name_ar": "", "distance_to_segment": 8.36, "vehicle_direction": 198, "segment_bearing": 235.0, "nearest_segment": [[26.2464266, 49.9793948], [26.2444833, 49.9762963]], "closest_point": [26.24627551885217, 49.97915390825063], "angle_difference": null}, {"latitude": 26.242638, "longitude": 49.973562, "time": "06/12/25,16:48:22", "speed": 162, "speed_limit": 40, "street_name": "", "street_name_ar": "", "distance_to_segment": 11.26, "vehicle_direction": 234, "segment_bearing": 54.8, "nearest_segment": [[26.2425987, 49.9736661], [26.2443351, 49.9764113]], "closest_point": [26.2425987, 49.9736661], "angle_difference": 0.8}, {"latitude": 26.242405, "longitude": 49.973588, "time": "06/12/25,16:48:26", "speed": 124, "speed_limit": 40, "street_name": "", "street_name_ar": "", "distance_to_segment": 0.15, "vehicle_direction": 180, "segment_bearing": 145.2, "nearest_segment": [[26.2446578, 49.9718382], [26.2407507, 49.9748698]], "closest_point": [26.242404125440963, 49.973586872875835], "angle_difference": null}, {"latitude": 26.242528, "longitude": 49.973532, "time": "06/12/25,16:48:25", "speed": 121, "speed_limit": 40, "street_name": "", "street_name_ar": "", "distance_to_segment": 15.51, "vehicle_direction": 214, "segment_bearing": 54.8, "nearest_segment": [[26.2425987, 49.9736661], [26.2443351, 49.9764113]], "closest_point": [26.2425987, 49.9736661], "angle_difference": 20.8}, {"latitude": 26.241585, "longitude": 49.974107, "time": "06/12/25,16:48:39", "speed": 130, "speed_limit": 40, "street_name": "", "street_name_ar": "", "distance_to_segment": 9.5, "vehicle_direction": 153, "segment_bearing": 145.2, "nearest_segment": [[26.2446578, 49.9718382], [26.2407507, 49.9748698]], "closest_point": [26.241640915450418, 49.974179063351464], "angle_difference": 7.8}, {"latitude": 26.238523, "longitude": 49.976742, "time": "06/12/25,16:59:46", "speed": 149, "speed_limit": 40, "street_name": "", "street_name_ar": "", "distance_to_segment": 7.77, "vehicle_direction": 145, "segment_bearing": 325.1, "nearest_segment": [[26.2385397, 49.9768235], [26.2415708, 49.9744657]], "closest_point": [26.238568792838652, 49.97680086957046], "angle_difference": 0.1}, {"latitude": 26.238568, "longitude": 49.977033, "time": "06/12/25,16:59:50", "speed": 125, "speed_limit": 40, "street_name": "", "street_name_ar": "", "distance_to_segment": 9.45, "vehicle_direction": 92, "segment_bearing": 55.0, "nearest_segment": [[26.2385397, 49.9768235], [26.2390935, 49.9777054]], "closest_point": [26.23864205536398, 49.97698649601931], "angle_difference": null}, {"latitude": 26.238515, "longitude": 49.976885, "time": "06/12/25,16:59:49", "speed": 123, "speed_limit": 40, "street_name": "", "street_name_ar": "", "distance_to_segment": 3.48, "vehicle_direction": 117, "segment_bearing": 325.1, "nearest_segment": [[26.2356924, 49.9790383], [26.2385397, 49.9768235]], "closest_point": [26.23849450660341, 49.97685865412313], "angle_difference": 28.1}, {"latitude": 26.240022, "longitude": 49.97938, "time": "06/12/25,17:00:14", "speed": 125, "speed_limit": 40, "street_name": "", "street_name_ar": "", "distance_to_segment": 11.23, "vehicle_direction": 68, "segment_bearing": 55.0, "nearest_segment": [[26.2390935, 49.9777054], [26.2402632, 49.9795689]], "closest_point": [26.24010996977953, 49.97932478226396], "angle_difference": 13.0}, {"latitude": 26.241903, "longitude": 49.98299, "time": "06/12/25,17:00:58", "speed": 127, "speed_limit": 40, "street_name": "", "street_name_ar": "Makkah Road", "distance_to_segment": 5.18, "vehicle_direction": 106, "segment_bearing": 145.4, "nearest_segment": [[26.2422129, 49.9826886], [26.2401534, 49.9842745]], "closest_point": [26.24187265967514, 49.9829505990926], "angle_difference": null}, {"latitude": 26.242057, "longitude": 49.982732, "time": "06/12/25,17:00:55", "speed": 128, "speed_limit": 40, "street_name": "", "street_name_ar": "", "distance_to_segment": 16.8, "vehicle_direction": 55, "segment_bearing": 55.4, "nearest_segment": [[26.241533, 49.9815916], [26.2422129, 49.9826886]], "closest_point": [26.242189067557554, 49.98265014700785], "angle_difference": 0.4}, {"latitude": 26.242033, "longitude": 49.982875, "time": "06/12/25,17:00:56", "speed": 127, "speed_limit": 40, "street_name": "", "street_name_ar": "Makkah Road", "distance_to_segment": 3.95, "vehicle_direction": 80, "segment_bearing": 145.4, "nearest_segment": [[26.2422129, 49.9826886], [26.2401534, 49.9842745]], "closest_point": [26.242009859766636, 49.9828449493596], "angle_difference": null}, {"latitude": 26.233317, "longitude": 49.99059, "time": "06/12/25,17:02:37", "speed": 116, "speed_limit": 90, "street_name": "", "street_name_ar": "", "distance_to_segment": 6.15, "vehicle_direction": 113, "segment_bearing": 305.9, "nearest_segment": [[26.2333468, 49.9906487], [26.2337811, 49.9899806]], "closest_point": [26.23336477140359, 49.99062105391495], "angle_difference": 12.9}, {"latitude": 26.237367, "longitude": 49.993767, "time": "06/12/25,17:03:17", "speed": 129, "speed_limit": 120, "street_name": "", "street_name_ar": "", "distance_to_segment": 3.58, "vehicle_direction": 33, "segment_bearing": 32.0, "nearest_segment": [[26.2360519, 49.992807], [26.2389683, 49.9948426]], "closest_point": [26.237386750243413, 49.993738703866235], "angle_difference": 1.0}, {"latitude": 26.241212, "longitude": 49.996443, "time": "06/12/25,17:03:41", "speed": 173, "speed_limit": 120, "street_name": "", "street_name_ar": "", "distance_to_segment": 11.6, "vehicle_direction": 31, "segment_bearing": 34.0, "nearest_segment": [[26.2407173, 49.9962104], [26.2422582, 49.9973697]], "closest_point": [26.241144938902607, 49.996532135206564], "angle_difference": 3.0}, {"latitude": 26.301993, "longitude": 50.042672, "time": "06/12/25,17:10:15", "speed": 188, "speed_limit": 120, "street_name": "", "street_name_ar": "", "distance_to_segment": 29.9, "vehicle_direction": 32, "segment_bearing": 39.2, "nearest_segment": [[26.3020077, 50.0423004], [26.3022772, 50.042546]], "closest_point": [26.302184671124962, 50.04246167683967], "angle_difference": null}, {"latitude": 26.29971, "longitude": 50.04067, "time": "06/12/25,17:10:13", "speed": 178, "speed_limit": 120, "street_name": "", "street_name_ar": "", "distance_to_segment": 13.13, "vehicle_direction": 33, "segment_bearing": 35.0, "nearest_segment": [[26.2994531, 50.0403091], [26.3001994, 50.0408927]], "closest_point": [26.299787643721054, 50.040570710231286], "angle_difference": 2.0}, {"latitude": 26.295493, "longitude": 50.049487, "time": "06/12/25,17:10:16", "speed": 183, "speed_limit": 120, "street_name": "Abu Hadriah Rd", "street_name_ar": "\u0637\u0631\u064a\u0642 \u0623\u0628\u0648\u062d\u062f\u0631\u064a\u0629", "distance_to_segment": 3.18, "vehicle_direction": 157, "segment_bearing": 157.6, "nearest_segment": [[26.2958124, 50.0493055], [26.2936501, 50.0503012]], "closest_point": [26.29547992229694, 50.04945859996251], "angle_difference": 0.6}, {"latitude": 26.301297, "longitude": 50.04654, "time": "06/12/25,17:10:16", "speed": 157, "speed_limit": 120, "street_name": "", "street_name_ar": "", "distance_to_segment": 23.68, "vehicle_direction": 119, "segment_bearing": 155.8, "nearest_segment": [[26.3015229, 50.0466863], [26.300998, 50.0469489]], "closest_point": [26.301400761377067, 50.04674740421486], "angle_difference": null}, {"latitude": 26.297187, "longitude": 50.048703, "time": "06/12/25,17:10:16", "speed": 170, "speed_limit": 120, "street_name": "Abu Hadriah Rd", "street_name_ar": "\u0637\u0631\u064a\u0642 \u0623\u0628\u0648\u062d\u062f\u0631\u064a\u0629", "distance_to_segment": 1.21, "vehicle_direction": 140, "segment_bearing": 158.1, "nearest_segment": [[26.2978823, 50.0483786], [26.2958124, 50.0493055]], "closest_point": [26.29718213414721, 50.0486921338562], "angle_difference": 18.1}, {"latitude": 26.302265, "longitude": 50.044668, "time": "06/12/25,17:10:16", "speed": 165, "speed_limit": 60, "street_name": "", "street_name_ar": "", "distance_to_segment": 23.56, "vehicle_direction": 78, "segment_bearing": 99.6, "nearest_segment": [[26.302561, 50.0441323], [26.3024603, 50.0447965]], "closest_point": [26.302474955984657, 50.04469983162851], "angle_difference": null}, {"latitude": 26.291312, "longitude": 50.051605, "time": "06/12/25,17:10:31", "speed": 195, "speed_limit": 120, "street_name": "Abu Hadriah Rd", "street_name_ar": "\u0637\u0631\u064a\u0642 \u0623\u0628\u0648\u062d\u062f\u0631\u064a\u0629", "distance_to_segment": 4.36, "vehicle_direction": 157, "segment_bearing": 152.1, "nearest_segment": [[26.2913724, 50.05152], [26.2909265, 50.0517837]], "closest_point": [26.291290407915078, 50.05156848915181], "angle_difference": 4.9}, {"latitude": 26.281875, "longitude": 50.062602, "time": "06/12/25,17:11:16", "speed": 214, "speed_limit": 120, "street_name": "Abu Hadriah Rd", "street_name_ar": "\u0637\u0631\u064a\u0642 \u0623\u0628\u0648\u062d\u062f\u0631\u064a\u0629", "distance_to_segment": 2.07, "vehicle_direction": 128, "segment_bearing": 117.0, "nearest_segment": [[26.2819273, 50.0624421], [26.2813232, 50.0637621]], "closest_point": [26.281857737140722, 50.062594099626295], "angle_difference": 11.0}, {"latitude": 26.279565, "longitude": 50.067407, "time": "06/12/25,17:11:32", "speed": 212, "speed_limit": 120, "street_name": "Abu Hadriah Rd", "street_name_ar": "\u0637\u0631\u064a\u0642 \u0623\u0628\u0648\u062d\u062f\u0631\u064a\u0629", "distance_to_segment": 3.38, "vehicle_direction": 117, "segment_bearing": 123.1, "nearest_segment": [[26.2796443, 50.0672098], [26.2789209, 50.0684458]], "closest_point": [26.279538098708574, 50.06739125534449], "angle_difference": 6.1}, {"latitude": 26.214483, "longitude": 50.177773, "time": "06/12/25,17:20:07", "speed": 200, "speed_limit": 120, "street_name": "Cooperative Council Road", "street_name_ar": "\u0637\u0631\u064a\u0642 \u0645\u062c\u0644\u0633 \u0627\u0644\u062a\u0639\u0627\u0648\u0646", "distance_to_segment": 0.76, "vehicle_direction": 87, "segment_bearing": 78.9, "nearest_segment": [[26.2142572, 50.176529], [26.2145879, 50.1784091]], "closest_point": [26.214476222930475, 50.17777419205196], "angle_difference": 8.1}, {"latitude": 26.217622, "longitude": 50.19825, "time": "06/12/25,17:21:53", "speed": 158, "speed_limit": 80, "street_name": "", "street_name_ar": "", "distance_to_segment": 11.1, "vehicle_direction": 107, "segment_bearing": 132.8, "nearest_segment": [[26.2176466, 50.1980577], [26.2175245, 50.1982045]], "closest_point": [26.217541999694447, 50.19818346023633], "angle_difference": 25.8}, {"latitude": 26.22149, "longitude": 50.196145, "time": "06/12/25,17:22:39", "speed": 153, "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.87, "vehicle_direction": 335, "segment_bearing": 354.3, "nearest_segment": [[26.221408, 50.1961629], [26.2244909, 50.1958212]], "closest_point": [26.22149096477319, 50.19615370441694], "angle_difference": 19.3}, {"latitude": 26.25051, "longitude": 50.197032, "time": "06/12/25,17:24:49", "speed": 191, "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.53, "vehicle_direction": 2, "segment_bearing": 344.6, "nearest_segment": [[26.249619, 50.1973004], [26.25072, 50.1969619]], "closest_point": [26.25050844496729, 50.19702694212404], "angle_difference": 17.4}, {"latitude": 26.254638, "longitude": 50.194612, "time": "06/12/25,17:25:13", "speed": 181, "speed_limit": 110, "street_name": "", "street_name_ar": "", "distance_to_segment": 0.07, "vehicle_direction": 342, "segment_bearing": 320.0, "nearest_segment": [[26.2543783, 50.1948539], [26.2554333, 50.1938674]], "closest_point": [26.25463753207378, 50.194611499582194], "angle_difference": 22.0}, {"latitude": 26.258445, "longitude": 50.191842, "time": "06/12/25,17:25:37", "speed": 182, "speed_limit": 60, "street_name": "", "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.58, "vehicle_direction": 324, "segment_bearing": 324.4, "nearest_segment": [[26.2578041, 50.1923615], [26.2584696, 50.1918295]], "closest_point": [26.25844849464885, 50.19184637159551], "angle_difference": 0.4}, {"latitude": 26.266603, "longitude": 50.188348, "time": "06/12/25,17:26:33", "speed": 115, "speed_limit": 60, "street_name": "", "street_name_ar": "22th Street", "distance_to_segment": 10.33, "vehicle_direction": 31, "segment_bearing": 71.3, "nearest_segment": [[26.266438, 50.1881275], [26.2666435, 50.188803]], "closest_point": [26.26651337503498, 50.18837526562592], "angle_difference": null}, {"latitude": 26.26712, "longitude": 50.189373, "time": "06/12/25,17:26:51", "speed": 116, "speed_limit": 60, "street_name": "", "street_name_ar": "", "distance_to_segment": 4.59, "vehicle_direction": 8, "segment_bearing": 339.2, "nearest_segment": [[26.2668537, 50.1894369], [26.2678388, 50.1890188]], "closest_point": [26.267102333015682, 50.18933137420175], "angle_difference": 28.8}, {"latitude": 26.268878, "longitude": 50.188805, "time": "06/12/25,17:27:20", "speed": 116, "speed_limit": 60, "street_name": "", "street_name_ar": "20th Street", "distance_to_segment": 3.77, "vehicle_direction": 30, "segment_bearing": 251.3, "nearest_segment": [[26.2690166, 50.1891431], [26.2688446, 50.1885779]], "closest_point": [26.26891068361109, 50.188795053819696], "angle_difference": null}, {"latitude": 26.270443, "longitude": 50.193582, "time": "06/12/25,17:28:00", "speed": 125, "speed_limit": 40, "street_name": "", "street_name_ar": "20th Street", "distance_to_segment": 1.5, "vehicle_direction": 61, "segment_bearing": 68.8, "nearest_segment": [[26.2703692, 50.1934117], [26.2705721, 50.1939938]], "closest_point": [26.27043012499744, 50.1935864877822], "angle_difference": 7.8}, {"latitude": 26.271485, "longitude": 50.1958, "time": "06/12/25,17:29:36", "speed": 121, "speed_limit": 40, "street_name": "Makkah Al Mukarramah Street", "street_name_ar": "\u0634\u0627\u0631\u0639 \u0645\u0643\u0629 \u0627\u0644\u0645\u0643\u0631\u0645\u0629", "distance_to_segment": 2.36, "vehicle_direction": 13, "segment_bearing": 338.8, "nearest_segment": [[26.2713598, 50.1958288], [26.2723631, 50.1953949]], "closest_point": [26.271475765812205, 50.195778647935896], "angle_difference": null}, {"latitude": 26.271357, "longitude": 50.19582, "time": "06/12/25,17:29:35", "speed": 123, "speed_limit": 60, "street_name": "", "street_name_ar": "20th Street", "distance_to_segment": 0.02, "vehicle_direction": 44, "segment_bearing": 249.3, "nearest_segment": [[26.2713598, 50.1958288], [26.2713238, 50.1957226]], "closest_point": [26.27135683581551, 50.19582005565576], "angle_difference": 25.3}, {"latitude": 26.275068, "longitude": 50.194303, "time": "06/12/25,17:30:20", "speed": 126, "speed_limit": 40, "street_name": "Makkah Al Mukarramah Street", "street_name_ar": "\u0634\u0627\u0631\u0639 \u0645\u0643\u0629 \u0627\u0644\u0645\u0643\u0631\u0645\u0629", "distance_to_segment": 5.84, "vehicle_direction": 349, "segment_bearing": 339.1, "nearest_segment": [[26.2742422, 50.1945929], [26.2752143, 50.194178]], "closest_point": [26.27504541410887, 50.194250081839556], "angle_difference": 9.9}, {"latitude": 26.285802, "longitude": 50.189892, "time": "06/12/25,17:42:57", "speed": 126, "speed_limit": 60, "street_name": "", "street_name_ar": "", "distance_to_segment": 1.14, "vehicle_direction": 8, "segment_bearing": 66.2, "nearest_segment": [[26.2857824, 50.1898708], [26.285803, 50.1899228]], "closest_point": [26.28579231794295, 50.18989583558414], "angle_difference": null}, {"latitude": 26.285855, "longitude": 50.19004, "time": "06/12/25,17:42:59", "speed": 125, "speed_limit": 60, "street_name": "", "street_name_ar": "", "distance_to_segment": 4.45, "vehicle_direction": 33, "segment_bearing": 107.9, "nearest_segment": [[26.2859481, 50.1895739], [26.285802, 50.1900779]], "closest_point": [26.28581624325485, 50.190028765157805], "angle_difference": null}, {"latitude": 26.282937, "longitude": 50.199882, "time": "06/12/25,17:44:02", "speed": 162, "speed_limit": 40, "street_name": "", "street_name_ar": "", "distance_to_segment": 3.0, "vehicle_direction": 109, "segment_bearing": 105.8, "nearest_segment": [[26.2829269, 50.1998118], [26.2820237, 50.2033607]], "closest_point": [26.28291073519849, 50.19987531557138], "angle_difference": 3.2}, {"latitude": 26.281562, "longitude": 50.204777, "time": "06/12/25,17:44:28", "speed": 162, "speed_limit": 80, "street_name": "Custodian of the Two Holy Mosques Road", "street_name_ar": "\u0637\u0631\u0642 \u062e\u0627\u062f\u0645 \u0627\u0644\u062d\u0631\u0645\u064a\u0646 \u0627\u0644\u0634\u0631\u064a\u0641\u064a\u0646", "distance_to_segment": 4.37, "vehicle_direction": 107, "segment_bearing": 108.3, "nearest_segment": [[26.2820237, 50.2033607], [26.2808813, 50.2072098]], "closest_point": [26.28159999958242, 50.204788278148904], "angle_difference": 1.3}, {"latitude": 26.28035, "longitude": 50.209725, "time": "06/12/25,17:44:53", "speed": 172, "speed_limit": 80, "street_name": "Custodian of the Two Holly Mosques Road", "street_name_ar": "\u0637\u0631\u0642 \u062e\u0627\u062f\u0645 \u0627\u0644\u062d\u0631\u0645\u064a\u0646 \u0627\u0644\u0634\u0631\u064a\u0641\u064a\u0646", "distance_to_segment": 3.85, "vehicle_direction": 109, "segment_bearing": 100.1, "nearest_segment": [[26.2805038, 50.2089851], [26.2801219, 50.2113675]], "closest_point": [26.280384311943767, 50.20973050022302], "angle_difference": 8.9}, {"latitude": 26.27949, "longitude": 50.214677, "time": "06/12/25,17:45:18", "speed": 175, "speed_limit": 80, "street_name": "Custodian of the Two Holly Mosques Road", "street_name_ar": "\u0637\u0631\u0642 \u062e\u0627\u062f\u0645 \u0627\u0644\u062d\u0631\u0645\u064a\u0646 \u0627\u0644\u0634\u0631\u064a\u0641\u064a\u0646", "distance_to_segment": 3.33, "vehicle_direction": 101, "segment_bearing": 101.5, "nearest_segment": [[26.2795227, 50.2146653], [26.2794919, 50.2148343]], "closest_point": [26.27951958503933, 50.214682391829655], "angle_difference": 0.5}, {"latitude": 26.279145, "longitude": 50.217615, "time": "06/12/25,17:45:33", "speed": 171, "speed_limit": 60, "street_name": "", "street_name_ar": "", "distance_to_segment": 8.18, "vehicle_direction": 101, "segment_bearing": 62.5, "nearest_segment": [[26.2792037, 50.2175638], [26.2792419, 50.2176456]], "closest_point": [26.27921281974804, 50.217583328675126], "angle_difference": null}, {"latitude": 26.284197, "longitude": 50.219233, "time": "06/12/25,17:46:16", "speed": 154, "speed_limit": 40, "street_name": "", "street_name_ar": "", "distance_to_segment": 2.59, "vehicle_direction": 21, "segment_bearing": 15.8, "nearest_segment": [[26.2834646, 50.2190291], [26.2842779, 50.2192854]], "closest_point": [26.28418928708375, 50.219257474891876], "angle_difference": 5.2}];
// 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 = "1692 EDD/New (Afzal)"; // 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> 1692 EDD/New (Afzal)<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