From 44833f4a629910a94afec73d44c9c4db7f3f354b Mon Sep 17 00:00:00 2001
From: nilsnolde <nilsnolde@proton.me>
Date: Mon, 17 Nov 2025 14:17:33 +0100
Subject: [PATCH 1/3] add /tile

---
 tile/index.html | 430 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 430 insertions(+)
 create mode 100644 tile/index.html
diff --git a/tile/index.html b/tile/index.html
new file mode 100644
index 0000000..6ab17d5
--- /dev/null
+++ b/tile/index.html
@@ -0,0 +1,430 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Valhalla Vector Tiles Demo</title>
+    
+    <!-- MapLibre GL JS -->
+    <script src='https://unpkg.com/maplibre-gl@5.11.0/dist/maplibre-gl.js'></script>
+    <link href='https://unpkg.com/maplibre-gl@5.11.0/dist/maplibre-gl.css' rel='stylesheet' />
+     
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
+        }
+        
+        #map {
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            width: 100%;
+        }
+        
+        .tile-info {
+            position: absolute;
+            bottom: 10px;
+            left: 10px;
+            background: rgba(0, 0, 0, 0.7);
+            color: white;
+            padding: 10px;
+            border-radius: 4px;
+            font-size: 12px;
+            font-family: monospace;
+            z-index: 1;
+        }
+    </style>
+</head>
+<body>
+    <div id="map"></div>
+    
+    <div class="tile-info" id="tile-info">
+        Zoom: <span id="zoom">10</span> | 
+        Center: <span id="center">[24.75, 59.44]</span>
+    </div>
+
+    <script>
+        // Configuration
+        const TILE_SERVER_URL = 'http://localhost:8002';
+        
+        // Initialize the map with VersaTiles
+        const map = new maplibregl.Map({
+            container: 'map',
+            style: 'https://tiles.versatiles.org/assets/styles/colorful/style.json', // VersaTiles colorful style
+            center: [13.398218,52.517828], // Default to Tallinn
+            zoom: 10
+        });
+        
+        // Add navigation controls
+        map.addControl(new maplibregl.NavigationControl(), 'top-left');
+        map.addControl(new maplibregl.ScaleControl(), 'bottom-right');
+        
+        // Add Valhalla tile source and layers when map loads
+        map.on('load', () => {
+                map.addSource('valhalla', {
+                    type: 'vector',
+                    tiles: [`${TILE_SERVER_URL}/tile?json=%7B%22tile%22%3A%7B%22z%22%3A{z}%2C%22x%22%3A{x}%2C%22y%22%3A{y}%7D%7D`],
+                    minzoom: 0,
+                    maxzoom: 14,  
+                    scheme: 'xyz'
+                });
+                
+                // Render edges layer (zoom >= 12)
+                // Tiles are generated up to z18, beyond that Mapbox will overzoom (scale up) z18 tiles
+                // Color roads by hierarchy level:
+                //   Level 0: Red (highways/motorways)
+                //   Level 1: Orange (major roads)
+                //   Level 2: Yellow (local streets)
+                map.addLayer({
+                    id: 'valhalla-edges',
+                    type: 'line',
+                    source: 'valhalla',
+                    'source-layer': 'edges',
+                    minzoom: 8,  // Match the C++ code threshold
+                    maxzoom: 22,  // Allow rendering even at max zoom (with overzoomed tiles)
+                    paint: {
+                        'line-color': [
+                            'match',
+                            ['get', 'tile_level'],
+                            0, '#ff0000',  // Level 0: Red (highways)
+                            1, '#ff8800',  // Level 1: Orange (major roads)
+                            2, '#ffdd00',  // Level 2: Yellow (local streets)
+                            '#ff00ff'      // Default: Magenta (shouldn't happen)
+                        ],
+                        'line-width': [
+                            'interpolate',
+                            ['exponential', 1.5],
+                            ['zoom'],
+                            12, ['match', ['get', 'tile_level'], 0, 3, 1, 2, 2, 1, 2],
+                            14, ['match', ['get', 'tile_level'], 0, 4, 1, 3, 2, 2, 3],
+                            16, ['match', ['get', 'tile_level'], 0, 6, 1, 4, 2, 3, 4],
+                            18, ['match', ['get', 'tile_level'], 0, 8, 1, 6, 2, 4, 6],
+                            20, ['match', ['get', 'tile_level'], 0, 10, 1, 8, 2, 6, 8],
+                            22, ['match', ['get', 'tile_level'], 0, 12, 1, 10, 2, 8, 10]
+                        ],
+                        'line-opacity': 0.8
+                    }
+                }); 
+                
+                // Add speed labels on edges
+                map.addLayer({
+                    id: 'valhalla-edge-speeds',
+                    type: 'symbol',
+                    source: 'valhalla',
+                    'source-layer': 'edges',
+                    minzoom: 15,  // Only show labels at high zoom levels
+                    maxzoom: 22,
+                    layout: {
+                        'text-field': [
+                            'concat',
+                            [
+                                'case',
+                                ['has', 'speed:forward'],
+                                ['concat', 'FWD ', ['get', 'speed:forward'], ' KPH'],
+                                ''
+                            ],
+                            [
+                                'case',
+                                ['all', ['has', 'speed:forward'], ['has', 'speed:backward']],
+                                '\n',
+                                ''
+                            ],
+                            [
+                                'case',
+                                ['has', 'speed:backward'],
+                                ['concat', 'BWD ', ['get', 'speed:backward'], ' KPH'],
+                                ''
+                            ]
+                        ],
+                        'text-font': ['Open Sans Regular', 'Arial Unicode MS Regular'],
+                        'text-size': [
+                            'interpolate',
+                            ['linear'],
+                            ['zoom'],
+                            15, 9,
+                            18, 12,
+                            20, 14
+                        ],
+                        'symbol-placement': 'line',
+                        'text-rotation-alignment': 'map',
+                        'text-pitch-alignment': 'viewport',
+                        'text-max-angle': 30,
+                        'symbol-spacing': 200
+                    },
+                    paint: {
+                        'text-color': '#000000',
+                        'text-halo-color': '#ffffff',
+                        'text-halo-width': 2,
+                        'text-halo-blur': 1,
+                        'text-opacity': 0.9
+                    }
+                });
+                
+                map.addLayer({
+                    id: 'valhalla-nodes',
+                    type: 'circle',
+                    source: 'valhalla',
+                    'source-layer': 'nodes',
+                    minzoom: 16,
+                    maxzoom: 22,
+                    paint: {
+                        'circle-radius': [
+                            'interpolate',
+                            ['linear'],
+                            ['zoom'],
+                            16, 2,
+                            18, 4,
+                            20, 6
+                        ],
+                        'circle-color': [
+                            'case',
+                            ['get', 'traffic_signal'], '#ff0000',  // Red for traffic signals
+                            '#0088ff'  // Blue for other nodes
+                        ],
+                        'circle-stroke-color': '#ffffff',
+                        'circle-stroke-width': 1,
+                        'circle-opacity': 0.8
+                    }
+                });
+                
+                // Render points layer (zoom < 12)
+                map.addLayer({
+                    id: 'valhalla-points',
+                    type: 'circle',
+                    source: 'valhalla',
+                    'source-layer': 'points',
+                    maxzoom: 12,
+                    paint: {
+                        'circle-radius': 20,
+                        'circle-color': '#ff0000',
+                        'circle-stroke-color': '#ffff00',
+                        'circle-stroke-width': 3
+                    }
+                });
+                
+                // Add labels showing tile coordinates
+                map.addLayer({
+                    id: 'valhalla-labels',
+                    type: 'symbol',
+                    source: 'valhalla',
+                    'source-layer': 'points',  // Changed from 'bbox' to 'points'
+                    layout: {
+                        'text-field': ['concat', 
+                            'z: ', ['get', 'z'], '\n',
+                            'x: ', ['get', 'x'], '\n',
+                            'y: ', ['get', 'y']
+                        ],
+                        'text-font': ['Open Sans Regular', 'Arial Unicode MS Regular'],
+                        'text-size': 12
+                    },
+                    paint: {
+                        'text-color': '#ff0000',
+                        'text-halo-color': '#ffffff',
+                        'text-halo-width': 2
+                    }
+                });
+                
+                // Add click handler to show feature properties
+                map.on('click', 'valhalla-edges', (e) => {
+                    if (e.features.length > 0) {
+                        const feature = e.features[0];
+                        const props = feature.properties;
+                        
+                        // Map road class numbers to names
+                        const roadClassNames = {
+                            0: 'Motorway', 1: 'Trunk', 2: 'Primary', 3: 'Secondary',
+                            4: 'Tertiary', 5: 'Unclassified', 6: 'Residential', 7: 'Service/Other'
+                        };
+                        
+                        // Map use numbers to names
+                        const useNames = {
+                            0: 'Road', 1: 'Ramp', 2: 'Turn Channel', 3: 'Track',
+                            4: 'Driveway', 5: 'Alley', 6: 'Parking Aisle', 7: 'Emergency Access',
+                            8: 'Drive-Through', 9: 'Culdesac', 10: 'Cycleway', 11: 'Mountain Bike',
+                            12: 'Sidewalk', 13: 'Footway', 14: 'Steps', 15: 'Path',
+                            16: 'Pedestrian', 17: 'Bridleway', 18: 'Other', 19: 'Ferry',
+                            20: 'Rail-Ferry', 21: 'Construction', 22: 'Transit Connection'
+                        };
+                        
+                        const hovTypeNames = {
+                            0: 'None', 1: 'HOV2', 2: 'HOV3', 3: 'HOV2+'
+                        };
+                        
+                        const speedTypeNames = {
+                            0: 'Tagged', 1: 'Classified', 2: 'Average'
+                        };
+                        
+                        const surfaceNames = {
+                            0: 'Paved Smooth', 1: 'Paved', 2: 'Paved Rough', 3: 'Compacted', 4: 'Dirt',
+                            5: 'Gravel', 6: 'Path', 7: 'Impassable'
+                        };
+                        
+                        const cyclelaneNames = {
+                            0: 'None', 1: 'Shared', 2: 'Dedicated', 3: 'Separated'
+                        };
+                        
+                        const sacScaleNames = {
+                            0: 'None', 1: 'Hiking', 2: 'Mountain Hiking', 3: 'Demanding Mountain Hiking',
+                            4: 'Alpine Hiking', 5: 'Demanding Alpine Hiking', 6: 'Difficult Alpine Hiking'
+                        };
+                        
+                        // Create a table with all properties
+                        let html = '<div style="font-family: sans-serif; font-size: 12px; max-height: 400px; overflow-y: auto;">';
+                        html += '<strong style="font-size: 14px;">Edge Properties</strong><br/>';
+                        html += '<table style="border-collapse: collapse; margin-top: 8px; width: 100%;">';
+                        html += '<thead><tr style="background-color: #f0f0f0;">';
+                        html += '<th style="padding: 4px 8px; text-align: left; border: 1px solid #ccc;">Property</th>';
+                        html += '<th style="padding: 4px 8px; text-align: left; border: 1px solid #ccc;">Value</th>';
+                        html += '</tr></thead><tbody>';
+                        
+                        // Sort properties alphabetically for easier reading
+                        const sortedKeys = Object.keys(props).sort();
+                        
+                        for (const key of sortedKeys) {
+                            let value = props[key];
+                            
+                            // Format the value based on property name
+                            if (key === 'road_class') {
+                                value = `${roadClassNames[value] || 'Unknown'} (${value})`;
+                            } else if (key === 'use') {
+                                value = `${useNames[value] || 'Unknown'} (${value})`;
+                            } else if (key === 'hov_type') {
+                                value = `${hovTypeNames[value] || 'Unknown'} (${value})`;
+                            } else if (key === 'speed_type') {
+                                value = `${speedTypeNames[value] || 'Unknown'} (${value})`;
+                            } else if (key === 'surface') {
+                                value = `${surfaceNames[value] || 'Unknown'} (${value})`;
+                            } else if (key === 'cyclelane') {
+                                value = `${cyclelaneNames[value] || 'Unknown'} (${value})`;
+                            } else if (key === 'sac_scale') {
+                                value = `${sacScaleNames[value] || 'Unknown'} (${value})`;
+                            } else if (typeof value === 'boolean') {
+                                value = value ? '✅ Yes' : '❌ No';
+                            } else if (key.startsWith('access:')) {
+                                value = value ? '✅' : '❌';
+                            } else if (key === 'length') {
+                                value = `${value} m`;
+                            } else if (key.includes('speed')) {
+                                value = `${value} KPH`;
+                            } else if (key.includes('slope')) {
+                                value = `${value}°`;
+                            } else {
+                                value = `${value}`;
+                            }
+                            
+                            html += '<tr>';
+                            html += `<td style="padding: 4px 8px; border: 1px solid #ccc; font-weight: 500;">${key}</td>`;
+                            html += `<td style="padding: 4px 8px; border: 1px solid #ccc;">${value}</td>`;
+                            html += '</tr>';
+                        }
+                        
+                        html += '</tbody></table></div>';
+                        
+                        new maplibregl.Popup({maxWidth: '500px'})
+                            .setLngLat(e.lngLat)
+                            .setHTML(html)
+                            .addTo(map);
+                    }
+                });
+                
+                // Add click handler for nodes
+                map.on('click', 'valhalla-nodes', (e) => {
+                    if (e.features.length > 0) {
+                        const feature = e.features[0];
+                        const props = feature.properties;
+                        
+                        // Map node type numbers to names
+                        const nodeTypeNames = {
+                            0: 'Street Intersection', 1: 'Gate', 2: 'Bollard',
+                            3: 'Toll Booth', 4: 'Multi-Use Transit Stop', 5: 'Bike Share',
+                            6: 'Parking', 7: 'Motor Way Junction', 8: 'Border Control',
+                            9: 'Toll Gantry', 10: 'Sump Buster', 11: 'Building Entrance',
+                            12: 'Elevator'
+                        };
+                        
+                        const intersectionTypeNames = {
+                            0: 'Regular', 1: 'Fork', 2: 'Dead End', 3: 'True/False'
+                        };
+                        
+                        // Create a table with all properties
+                        let html = '<div style="font-family: sans-serif; font-size: 12px; max-height: 400px; overflow-y: auto;">';
+                        html += '<strong style="font-size: 14px;">Node Properties</strong><br/>';
+                        html += '<table style="border-collapse: collapse; margin-top: 8px; width: 100%;">';
+                        html += '<thead><tr style="background-color: #f0f0f0;">';
+                        html += '<th style="padding: 4px 8px; text-align: left; border: 1px solid #ccc;">Property</th>';
+                        html += '<th style="padding: 4px 8px; text-align: left; border: 1px solid #ccc;">Value</th>';
+                        html += '</tr></thead><tbody>';
+                        
+                        // Sort properties alphabetically for easier reading
+                        const sortedKeys = Object.keys(props).sort();
+                        
+                        for (const key of sortedKeys) {
+                            let value = props[key];
+                            
+                            // Format the value based on property name
+                            if (key === 'type') {
+                                value = `${nodeTypeNames[value] || 'Unknown'} (${value})`;
+                            } else if (key === 'intersection') {
+                                value = `${intersectionTypeNames[value] || 'Unknown'} (${value})`;
+                            } else if (typeof value === 'boolean') {
+                                value = value ? '✅ Yes' : '❌ No';
+                            } else if (key.startsWith('access:')) {
+                                value = value ? '✅' : '❌';
+                            } else if (key === 'elevation') {
+                                value = `${value} m`;
+                            }
+                            
+                            html += '<tr>';
+                            html += `<td style="padding: 4px 8px; border: 1px solid #ccc; font-weight: 500;">${key}</td>`;
+                            html += `<td style="padding: 4px 8px; border: 1px solid #ccc;">${value}</td>`;
+                            html += '</tr>';
+                        }
+                        
+                        html += '</tbody></table></div>';
+                        
+                        new maplibregl.Popup({maxWidth: '400px'})
+                            .setLngLat(e.lngLat)
+                            .setHTML(html)
+                            .addTo(map);
+                    }
+                });
+                
+                // Change cursor on hover
+                map.on('mouseenter', 'valhalla-edges', () => {
+                    map.getCanvas().style.cursor = 'pointer';
+                });
+                
+                map.on('mouseleave', 'valhalla-edges', () => {
+                    map.getCanvas().style.cursor = '';
+                });
+                
+                map.on('mouseenter', 'valhalla-nodes', () => {
+                    map.getCanvas().style.cursor = 'pointer';
+                });
+                
+                map.on('mouseleave', 'valhalla-nodes', () => {
+                    map.getCanvas().style.cursor = '';
+                });
+        });
+        
+        // Update tile info display
+        function updateTileInfo() {
+            const zoom = map.getZoom().toFixed(2);
+            const center = map.getCenter();
+            document.getElementById('zoom').textContent = zoom;
+            document.getElementById('center').textContent = 
+                `[${center.lng.toFixed(4)}, ${center.lat.toFixed(4)}]`;
+        }
+        
+        map.on('move', updateTileInfo);
+        map.on('zoom', updateTileInfo);
+    </script>
+</body>
+</html>
+

