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)