youssef22222/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
    <title>Vehicle Path & Speed Violations - 2756 KJR</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: #FF1744;
            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);
        }

        .violation-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;
        }

        .path-start-icon {
            background-color: #4CAF50;
            border: 2px solid white;
        }

        .path-end-icon {
            background-color: #2196F3;
            border: 2px solid white;
        }

        /* Pulsing animation for last 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: 300px;
            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-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: 220px;
        }

        .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.152238, 49.90692], 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.152238, 49.90692]
        ];
        var completePathData = [];
        var violationData = [{"latitude": 26.152238, "longitude": 49.90692, "time": "06/21/25,11:25:42", "speed": 194, "speed_limit": 120, "street_name": null, "street_name_ar": null, "distance_to_segment": 10.37, "vehicle_direction": 226, "segment_bearing": 226.2, "nearest_segment": [[26.1530742, 49.9080398], [26.1507366, 49.9053273]], "closest_point": [26.152176403636673, 49.90699799402245]}];

        // Add device name to each point's data
        completePathData.forEach(function(data) {
            data.device_name = "2756 KJR";
        });
        violationData.forEach(function(data) {
            data.device_name = "2756 KJR";
        });

        // Function to create numbered div icons
        function createNumberedIcon(number, isLast = false, isStart = false, isEnd = false) {
            var className = 'number-icon';
            var content = number.toString();

            if (isLast) {
                className += ' violation-icon';
                content = 'V<div class="pulse-ring"></div>';
            } else if (isStart) {
                className += ' path-start-icon';
                content = 'S';
            } else if (isEnd) {
                className += ' path-end-icon';
                content = 'E';
            }

            return L.divIcon({
                className: className,
                html: content,
                iconSize: (isLast || isStart || isEnd) ? [32, 32] : [24, 24]
            });
        }

        // Function to create popup content for violation points
        function createViolationPopupContent(pointNum, data, isLast) {
            var lat = data.latitude;
            var lon = data.longitude;
            var speedClass = 'speed-violation';

            var html = '<div class="popup-content">';
            html += '<div class="popup-title">Violation Point ' + pointNum + (isLast ? ' (Latest)' : '') + '</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 (data.speed && data.speed_limit) {
                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 popup content for path points
        function createPathPopupContent(data, isStart, isEnd) {
            var lat = data.latitude;
            var lon = data.longitude;

            var html = '<div class="popup-content">';
            var title = 'Path Point';
            if (isStart) title = 'Journey Start';
            if (isEnd) title = 'Journey End';

            html += '<div class="popup-title">' + title + '</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.speed !== undefined) {
                html += '<tr><td>Speed:</td><td>' + data.speed + ' km/h</td></tr>';
            }
            if (data.vehicle_direction !== undefined) {
                html += '<tr><td>Direction:</td><td>' + data.vehicle_direction.toFixed(1) + '°</td></tr>';
            }
            html += '</table>';
            html += '</div>';
            return html;
        }

        var allBounds = [];

        // Draw the complete vehicle path with arrows
        if (completePathData.length > 1) {
            var pathCoordinates = completePathData.map(function(point) {
                return [point.latitude, point.longitude];
            });

            // Add path coordinates to bounds
            pathCoordinates.forEach(function(coord) {
                allBounds.push(coord);
            });

            // Create the main path line
            var vehiclePath = L.polyline(pathCoordinates, {
                color: '#2196F3',
                weight: 4,
                opacity: 0.8,
                smoothFactor: 1
            }).addTo(map).bindPopup('Complete Vehicle Path (' + completePathData.length + ' points)');

            // Add directional arrows along the path
            var arrowDecorator = L.polylineDecorator(vehiclePath, {
                patterns: [{
                    offset: 25,
                    repeat: 100,
                    symbol: L.Symbol.arrowHead({
                        pixelSize: 15,
                        polygon: false,
                        pathOptions: {
                            stroke: true,
                            color: '#1976D2',
                            weight: 2,
                            opacity: 0.9
                        }
                    })
                }]
            }).addTo(map);

            // Add start and end markers for the complete path
            if (completePathData.length > 0) {
                var startPoint = completePathData[0];
                var endPoint = completePathData[completePathData.length - 1];

                // Start marker
                var startIcon = createNumberedIcon(1, false, true, false);
                var startPopup = createPathPopupContent(startPoint, true, false);
                L.marker([startPoint.latitude, startPoint.longitude], {icon: startIcon})
                    .addTo(map)
                    .bindPopup(startPopup);

                // End marker (only if different from start)
                if (completePathData.length > 1) {
                    var endIcon = createNumberedIcon(1, false, false, true);
                    var endPopup = createPathPopupContent(endPoint, false, true);
                    L.marker([endPoint.latitude, endPoint.longitude], {icon: endIcon})
                        .addTo(map)
                        .bindPopup(endPopup);
                }
            }
        }

        // Add violation markers
        for (var i = 0; i < violationData.length; i++) {
            var data = violationData[i];
            var isLast = (i === violationData.length - 1);
            var icon = createNumberedIcon(i + 1, isLast, false, false);
            var popupContent = createViolationPopupContent(i + 1, data, isLast);

            // Add marker to map
            var violationMarker = L.marker([data.latitude, data.longitude], {icon: icon})
                .addTo(map)
                .bindPopup(popupContent);

            allBounds.push([data.latitude, data.longitude]);

            // Draw the nearest street segment for each violation 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 Violation ' + (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-line" style="background: #2196F3; height: 4px;"></div><span>Vehicle Path</span></div>';
        legendHtml += '<div class="legend-item"><div class="legend-arrow"></div><span>Direction of Travel</span></div>';
        legendHtml += '<div class="legend-item"><div class="legend-marker" style="background: #4CAF50;"></div><span>Journey Start</span></div>';
        legendHtml += '<div class="legend-item"><div class="legend-marker" style="background: #2196F3;"></div><span>Journey End</span></div>';
        legendHtml += '<div class="legend-item"><div class="legend-marker" style="background: #FF1744;"></div><span>Violation Points</span></div>';
        legendHtml += '<div class="legend-item"><div class="legend-marker" style="background: #FF1744; width: 24px; height: 24px;"></div><span>Latest Violation</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');
            div.innerHTML = '<h4><i class="fas fa-car" style="margin-right: 8px; color: #3498db;"></i>Vehicle Analysis</h4>' +
                            '<div><strong>Vehicle:</strong> 2756 KJR</div>' +
                            '<div><strong>Total Path Points:</strong> ' + completePathData.length + '</div>' +
                            '<div><strong>Speed Violations:</strong> ' + violationData.length + '</div>';
            return div;
        };
        infoControl.addTo(map);

        // Add zoom control to top right
        L.control.zoom({position: 'topright'}).addTo(map);
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Vehicle Path & Speed Violations - 2756 KJR</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: #FF1744;
	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);
	}

	.violation-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;
	}

	.path-start-icon {
	background-color: #4CAF50;
	border: 2px solid white;
	}

	.path-end-icon {
	background-color: #2196F3;
	border: 2px solid white;
	}

	/* Pulsing animation for last 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: 300px;
	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-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: 220px;
	}

	.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.152238, 49.90692], 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.152238, 49.90692]
	];
	var completePathData = [];
	var violationData = [{"latitude": 26.152238, "longitude": 49.90692, "time": "06/21/25,11:25:42", "speed": 194, "speed_limit": 120, "street_name": null, "street_name_ar": null, "distance_to_segment": 10.37, "vehicle_direction": 226, "segment_bearing": 226.2, "nearest_segment": [[26.1530742, 49.9080398], [26.1507366, 49.9053273]], "closest_point": [26.152176403636673, 49.90699799402245]}];

	// Add device name to each point's data
	completePathData.forEach(function(data) {
	data.device_name = "2756 KJR";
	});
	violationData.forEach(function(data) {
	data.device_name = "2756 KJR";
	});

	// Function to create numbered div icons
	function createNumberedIcon(number, isLast = false, isStart = false, isEnd = false) {
	var className = 'number-icon';
	var content = number.toString();

	if (isLast) {
	className += ' violation-icon';
	content = 'V<div class="pulse-ring"></div>';
	} else if (isStart) {
	className += ' path-start-icon';
	content = 'S';
	} else if (isEnd) {
	className += ' path-end-icon';
	content = 'E';
	}

	return L.divIcon({
	className: className,
	html: content,
	iconSize: (isLast \|\| isStart \|\| isEnd) ? [32, 32] : [24, 24]
	});
	}

	// Function to create popup content for violation points
	function createViolationPopupContent(pointNum, data, isLast) {
	var lat = data.latitude;
	var lon = data.longitude;
	var speedClass = 'speed-violation';

	var html = '<div class="popup-content">';
	html += '<div class="popup-title">Violation Point ' + pointNum + (isLast ? ' (Latest)' : '') + '</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 (data.speed && data.speed_limit) {
	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 popup content for path points
	function createPathPopupContent(data, isStart, isEnd) {
	var lat = data.latitude;
	var lon = data.longitude;

	var html = '<div class="popup-content">';
	var title = 'Path Point';
	if (isStart) title = 'Journey Start';
	if (isEnd) title = 'Journey End';

	html += '<div class="popup-title">' + title + '</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.speed !== undefined) {
	html += '<tr><td>Speed:</td><td>' + data.speed + ' km/h</td></tr>';
	}
	if (data.vehicle_direction !== undefined) {
	html += '<tr><td>Direction:</td><td>' + data.vehicle_direction.toFixed(1) + '°</td></tr>';
	}
	html += '</table>';
	html += '</div>';
	return html;
	}

	var allBounds = [];

	// Draw the complete vehicle path with arrows
	if (completePathData.length > 1) {
	var pathCoordinates = completePathData.map(function(point) {
	return [point.latitude, point.longitude];
	});

	// Add path coordinates to bounds
	pathCoordinates.forEach(function(coord) {
	allBounds.push(coord);
	});

	// Create the main path line
	var vehiclePath = L.polyline(pathCoordinates, {
	color: '#2196F3',
	weight: 4,
	opacity: 0.8,
	smoothFactor: 1
	}).addTo(map).bindPopup('Complete Vehicle Path (' + completePathData.length + ' points)');

	// Add directional arrows along the path
	var arrowDecorator = L.polylineDecorator(vehiclePath, {
	patterns: [{
	offset: 25,
	repeat: 100,
	symbol: L.Symbol.arrowHead({
	pixelSize: 15,
	polygon: false,
	pathOptions: {
	stroke: true,
	color: '#1976D2',
	weight: 2,
	opacity: 0.9
	}
	})
	}]
	}).addTo(map);

	// Add start and end markers for the complete path
	if (completePathData.length > 0) {
	var startPoint = completePathData[0];
	var endPoint = completePathData[completePathData.length - 1];

	// Start marker
	var startIcon = createNumberedIcon(1, false, true, false);
	var startPopup = createPathPopupContent(startPoint, true, false);
	L.marker([startPoint.latitude, startPoint.longitude], {icon: startIcon})
	.addTo(map)
	.bindPopup(startPopup);

	// End marker (only if different from start)
	if (completePathData.length > 1) {
	var endIcon = createNumberedIcon(1, false, false, true);
	var endPopup = createPathPopupContent(endPoint, false, true);
	L.marker([endPoint.latitude, endPoint.longitude], {icon: endIcon})
	.addTo(map)
	.bindPopup(endPopup);
	}
	}
	}

	// Add violation markers
	for (var i = 0; i < violationData.length; i++) {
	var data = violationData[i];
	var isLast = (i === violationData.length - 1);
	var icon = createNumberedIcon(i + 1, isLast, false, false);
	var popupContent = createViolationPopupContent(i + 1, data, isLast);

	// Add marker to map
	var violationMarker = L.marker([data.latitude, data.longitude], {icon: icon})
	.addTo(map)
	.bindPopup(popupContent);

	allBounds.push([data.latitude, data.longitude]);

	// Draw the nearest street segment for each violation 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 Violation ' + (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-line" style="background: #2196F3; height: 4px;"></div><span>Vehicle Path</span></div>';
	legendHtml += '<div class="legend-item"><div class="legend-arrow"></div><span>Direction of Travel</span></div>';
	legendHtml += '<div class="legend-item"><div class="legend-marker" style="background: #4CAF50;"></div><span>Journey Start</span></div>';
	legendHtml += '<div class="legend-item"><div class="legend-marker" style="background: #2196F3;"></div><span>Journey End</span></div>';
	legendHtml += '<div class="legend-item"><div class="legend-marker" style="background: #FF1744;"></div><span>Violation Points</span></div>';
	legendHtml += '<div class="legend-item"><div class="legend-marker" style="background: #FF1744; width: 24px; height: 24px;"></div><span>Latest Violation</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');
	div.innerHTML = '<h4><i class="fas fa-car" style="margin-right: 8px; color: #3498db;"></i>Vehicle Analysis</h4>' +
	'<div><strong>Vehicle:</strong> 2756 KJR</div>' +
	'<div><strong>Total Path Points:</strong> ' + completePathData.length + '</div>' +
	'<div><strong>Speed Violations:</strong> ' + violationData.length + '</div>';
	return div;
	};
	infoControl.addTo(map);

	// Add zoom control to top right
	L.control.zoom({position: 'topright'}).addTo(map);
	</script>
	</body>
	</html>