From 2d15b2b26ee9e5111aaf2aee5e6ff99114203b4c Mon Sep 17 00:00:00 2001
From: nilsnolde <nilsnolde@proton.me>
Date: Mon, 17 Nov 2025 14:19:35 +0100
Subject: [PATCH 2/3] add /tile

---
 tile/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tile/index.html b/tile/index.html
index 6ab17d5..dec2bcb 100644
--- a/tile/index.html
+++ b/tile/index.html
@@ -57,7 +57,7 @@
         const map = new maplibregl.Map({
             container: 'map',
             style: 'https://tiles.versatiles.org/assets/styles/colorful/style.json', // VersaTiles colorful style
-            center: [13.398218,52.517828], // Default to Tallinn
+            center: [24.7536, 59.4372], // Default to Tallinn
             zoom: 10
         });
         

From 4f3f1a23d8e21330bab8e42e2d30c9d66ef756e4 Mon Sep 17 00:00:00 2001
From: nilsnolde <nilsnolde@proton.me>
Date: Mon, 17 Nov 2025 16:35:24 +0100
Subject: [PATCH 3/3] add server selection

---
 tile/index.html | 717 +++++++++++++++++++++++++-----------------------
 1 file changed, 379 insertions(+), 338 deletions(-)

diff --git a/tile/index.html b/tile/index.html
index dec2bcb..36d1b2e 100644
--- a/tile/index.html
+++ b/tile/index.html
@@ -39,6 +39,19 @@
             font-family: monospace;
             z-index: 1;
         }
