leaflet-ui
Version:
Leaflet presets for common user interface customizations
196 lines (170 loc) • 5.63 kB
HTML
<html>
<head>
<title>leaflet-ui</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Leaflet -->
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<!-- Leaflet-UI -->
<script src="../dist/leaflet-ui.js"></script>
<style>@import url("../dist/leaflet-ui.css");</style>
<style>
html,
body,
.leaflet-map {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
}
body {
display: flex;
flex-direction: column;
}
</style>
</head>
<body style="flex-direction: row; flex-wrap: wrap; gap: 10px;">
<div id="map-1" class="leaflet-map" style="flex: calc(50% - 5px);"></div>
<div id="map-2" class="leaflet-map" style="flex: calc(50% - 5px);"></div>
<div id="map-3" class="leaflet-map" style="flex: 100%; height: 50%;"></div>
<script>
let opts = {
map: {
center: [41.4583, 12.7059],
zoom: 5,
preferCanvas: true,
rotate: true,
// bearing: 45,
rotateControl: {
closeOnZeroBearing: true
},
fullscreenControl: false,
minimapControl: false,
searchControl: false,
locateControl: false,
pegmanControl: false,
zoomControl: false,
resizerControl: false,
layersControl: false,
},
elevationControl: {
urls: {
'map-1': "https://raruto.github.io/leaflet-elevation/examples/via-emilia.gpx",
'map-2': "https://raruto.github.io/leaflet-elevation/examples/via-aurelia.gpx",
'map-3': "https://raruto.github.io/leaflet-elevation/examples/demo.tcx",
},
options: {
theme: "lightblue-theme",
collapsed: false,
autohide: false,
autofitBounds: true,
position: "bottomleft",
detached: false,
summary: "inline",
imperial: false,
// altitude: "disabled",
slope: "disabled",
speed: false,
acceleration: false,
time: "summary",
legend: true,
followMarker: true,
almostOver: true,
distanceMarkers: false,
hotline: false,
},
},
layersControl: {
options: {
collapsed: false,
},
},
};
let maps = [], charts = [];
(async function() {
for (const id of ['map-1', 'map-2', 'map-3']) {
if (['map-2'].includes(id)) {
opts.map.plugins = [
"leaflet-rotate",
"d3@6.5.0/dist/d3.min.js",
"@tmcw/togeojson@4.5.0/dist/togeojson.umd.js",
"leaflet-geometryutil@0.9.3/src/leaflet.geometryutil.js",
"leaflet-almostover@1.0.1/src/leaflet.almostover.js",
"@raruto/leaflet-elevation@2.2.8/libs/leaflet-distance-marker.css",
"@raruto/leaflet-elevation@2.2.8/libs/leaflet-distance-marker.js",
"@raruto/leaflet-elevation@2.2.8/dist/leaflet-elevation.min.css",
"@raruto/leaflet-elevation@2.2.8/dist/leaflet-elevation.min.js",
"@raruto/leaflet-elevation@2.2.8/libs/leaflet-gpxgroup.js",
]
} else if(['map-3'].includes(id)) {
opts.map.plugins = [
"@raruto/leaflet-elevation@2.2.8/libs/leaflet-ruler.css",
"@raruto/leaflet-elevation@2.2.8/libs/leaflet-ruler.js"
]
} else {
opts.map.plugins = [];
}
// if(!['map-1'].includes(id)) {
// await new Promise(r => setTimeout(r, 5000));
// }
opts.map._id = id
let map = L.map(id, opts.map);
map.on('plugins_loaded', () => {
maps.push(map);
if (['map-2'].includes(id)) {
let controlElevation = L.control.elevation(opts.elevationControl.options).addTo(map);
let controlLayer = L.control.layers(null, null, opts.layersControl.options);
controlElevation.on('eledata_loaded', ({layer, name}) => controlLayer.addTo(map) && layer.eachLayer((trkseg) => trkseg.feature.geometry.type != "Point" && controlLayer.addOverlay(trkseg, trkseg.feature && trkseg.feature.properties && trkseg.feature.properties.name || name)));
controlElevation.load(opts.elevationControl.urls[id]);
charts.push(controlElevation);
} else if (['map-3'].includes(id)) {
L.control.ruler({position: 'topleft'}).addTo(map);
}
});
}
})();
</script>
<!-- i18n -->
<script>
// Register a custom locale
L.registerLocale('en:18', {
"Acceleration" : "Acceleration",
"Altitude" : "Elevation",
"Slope" : "Slope",
"Speed" : "Velocity",
"Total Length: " : "L: ",
"Max Elevation: " : "E Max: ",
"Min Elevation: " : "E Min: ",
"Avg Elevation: " : "E Avg: ",
"Total Time: " : "T: ",
"Total Ascent: " : "Asc: ",
"Total Descent: " : "Desc: ",
"Min Slope: " : "S Min: ",
"Max Slope: " : "S Max: ",
"Avg Slope: " : "S Avg: ",
"Min Speed: " : "V Min: ",
"Max Speed: " : "V Max: ",
"Avg Speed: " : "V Avg: ",
"Min Acceleration: ": "A Min: ",
"Max Acceleration: ": "A Max: ",
"Avg Acceleration: ": "A Avg: ",
});
// Enable a custom locale
// L.setLocale('en:18');
// You can also override a previously defined object
L.locales['en'] = L.extend({
"y: " : "",
"x: " : "",
"t: " : "",
"T: " : "",
"m: " : "",
"v: " : "",
"a: " : "",
}, L.locales['en']);
// Switch the language
L.setLocale('en');
</script>
<a href="https://github.com/Raruto/leaflet-ui" class="view-on-github" style="position: fixed;top: 10px;left: calc(50% - 60px);z-index: 9999;"> <img alt="View on Github" src="https://raruto.github.io/img/view-on-github.png" title="View on Github" width="163"> </a>
</body>
</html>