{% extends "pagetemplate.j2.html" %} {% set gis = imp0rt('kaithem.src.gis') %}
{% set tagpoints = imp0rt('kaithem.src.tagpoints') %} {% block body %}

<div class="window paper" style="height: auto">
  <style>
    main {
      width: 100%;
    }
  </style>

  <title>map tile server Maps</title>

  <link rel="stylesheet" href="/static/js/thirdparty/leaflet/leaflet.css" />
  <script src="/static/js/thirdparty/leaflet/leaflet.min.js"></script>
  <script src="/static/js/thirdparty/leaflet/leaflet.tilelayer.fallback.js"></script>
  <script src="/static/js/thirdparty/vue3.js"></script>

  <div class="flex-row">
    <div id="mapid" class="col-9 grow" style="height: 80vh"></div>

    <section id="app" class="col-3">
      <div class="card">
        <div class="stacked-form">
          <label>
            Selected Point
            <input v-model="last_click" />
          </label>
          <button type="button" v-on:click="get_gps()">
            Go to current location
          </button>
          <button type="button" v-on:click="geocode()">
            Search for location(geocode.xyz)
          </button>
        </div>
      </div>
    </section>
  </div>

  <details>
    <p>
      To update or get new maps, either browse around or add them to
      vardir/maptiles/opentopomap/z/x/y.png
    </p>
    <p>
      If available maps are served to anyone with /users/maptiles.view. If the
      user has system_admin, the tiles will be fetched automatically from
      opentopomap.org.
    </p>

    <p>
      This is a rather large privacy issue if you aren't careful, as it allows
      people with the view permission to see which maps are cached and thus
      which areas someone must have been looking at. Avoid using this for highly
      sensitive applications.
    </p>
    <p>
      Use /static/js/leaflet/leaflet.min.js and /static/js/leaflet/leaflet.css
      to make your own map-enabled modules. Kaithem's builtin tile server is on:
      /maptiles/tile/{z}/{x}/{y}.png when enabled.
    </p>
  </details>

  <script>
    function parseCoords(s) {
      s = s.split(",");
      var l = (newLatLng = new L.LatLng(parseFloat(s[0]), parseFloat(s[1])));
      return l;
    }

    const { createApp, ref, watch } = Vue;
    function showPosition(position) {
      app.$data.last_click =
        position.coords.latitude + ", " + position.coords.longitude;
    }

    function geocode() {
      var s = prompt("Web search for location");
      if (!s) {
        return;
      }
      var xmlhttp = new XMLHttpRequest();
      var url =
        "https://geocode.xyz/" +
        s.replace("?", "").replace("/", " ") +
        "?json=1";

      xmlhttp.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
          var myArr = JSON.parse(this.responseText);
          var n = myArr.latt + "," + myArr.longt;
          popup
            .setLatLng(parseCoords(n))
            .setContent(parseCoords(n).toString())
            .openOn(mymap);
          mymap.setView(parseCoords(n), 11);
        }
      };
      xmlhttp.open("GET", url, true);
      xmlhttp.send();
    }

    const app = createApp({
      data() {
        return {
          message: "Hello World!",
          last_click: "",
          geocode: geocode,
          get_gps: function () {
            var c = navigator.geolocation.getCurrentPosition(showPosition);
          },
        };
      },
    }).mount("#app");

    var myTileLayer = L.tileLayer.fallback("/maptiles/tile/{z}/{x}/{y}.png", {
      attribution:
        '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
      id: "osm/streets-v11",
    });

    var myTileLayer2 = L.tileLayer.fallback(
      "/maptiles/tile/{z}/{x}/{y}?map=usgs",
      {
        attribution:
          'Tiles courtesy of the <a href="https://usgs.gov/">U.S. Geological Survey</a>',
        maxZoom: 16,
      }
    );

    var mymap = L.map("mapid", {
    }).setView([51.505, -0.09], 6);

    var baseMaps = {
      "OpenStreetMap": myTileLayer,
      "USGS Imagery/Topo": myTileLayer2,

    };

    var layerControl = L.control.layers(baseMaps).addTo(mymap);
    myTileLayer.addTo(mymap);

    var popup = L.popup();

    function onMapClick(e) {
      popup
        .setLatLng(e.latlng)
        .setContent("You clicked the map at " + e.latlng.toString())
        .openOn(mymap);
      app.$data.last_click = e.latlng.lat + ", " + e.latlng.lng;
    }

    app.$watch("last_click", async (n, o) => {
      popup
        .setLatLng(parseCoords(n))
        .setContent(parseCoords(n).toString())
        .openOn(mymap);

      mymap.setView(parseCoords(n), 11);
    });

    mymap.on("click", onMapClick);

    // api.upd = function(d){
    //     console.log(d)
    // }

    // api.send(['get_all_points'])
  </script>
</div>
{% endblock %}
