<script>
var opts = {
map: {
center: [41.4583, 12.7059],
zoom: 5,
markerZoomAnimation: false,
zoomControl: false,
},
zoomControl: {
position: 'topleft',
},
otmLayer: {
url: 'https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png',
options: {
attribution: 'Map data: © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: © <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)',
},
},
elevationControl: {
url: "https://raruto.github.io/examples/leaflet-elevation/via-emilia.gpx",
options: {
position: "topleft",
theme: "magenta-theme",
useHeightIndicator: true,
interpolation: d3.curveLinear,
collapsed: false,
elevationDiv: "#elevation-div",
detachedView: true,
responsiveView: true,
},
},
layersControl: {
options: {
collapsed: false,
},
},
};
var map = new L.Map('map', opts.map);
var baseLayers = {};
baseLayers.OTM = new L.TileLayer(opts.otmLayer.url, opts.otmLayer.options);
var controlZoom = new L.Control.Zoom(opts.zoomControl);
var controlElevation = L.control.elevation(opts.elevationControl.options);
var controlLayer = L.control.layers(baseLayers, null, opts.layersControl.options);
controlZoom.addTo(map);
controlLayer.addTo(map);
controlElevation.loadGPX(map, opts.elevationControl.url);
map.addLayer(baseLayers.OTM);
</script>