datasette-tiles/datasette_tiles/templates/tiles_stack_explorer.html
{% extends "base.html" %}
{% block title %}Tile stack explorer{% endblock %}
{% block extra_head %}
<script src="{{ datasette_leaflet_url }}"></script>
<link rel="stylesheet" href="{{ datasette_leaflet_css_url }}">
</style>
{% endblock %}
{% block content %}
<h1>Tile stack explorer</h1>
<div id="explorer"></div>
<div id="info"></div>
<script type="module">
window.DATASETTE_CLUSTER_MAP_TILE_LAYER = "/-/tiles-stack/{z}/{x}/{y}.png";
window.DATASETTE_CLUSTER_MAP_TILE_LAYER_OPTIONS = {
"minZoom": {{ min_zoom }},
"maxZoom": {{ max_zoom }}{% if attribution %},
"attribution": {{ attribution|safe }}{% endif %}
};
import('{{ datasette_leaflet_url }}')
.then((leaflet) => {
let div = document.querySelector("#explorer");
let info = document.querySelector("#info");
div.style.height = '80vh';
let tiles = leaflet.tileLayer(
window.DATASETTE_CLUSTER_MAP_TILE_LAYER,
window.DATASETTE_CLUSTER_MAP_TILE_LAYER_OPTIONS
);
let map = leaflet.map(div, {
center: leaflet.latLng({{ default_latitude }}, {{ default_longitude }}),
zoom: {{ default_zoom }},
layers: [tiles]
});
map.on('zoomend', function(ev) {
let zoom = ev.target.getZoom();
info.innerHTML = `Zoom: ${zoom}`;
});
});
</script>
{% endblock %}