Skip to content

Instantly share code, notes, and snippets.

@youssef22222

youssef22222/map.html

Created June 3, 2025 08:03
Show Gist options
  • Save youssef22222/7afabeb528d9716dca06484bce37bf96 to your computer and use it in GitHub Desktop.
Save youssef22222/7afabeb528d9716dca06484bce37bf96 to your computer and use it in GitHub Desktop.
Download ZIP
Speed Violation Map - 6379 XBDMazda (FMC150)
Raw
map.html
<!DOCTYPE html>
<html>
<head>
<title>Speed Violation Path</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"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""/>
<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: #D50000; }
.violation-icon {
background-color: #FF6F00;
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; }
.loading {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<div id="map">
<div class="loading">Loading map...</div>
</div>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
crossorigin=""></script>
<script>
// Wait for Leaflet to load
function initMap() {
if (typeof L === 'undefined') {
setTimeout(initMap, 100);
return;
}
try {
// Initialize the map
var map = L.map('map').setView([26.193817166666665, 50.187083], 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
var latlngs = [
[26.20884, 50.19727],
[26.194858, 50.191193],
[26.195905, 50.189257],
[26.18786, 50.181612],
[26.187798, 50.181583],
[26.187642, 50.181583]
];
// Speed data for each point
var speedData = [{"time": "06/03/25,10:54:21", "speed": 181, "speed_limit": 100, "street_name": "King Khaled Road", "street_name_ar": "\u0637\u0631\u064a\u0642 \u0627\u0644\u0645\u0644\u0643 \u062e\u0627\u0644\u062f"}, {"time": "06/03/25,10:55:33", "speed": 160, "speed_limit": 110, "street_name": "", "street_name_ar": ""}, {"time": "06/03/25,10:56:05", "speed": 127, "speed_limit": 40, "street_name": "", "street_name_ar": ""}, {"time": "06/03/25,10:58:19", "speed": 141, "speed_limit": 40, "street_name": "", "street_name_ar": ""}, {"time": "06/03/25,11:01:32", "speed": 121, "speed_limit": 40, "street_name": "", "street_name_ar": ""}, {"time": "06/03/25,11:01:34", "speed": 117, "speed_limit": 40, "street_name": "", "street_name_ar": ""}];
// Draw the polyline
var polyline = L.polyline(latlngs, {
color: 'blue',
weight: 4,
opacity: 0.6,
dashArray: '10, 5'
}).addTo(map);
// Function to create numbered div icons
function createNumberedIcon(number, extraClass) {
extraClass = extraClass || '';
return L.divIcon({
className: 'number-icon ' + extraClass,
html: number.toString(),
iconSize: [24, 24]
});
}
// Function to create popup content
function createPopupContent(pointNum, lat, lon, data) {
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.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.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 < latlngs.length; i++) {
var iconClass = '';
var icon;
var data = speedData[i] || {};
if (i === 0) {
iconClass = 'start-icon';
icon = createNumberedIcon('S', iconClass);
} else if (i === latlngs.length - 1) {
iconClass = 'end-icon';
icon = createNumberedIcon('E', iconClass);
} else {
icon = createNumberedIcon(i + 1);
}
var popupContent = createPopupContent(i + 1, latlngs[i][0], latlngs[i][1], data);
L.marker(latlngs[i], {icon: icon})
.addTo(map)
.bindPopup(popupContent);
}
// Fit the map to show all points
map.fitBounds(polyline.getBounds().pad(0.1));
// Add 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: #D50000; font-weight: bold;">E</span> End Point</p>' +
'<p style="margin: 2px 0;"><span style="color: blue;">- - →</span> Vehicle Path</p>';
return div;
};
legend.addTo(map);
} catch (e) {
console.error('Error initializing map:', e);
document.getElementById('map').innerHTML = '<div class="loading">Error loading map. Please try refreshing the page.</div>';
}
}
// Start initialization
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initMap);
} else {
initMap();
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment