3D GPX Viewer with Elevation Marker
Bekijk in 3D
๐Ÿ“0.0 km
โ†—๏ธ0 m
โ†˜๏ธ0 m
๐Ÿ•’0h 0m
`; iframe.src = 'data:text/html;charset=utf-8,' + encodeURIComponent(iframeContent); } // Show iframe and map viewer iframe.style.display = 'block'; wrapper.style.display = 'block'; }); // ==== ORIGINAL JS INIT ==== mapboxgl.accessToken = 'pk.eyJ1Ijoic3VtbWl0c3RvcmllcyIsImEiOiJjbTNkYmgwdjcwMWhhMmpxdXM2cHZ6OHlkIn0.dHmdk6Z4-EOeFhrg6mocKg'; const map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/mapbox/outdoors-v12', center: [8.8694, 45.8326], zoom: 8, pitch: 60, bearing: 0, antialias: true, maxZoom: 14 }); map.on('load', () => { map.addSource('mapbox-dem', { type: 'raster-dem', url: 'mapbox://mapbox.terrain-rgb', tileSize: 512, maxzoom: 14 }); map.setTerrain({ source: 'mapbox-dem', exaggeration: 1.0 }); }); let is3D = true; document.getElementById('toggle-3d').addEventListener('click', () => { is3D = !is3D; map.easeTo({ pitch: is3D ? 60 : 0, bearing: 0, duration: 1000 }); document.getElementById('toggle-3d').textContent = is3D ? "3D" : "2D"; }); let currentLayer = 'outdoors-v12'; document.getElementById('toggle-layer').addEventListener('click', () => { const nextLayer = currentLayer === 'outdoors-v12' ? 'satellite-streets-v12' : 'outdoors-v12'; map.setStyle(`mapbox://styles/mapbox/${nextLayer}`); currentLayer = nextLayer; }); // Distance + elevation + chart setup would follow below... // (omitted here for brevity โ€“ if needed, I can include the entire script again)