diff --git a/src/titiler/core/titiler/core/templates/map.html b/src/titiler/core/titiler/core/templates/map.html index ecdec60f..1027ed54 100644 --- a/src/titiler/core/titiler/core/templates/map.html +++ b/src/titiler/core/titiler/core/templates/map.html @@ -112,6 +112,50 @@ activeBaseLayer = osmLayer; } + // Add some placemarks for use in validating display with custom TMS + var nullIsland = L.marker([0, 0]), + madrid = L.marker([40, -3]), + london = L.marker([51.50722, -0.1275]), + auckland = L.marker([-36.864664, 174.792059]), + seattle = L.marker([47.596842, -122.333087]); + + var cities = L.layerGroup([nullIsland, london, auckland, seattle]); + + document.addEventListener('keydown', function(e) { + if (e.key === 'b' || e.key === 'B') { + if (map.hasLayer(cities)) { + map.removeLayer(cities); + } else { + map.addLayer(cities); + } + } + }); + + const toggleButton = L.control({position: 'bottomright'}); + toggleButton.onAdd = function(map) { + const div = L.DomUtil.create('div', 'toggle-cities'); + div.innerHTML = ` + + `; + div.onclick = function() { + if (map.hasLayer(cities)) { + map.removeLayer(cities); + } else { + map.addLayer(cities); + } + }; + return div; + }; + toggleButton.addTo(map); + + // Add the tile layer! fetch('{{ tilejson_endpoint|safe }}') .then(res => { if (res.ok) return res.json()