<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Wikidata items linked to OSM</title>
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@5.0.1/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css">
    <link rel="stylesheet" href="https://unpkg.com/fork-awesome@1.1.7/css/fork-awesome.min.css">
    <link rel="stylesheet" href="https://unpkg.com/leaflet-extra-markers@1.2.1/dist/css/leaflet.extra-markers.min.css">
  </head>
  <body>
    <div id="app"></div>

    <script type="module">
      import { createApp } from "https://cdn.skypack.dev/vue@^3.0.11";
      import App from {{ url_for('static', filename='snowpack/App.vue.js') | tojson }};

      const props = {
        startLat: {{ lat }},
        startLon: {{ lon }},
        startZoom: {{ zoom }},
      };

      const app = createApp(App, props).mount('#app');

    </script>
  </body>
</html>