+        
+        .server-select {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            background: rgba(0, 0, 0, 0.7);
+            color: white;
+            padding: 10px;
+            border-radius: 4px;
+            font-size: 12px;
+            font-family: monospace;
+            z-index: 1;
+        }
     </style>
 </head>
 <body>
@@ -49,9 +62,33 @@
         Center: <span id="center">[24.75, 59.44]</span>
     </div>
 
+    <div class="server-select">
+        <label for="serverSelect">Tile server:</label>
+        <select id="serverSelect">
+            <option value="http://localhost:8002">localhost:8002</option>
+            <option value="https://valhalla.openstreetmap.de">valhalla.openstreetmap.de</option>
+        </select>
+    </div>
+
     <script>
-        // Configuration
-        const TILE_SERVER_URL = 'http://localhost:8002';
+        // Config (default)
+        let TILE_SERVER_URL = 'http://localhost:8002';
+
+        // Apply tile-server switch
+        document.getElementById("serverSelect").addEventListener("change", (e) => {
+            TILE_SERVER_URL = e.target.value;
+
+            if (map.getSource('valhalla')) {
+                map.removeLayer('valhalla-edges');
+                map.removeLayer('valhalla-edge-speeds');
+                map.removeLayer('valhalla-nodes');
+                map.removeLayer('valhalla-points');
+                map.removeLayer('valhalla-labels');
+                map.removeSource('valhalla');
+            }
+
+            addValhallaSourceAndLayers();  // re-attach with new URL
+        });
         
         // Initialize the map with VersaTiles
         const map = new maplibregl.Map({
@@ -64,353 +101,357 @@
         // Add navigation controls
         map.addControl(new maplibregl.NavigationControl(), 'top-left');
         map.addControl(new maplibregl.ScaleControl(), 'bottom-right');
-        
-        // Add Valhalla tile source and layers when map loads
-        map.on('load', () => {
-                map.addSource('valhalla', {
-                    type: 'vector',
-                    tiles: [`${TILE_SERVER_URL}/tile?json=%7B%22tile%22%3A%7B%22z%22%3A{z}%2C%22x%22%3A{x}%2C%22y%22%3A{y}%7D%7D`],
-                    minzoom: 0,
-                    maxzoom: 14,  
-                    scheme: 'xyz'
-                });
-                
-                // Render edges layer (zoom >= 12)
-                // Tiles are generated up to z18, beyond that Mapbox will overzoom (scale up) z18 tiles
-                // Color roads by hierarchy level:
-                //   Level 0: Red (highways/motorways)
-                //   Level 1: Orange (major roads)
-                //   Level 2: Yellow (local streets)
-                map.addLayer({
-                    id: 'valhalla-edges',
-                    type: 'line',
-                    source: 'valhalla',
-                    'source-layer': 'edges',
-                    minzoom: 8,  // Match the C++ code threshold
-                    maxzoom: 22,  // Allow rendering even at max zoom (with overzoomed tiles)
-                    paint: {
-                        'line-color': [
-                            'match',
-                            ['get', 'tile_level'],
-                            0, '#ff0000',  // Level 0: Red (highways)
-                            1, '#ff8800',  // Level 1: Orange (major roads)
-                            2, '#ffdd00',  // Level 2: Yellow (local streets)
-                            '#ff00ff'      // Default: Magenta (shouldn't happen)
-                        ],
-                        'line-width': [
-                            'interpolate',
-                            ['exponential', 1.5],
-                            ['zoom'],
-                            12, ['match', ['get', 'tile_level'], 0, 3, 1, 2, 2, 1, 2],
-                            14, ['match', ['get', 'tile_level'], 0, 4, 1, 3, 2, 2, 3],
-                            16, ['match', ['get', 'tile_level'], 0, 6, 1, 4, 2, 3, 4],
-                            18, ['match', ['get', 'tile_level'], 0, 8, 1, 6, 2, 4, 6],
-                            20, ['match', ['get', 'tile_level'], 0, 10, 1, 8, 2, 6, 8],
-                            22, ['match', ['get', 'tile_level'], 0, 12, 1, 10, 2, 8, 10]
-                        ],
-                        'line-opacity': 0.8
-                    }
-                }); 
-                
-                // Add speed labels on edges
-                map.addLayer({
-                    id: 'valhalla-edge-speeds',
-                    type: 'symbol',
-                    source: 'valhalla',
-                    'source-layer': 'edges',
-                    minzoom: 15,  // Only show labels at high zoom levels
-                    maxzoom: 22,
-                    layout: {
-                        'text-field': [
-                            'concat',
-                            [
-                                'case',
-                                ['has', 'speed:forward'],
-                                ['concat', 'FWD ', ['get', 'speed:forward'], ' KPH'],
-                                ''
-                            ],
-                            [
-                                'case',
-                                ['all', ['has', 'speed:forward'], ['has', 'speed:backward']],
-                                '\n',
-                                ''
-                            ],
-                            [
-                                'case',
-                                ['has', 'speed:backward'],
-                                ['concat', 'BWD ', ['get', 'speed:backward'], ' KPH'],
-                                ''
-                            ]
-                        ],
-                        'text-font': ['Open Sans Regular', 'Arial Unicode MS Regular'],
-                        'text-size': [
-                            'interpolate',
-                            ['linear'],
-                            ['zoom'],
-                            15, 9,
-                            18, 12,
-                            20, 14
-                        ],
-                        'symbol-placement': 'line',
-                        'text-rotation-alignment': 'map',
-                        'text-pitch-alignment': 'viewport',
-                        'text-max-angle': 30,
-                        'symbol-spacing': 200
-                    },
-                    paint: {
-                        'text-color': '#000000',
-                        'text-halo-color': '#ffffff',
-                        'text-halo-width': 2,
-                        'text-halo-blur': 1,
-                        'text-opacity': 0.9
-                    }
-                });
-                
-                map.addLayer({
-                    id: 'valhalla-nodes',
-                    type: 'circle',
-                    source: 'valhalla',
-                    'source-layer': 'nodes',
-                    minzoom: 16,
-                    maxzoom: 22,
-                    paint: {
-                        'circle-radius': [
-                            'interpolate',
-                            ['linear'],
-                            ['zoom'],
-                            16, 2,
-                            18, 4,
-                            20, 6
-                        ],
-                        'circle-color': [
+
+
+        function addValhallaSourceAndLayers() {
+            map.addSource('valhalla', {
+                type: 'vector',
+                tiles: [`${TILE_SERVER_URL}/tile?json=%7B%22tile%22%3A%7B%22z%22%3A{z}%2C%22x%22%3A{x}%2C%22y%22%3A{y}%7D%7D`],
+                minzoom: 0,
+                maxzoom: 14,
+                scheme: 'xyz'
+            });
+
+            // Tiles are generated up to z18, beyond that Mapbox will overzoom (scale up) z18 tiles
+            // Color roads by hierarchy level:
+            //   Level 0: Red (highways/motorways)
+            //   Level 1: Orange (major roads)
+            //   Level 2: Yellow (local streets)
+            map.addLayer({
+                id: 'valhalla-edges',
+                type: 'line',
+                source: 'valhalla',
+                'source-layer': 'edges',
+                minzoom: 8,  // Match the C++ code threshold
+                maxzoom: 22,  // Allow rendering even at max zoom (with overzoomed tiles)
+                paint: {
+                    'line-color': [
+                        'match',
+                        ['get', 'tile_level'],
+                        0, '#ff0000',  // Level 0: Red (highways)
+                        1, '#ff8800',  // Level 1: Orange (major roads)
+                        2, '#ffdd00',  // Level 2: Yellow (local streets)
+                        '#ff00ff'      // Default: Magenta (shouldn't happen)
+                    ],
+                    'line-width': [
+                        'interpolate',
+                        ['exponential', 1.5],
+                        ['zoom'],
+                        12, ['match', ['get', 'tile_level'], 0, 3, 1, 2, 2, 1, 2],
+                        14, ['match', ['get', 'tile_level'], 0, 4, 1, 3, 2, 2, 3],
+                        16, ['match', ['get', 'tile_level'], 0, 6, 1, 4, 2, 3, 4],
+                        18, ['match', ['get', 'tile_level'], 0, 8, 1, 6, 2, 4, 6],
+                        20, ['match', ['get', 'tile_level'], 0, 10, 1, 8, 2, 6, 8],
+                        22, ['match', ['get', 'tile_level'], 0, 12, 1, 10, 2, 8, 10]
+                    ],
+                    'line-opacity': 0.8
+                }
+            }); 
+            
+            // Add speed labels on edges
+            map.addLayer({
+                id: 'valhalla-edge-speeds',
+                type: 'symbol',
+                source: 'valhalla',
+                'source-layer': 'edges',
+                minzoom: 15,  // Only show labels at high zoom levels
+                maxzoom: 22,
+                layout: {
+                    'text-field': [
+                        'concat',
+                        [
                             'case',
-                            ['get', 'traffic_signal'], '#ff0000',  // Red for traffic signals
-                            '#0088ff'  // Blue for other nodes
+                            ['has', 'speed:forward'],
+                            ['concat', 'FWD ', ['get', 'speed:forward'], ' KPH'],
+                            ''
                         ],
-                        'circle-stroke-color': '#ffffff',
-                        'circle-stroke-width': 1,
-                        'circle-opacity': 0.8
-                    }
-                });
-                
-                // Render points layer (zoom < 12)
-                map.addLayer({
-                    id: 'valhalla-points',
-                    type: 'circle',
-                    source: 'valhalla',
-                    'source-layer': 'points',
-                    maxzoom: 12,
-                    paint: {
-                        'circle-radius': 20,
-                        'circle-color': '#ff0000',
-                        'circle-stroke-color': '#ffff00',
-                        'circle-stroke-width': 3
-                    }
-                });
-                
-                // Add labels showing tile coordinates
-                map.addLayer({
-                    id: 'valhalla-labels',
-                    type: 'symbol',
-                    source: 'valhalla',
-                    'source-layer': 'points',  // Changed from 'bbox' to 'points'
-                    layout: {
-                        'text-field': ['concat', 
-                            'z: ', ['get', 'z'], '\n',
-                            'x: ', ['get', 'x'], '\n',
-                            'y: ', ['get', 'y']
+                        [
+                            'case',
+                            ['all', ['has', 'speed:forward'], ['has', 'speed:backward']],
+                            '\n',
+                            ''
                         ],
-                        'text-font': ['Open Sans Regular', 'Arial Unicode MS Regular'],
-                        'text-size': 12
-                    },
-                    paint: {
-                        'text-color': '#ff0000',
-                        'text-halo-color': '#ffffff',
-                        'text-halo-width': 2
-                    }
-                });
-                
-                // Add click handler to show feature properties
-                map.on('click', 'valhalla-edges', (e) => {
-                    if (e.features.length > 0) {
-                        const feature = e.features[0];
-                        const props = feature.properties;
-                        
-                        // Map road class numbers to names
-                        const roadClassNames = {
-                            0: 'Motorway', 1: 'Trunk', 2: 'Primary', 3: 'Secondary',
-                            4: 'Tertiary', 5: 'Unclassified', 6: 'Residential', 7: 'Service/Other'
-                        };
-                        
-                        // Map use numbers to names
-                        const useNames = {
-                            0: 'Road', 1: 'Ramp', 2: 'Turn Channel', 3: 'Track',
-                            4: 'Driveway', 5: 'Alley', 6: 'Parking Aisle', 7: 'Emergency Access',
-                            8: 'Drive-Through', 9: 'Culdesac', 10: 'Cycleway', 11: 'Mountain Bike',
-                            12: 'Sidewalk', 13: 'Footway', 14: 'Steps', 15: 'Path',
-                            16: 'Pedestrian', 17: 'Bridleway', 18: 'Other', 19: 'Ferry',
-                            20: 'Rail-Ferry', 21: 'Construction', 22: 'Transit Connection'
-                        };
-                        
-                        const hovTypeNames = {
-                            0: 'None', 1: 'HOV2', 2: 'HOV3', 3: 'HOV2+'
-                        };
-                        
-                        const speedTypeNames = {
-                            0: 'Tagged', 1: 'Classified', 2: 'Average'
-                        };
-                        
-                        const surfaceNames = {
-                            0: 'Paved Smooth', 1: 'Paved', 2: 'Paved Rough', 3: 'Compacted', 4: 'Dirt',
-                            5: 'Gravel', 6: 'Path', 7: 'Impassable'
-                        };
-                        
-                        const cyclelaneNames = {
-                            0: 'None', 1: 'Shared', 2: 'Dedicated', 3: 'Separated'
-                        };
-                        
-                        const sacScaleNames = {
-                            0: 'None', 1: 'Hiking', 2: 'Mountain Hiking', 3: 'Demanding Mountain Hiking',
-                            4: 'Alpine Hiking', 5: 'Demanding Alpine Hiking', 6: 'Difficult Alpine Hiking'
-                        };
-                        
-                        // Create a table with all properties
-                        let html = '<div style="font-family: sans-serif; font-size: 12px; max-height: 400px; overflow-y: auto;">';
-                        html += '<strong style="font-size: 14px;">Edge Properties</strong><br/>';
-                        html += '<table style="border-collapse: collapse; margin-top: 8px; width: 100%;">';
-                        html += '<thead><tr style="background-color: #f0f0f0;">';
-                        html += '<th style="padding: 4px 8px; text-align: left; border: 1px solid #ccc;">Property</th>';
-                        html += '<th style="padding: 4px 8px; text-align: left; border: 1px solid #ccc;">Value</th>';
-                        html += '</tr></thead><tbody>';
-                        
-                        // Sort properties alphabetically for easier reading
-                        const sortedKeys = Object.keys(props).sort();
+                        [
+                            'case',
+                            ['has', 'speed:backward'],
+                            ['concat', 'BWD ', ['get', 'speed:backward'], ' KPH'],
+                            ''
+                        ]
+                    ],
+                    'text-font': ['Open Sans Regular', 'Arial Unicode MS Regular'],
+                    'text-size': [
+                        'interpolate',
+                        ['linear'],
+                        ['zoom'],
+                        15, 9,
+                        18, 12,
+                        20, 14
+                    ],
+                    'symbol-placement': 'line',
+                    'text-rotation-alignment': 'map',
+                    'text-pitch-alignment': 'viewport',
+                    'text-max-angle': 30,
+                    'symbol-spacing': 200
+                },
+                paint: {
+                    'text-color': '#000000',
+                    'text-halo-color': '#ffffff',
+                    'text-halo-width': 2,
+                    'text-halo-blur': 1,
+                    'text-opacity': 0.9
+                }
+            });
+            
+            map.addLayer({
+                id: 'valhalla-nodes',
+                type: 'circle',
+                source: 'valhalla',
+                'source-layer': 'nodes',
+                minzoom: 16,
+                maxzoom: 22,
+                paint: {
+                    'circle-radius': [
+                        'interpolate',
+                        ['linear'],
+                        ['zoom'],
+                        16, 2,
+                        18, 4,
+                        20, 6
+                    ],
+                    'circle-color': [
+                        'case',
+                        ['get', 'traffic_signal'], '#ff0000',  // Red for traffic signals
+                        '#0088ff'  // Blue for other nodes
+                    ],
+                    'circle-stroke-color': '#ffffff',
+                    'circle-stroke-width': 1,
+                    'circle-opacity': 0.8
+                }
+            });
+            
+            // Render points layer (zoom < 12)
+            map.addLayer({
+                id: 'valhalla-points',
+                type: 'circle',
+                source: 'valhalla',
+                'source-layer': 'points',
+                maxzoom: 12,
+                paint: {
+                    'circle-radius': 20,
+                    'circle-color': '#ff0000',
+                    'circle-stroke-color': '#ffff00',
+                    'circle-stroke-width': 3
+                }
+            });
+            
+            // Add labels showing tile coordinates
+            map.addLayer({
+                id: 'valhalla-labels',
+                type: 'symbol',
+                source: 'valhalla',
+                'source-layer': 'points',  // Changed from 'bbox' to 'points'
+                layout: {
+                    'text-field': ['concat', 
+                        'z: ', ['get', 'z'], '\n',
+                        'x: ', ['get', 'x'], '\n',
+                        'y: ', ['get', 'y']
+                    ],
+                    'text-font': ['Open Sans Regular', 'Arial Unicode MS Regular'],
+                    'text-size': 12
+                },
+                paint: {
+                    'text-color': '#ff0000',
+                    'text-halo-color': '#ffffff',
+                    'text-halo-width': 2
+                }
+            });
+            
+            // Add click handler to show feature properties
+            map.on('click', 'valhalla-edges', (e) => {
+                if (e.features.length > 0) {
+                    const feature = e.features[0];
+                    const props = feature.properties;
+                    
+                    // Map road class numbers to names
+                    const roadClassNames = {
+                        0: 'Motorway', 1: 'Trunk', 2: 'Primary', 3: 'Secondary',
+                        4: 'Tertiary', 5: 'Unclassified', 6: 'Residential', 7: 'Service/Other'
+                    };
+                    
+                    // Map use numbers to names
+                    const useNames = {
+                        0: 'Road', 1: 'Ramp', 2: 'Turn Channel', 3: 'Track',
+                        4: 'Driveway', 5: 'Alley', 6: 'Parking Aisle', 7: 'Emergency Access',
+                        8: 'Drive-Through', 9: 'Culdesac', 10: 'Cycleway', 11: 'Mountain Bike',
+                        12: 'Sidewalk', 13: 'Footway', 14: 'Steps', 15: 'Path',
+                        16: 'Pedestrian', 17: 'Bridleway', 18: 'Other', 19: 'Ferry',
+                        20: 'Rail-Ferry', 21: 'Construction', 22: 'Transit Connection'
+                    };
+                    
+                    const hovTypeNames = {
+                        0: 'None', 1: 'HOV2', 2: 'HOV3', 3: 'HOV2+'
+                    };
+                    
+                    const speedTypeNames = {
+                        0: 'Tagged', 1: 'Classified', 2: 'Average'
+                    };
+                    
+                    const surfaceNames = {
+                        0: 'Paved Smooth', 1: 'Paved', 2: 'Paved Rough', 3: 'Compacted', 4: 'Dirt',
+                        5: 'Gravel', 6: 'Path', 7: 'Impassable'
+                    };
+                    
+                    const cyclelaneNames = {
+                        0: 'None', 1: 'Shared', 2: 'Dedicated', 3: 'Separated'
+                    };
+                    
+                    const sacScaleNames = {
+                        0: 'None', 1: 'Hiking', 2: 'Mountain Hiking', 3: 'Demanding Mountain Hiking',
+                        4: 'Alpine Hiking', 5: 'Demanding Alpine Hiking', 6: 'Difficult Alpine Hiking'
+                    };
+                    
+                    // Create a table with all properties
+                    let html = '<div style="font-family: sans-serif; font-size: 12px; max-height: 400px; overflow-y: auto;">';
+                    html += '<strong style="font-size: 14px;">Edge Properties</strong><br/>';
+                    html += '<table style="border-collapse: collapse; margin-top: 8px; width: 100%;">';
+                    html += '<thead><tr style="background-color: #f0f0f0;">';
+                    html += '<th style="padding: 4px 8px; text-align: left; border: 1px solid #ccc;">Property</th>';
+                    html += '<th style="padding: 4px 8px; text-align: left; border: 1px solid #ccc;">Value</th>';
+                    html += '</tr></thead><tbody>';
+                    
+                    // Sort properties alphabetically for easier reading
+                    const sortedKeys = Object.keys(props).sort();
+                    
+                    for (const key of sortedKeys) {
+                        let value = props[key];
                         
-                        for (const key of sortedKeys) {
-                            let value = props[key];
-                            
-                            // Format the value based on property name
-                            if (key === 'road_class') {
-                                value = `${roadClassNames[value] || 'Unknown'} (${value})`;
-                            } else if (key === 'use') {
-                                value = `${useNames[value] || 'Unknown'} (${value})`;
-                            } else if (key === 'hov_type') {
-                                value = `${hovTypeNames[value] || 'Unknown'} (${value})`;
-                            } else if (key === 'speed_type') {
-                                value = `${speedTypeNames[value] || 'Unknown'} (${value})`;
-                            } else if (key === 'surface') {
-                                value = `${surfaceNames[value] || 'Unknown'} (${value})`;
-                            } else if (key === 'cyclelane') {
-                                value = `${cyclelaneNames[value] || 'Unknown'} (${value})`;
-                            } else if (key === 'sac_scale') {
-                                value = `${sacScaleNames[value] || 'Unknown'} (${value})`;
-                            } else if (typeof value === 'boolean') {
-                                value = value ? '✅ Yes' : '❌ No';
-                            } else if (key.startsWith('access:')) {
-                                value = value ? '✅' : '❌';
-                            } else if (key === 'length') {
-                                value = `${value} m`;
-                            } else if (key.includes('speed')) {
-                                value = `${value} KPH`;
-                            } else if (key.includes('slope')) {
-                                value = `${value}°`;
-                            } else {
-                                value = `${value}`;
-                            }
-                            
-                            html += '<tr>';
-                            html += `<td style="padding: 4px 8px; border: 1px solid #ccc; font-weight: 500;">${key}</td>`;
-                            html += `<td style="padding: 4px 8px; border: 1px solid #ccc;">${value}</td>`;
-                            html += '</tr>';
+                        // Format the value based on property name
+                        if (key === 'road_class') {
+                            value = `${roadClassNames[value] || 'Unknown'} (${value})`;
+                        } else if (key === 'use') {
+                            value = `${useNames[value] || 'Unknown'} (${value})`;
+                        } else if (key === 'hov_type') {
+                            value = `${hovTypeNames[value] || 'Unknown'} (${value})`;
+                        } else if (key === 'speed_type') {
+                            value = `${speedTypeNames[value] || 'Unknown'} (${value})`;
+                        } else if (key === 'surface') {
+                            value = `${surfaceNames[value] || 'Unknown'} (${value})`;
+                        } else if (key === 'cyclelane') {
+                            value = `${cyclelaneNames[value] || 'Unknown'} (${value})`;
+                        } else if (key === 'sac_scale') {
+                            value = `${sacScaleNames[value] || 'Unknown'} (${value})`;
+                        } else if (typeof value === 'boolean') {
+                            value = value ? '✅ Yes' : '❌ No';
+                        } else if (key.startsWith('access:')) {
+                            value = value ? '✅' : '❌';
+                        } else if (key === 'length') {
+                            value = `${value} m`;
+                        } else if (key.includes('speed')) {
+                            value = `${value} KPH`;
+                        } else if (key.includes('slope')) {
+                            value = `${value}°`;
+                        } else {
+                            value = `${value}`;
                         }
                         
-                        html += '</tbody></table></div>';
-                        
-                        new maplibregl.Popup({maxWidth: '500px'})
-                            .setLngLat(e.lngLat)
-                            .setHTML(html)
-                            .addTo(map);
+                        html += '<tr>';
+                        html += `<td style="padding: 4px 8px; border: 1px solid #ccc; font-weight: 500;">${key}</td>`;
+                        html += `<td style="padding: 4px 8px; border: 1px solid #ccc;">${value}</td>`;
+                        html += '</tr>';
                     }
-                });
-                
-                // Add click handler for nodes
-                map.on('click', 'valhalla-nodes', (e) => {
-                    if (e.features.length > 0) {
-                        const feature = e.features[0];
-                        const props = feature.properties;
-                        
-                        // Map node type numbers to names
-                        const nodeTypeNames = {
-                            0: 'Street Intersection', 1: 'Gate', 2: 'Bollard',
-                            3: 'Toll Booth', 4: 'Multi-Use Transit Stop', 5: 'Bike Share',
-                            6: 'Parking', 7: 'Motor Way Junction', 8: 'Border Control',
-                            9: 'Toll Gantry', 10: 'Sump Buster', 11: 'Building Entrance',
-                            12: 'Elevator'
-                        };
-                        
-                        const intersectionTypeNames = {
-                            0: 'Regular', 1: 'Fork', 2: 'Dead End', 3: 'True/False'
-                        };
-                        
-                        // Create a table with all properties
-                        let html = '<div style="font-family: sans-serif; font-size: 12px; max-height: 400px; overflow-y: auto;">';
-                        html += '<strong style="font-size: 14px;">Node Properties</strong><br/>';
-                        html += '<table style="border-collapse: collapse; margin-top: 8px; width: 100%;">';
-                        html += '<thead><tr style="background-color: #f0f0f0;">';
-                        html += '<th style="padding: 4px 8px; text-align: left; border: 1px solid #ccc;">Property</th>';
-                        html += '<th style="padding: 4px 8px; text-align: left; border: 1px solid #ccc;">Value</th>';
-                        html += '</tr></thead><tbody>';
+                    
+                    html += '</tbody></table></div>';
+                    
+                    new maplibregl.Popup({maxWidth: '500px'})
+                        .setLngLat(e.lngLat)
+                        .setHTML(html)
+                        .addTo(map);
+                }
+            });
+            
+            // Add click handler for nodes
+            map.on('click', 'valhalla-nodes', (e) => {
+                if (e.features.length > 0) {
+                    const feature = e.features[0];
+                    const props = feature.properties;
+                    
+                    // Map node type numbers to names
+                    const nodeTypeNames = {
+                        0: 'Street Intersection', 1: 'Gate', 2: 'Bollard',
+                        3: 'Toll Booth', 4: 'Multi-Use Transit Stop', 5: 'Bike Share',
+                        6: 'Parking', 7: 'Motor Way Junction', 8: 'Border Control',
+                        9: 'Toll Gantry', 10: 'Sump Buster', 11: 'Building Entrance',
+                        12: 'Elevator'
+                    };
+                    
+                    const intersectionTypeNames = {
+                        0: 'Regular', 1: 'Fork', 2: 'Dead End', 3: 'True/False'
+                    };
+                    
+                    // Create a table with all properties
+                    let html = '<div style="font-family: sans-serif; font-size: 12px; max-height: 400px; overflow-y: auto;">';
+                    html += '<strong style="font-size: 14px;">Node Properties</strong><br/>';
+                    html += '<table style="border-collapse: collapse; margin-top: 8px; width: 100%;">';
+                    html += '<thead><tr style="background-color: #f0f0f0;">';
+                    html += '<th style="padding: 4px 8px; text-align: left; border: 1px solid #ccc;">Property</th>';
+                    html += '<th style="padding: 4px 8px; text-align: left; border: 1px solid #ccc;">Value</th>';
+                    html += '</tr></thead><tbody>';
+                    
+                    // Sort properties alphabetically for easier reading
+                    const sortedKeys = Object.keys(props).sort();
+                    
+                    for (const key of sortedKeys) {
+                        let value = props[key];
                         
-                        // Sort properties alphabetically for easier reading
-                        const sortedKeys = Object.keys(props).sort();
-                        
-                        for (const key of sortedKeys) {
-                            let value = props[key];
-                            
-                            // Format the value based on property name
-                            if (key === 'type') {
-                                value = `${nodeTypeNames[value] || 'Unknown'} (${value})`;
-                            } else if (key === 'intersection') {
-                                value = `${intersectionTypeNames[value] || 'Unknown'} (${value})`;
-                            } else if (typeof value === 'boolean') {
-                                value = value ? '✅ Yes' : '❌ No';
-                            } else if (key.startsWith('access:')) {
-                                value = value ? '✅' : '❌';
-                            } else if (key === 'elevation') {
-                                value = `${value} m`;
-                            }
-                            
-                            html += '<tr>';
-                            html += `<td style="padding: 4px 8px; border: 1px solid #ccc; font-weight: 500;">${key}</td>`;
-                            html += `<td style="padding: 4px 8px; border: 1px solid #ccc;">${value}</td>`;
-                            html += '</tr>';
+                        // Format the value based on property name
+                        if (key === 'type') {
+                            value = `${nodeTypeNames[value] || 'Unknown'} (${value})`;
+                        } else if (key === 'intersection') {
+                            value = `${intersectionTypeNames[value] || 'Unknown'} (${value})`;
+                        } else if (typeof value === 'boolean') {
+                            value = value ? '✅ Yes' : '❌ No';
+                        } else if (key.startsWith('access:')) {
+                            value = value ? '✅' : '❌';
+                        } else if (key === 'elevation') {
+                            value = `${value} m`;
                         }
                         
-                        html += '</tbody></table></div>';
-                        
-                        new maplibregl.Popup({maxWidth: '400px'})
-                            .setLngLat(e.lngLat)
-                            .setHTML(html)
-                            .addTo(map);
+                        html += '<tr>';
+                        html += `<td style="padding: 4px 8px; border: 1px solid #ccc; font-weight: 500;">${key}</td>`;
+                        html += `<td style="padding: 4px 8px; border: 1px solid #ccc;">${value}</td>`;
+                        html += '</tr>';
                     }
-                });
-                
-                // Change cursor on hover
-                map.on('mouseenter', 'valhalla-edges', () => {
-                    map.getCanvas().style.cursor = 'pointer';
-                });
-                
-                map.on('mouseleave', 'valhalla-edges', () => {
-                    map.getCanvas().style.cursor = '';
-                });
-                
-                map.on('mouseenter', 'valhalla-nodes', () => {
-                    map.getCanvas().style.cursor = 'pointer';
-                });
-                
-                map.on('mouseleave', 'valhalla-nodes', () => {
-                    map.getCanvas().style.cursor = '';
-                });
+                    
+                    html += '</tbody></table></div>';
+                    
+                    new maplibregl.Popup({maxWidth: '400px'})
+                        .setLngLat(e.lngLat)
+                        .setHTML(html)
+                        .addTo(map);
+                }
+            });
+            
+            // Change cursor on hover
+            map.on('mouseenter', 'valhalla-edges', () => {
+                map.getCanvas().style.cursor = 'pointer';
+            });
+            
+            map.on('mouseleave', 'valhalla-edges', () => {
+                map.getCanvas().style.cursor = '';
+            });
+            
+            map.on('mouseenter', 'valhalla-nodes', () => {
+                map.getCanvas().style.cursor = 'pointer';
+            });
+            
+            map.on('mouseleave', 'valhalla-nodes', () => {
+                map.getCanvas().style.cursor = '';
+            });
+        }
+        
+        // Add Valhalla tile source and layers when map loads
+        map.on('load', () => {
+            addValhallaSourceAndLayers();
         });
         
         // Update tile info display
