{% extends "base.html" %}

{% block title %}{{ db_name }} - Tile explorer{% endblock %}

{% block extra_head %}
<script src="{{ datasette_leaflet_url }}"></script>
<link rel="stylesheet" href="{{ datasette_leaflet_css_url }}">
{% endblock %}

{% block content %}
<h1>{{ db_name }}</h1>

<div id="explorer"></div>

<script type="module">
window.DATASETTE_CLUSTER_MAP_TILE_LAYER = "/-/tiles/{{ db_name }}/{z}/{x}/{y}.png";
window.DATASETTE_CLUSTER_MAP_TILE_LAYER_OPTIONS = {
    "minZoom": {{ min_zoom }},
    "maxZoom": {{ max_zoom }},
    "tms": true
};
import('{{ datasette_leaflet_url }}')
    .then((leaflet) => {
    let div = document.querySelector("#explorer");
    div.style.height = '80vh';
    document.querySelector('.content').appendChild(div);
    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]
    });
});
</script>

{% endblock %}