{{ define "main" }}
  {{ $current_location := getJSON "https://adriano.fyi/current_location" }}
  {{ $geocode_url := printf "http://mycorp.adriano.fyi:4000/v1/reverse?point.lon=%f&point.lat=%f&layers=coarse&size=1" $current_location.lon $current_location.lat }}
  {{ $dataJ := getJSON $geocode_url }}
  {{ $place :=  index $dataJ.features 0 }}

  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
                         integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
                         crossorigin=""/>
  <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
          integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
          crossorigin=""></script>
  <style>
    #mapid { height: 480px; }
  </style>

  <div class="container" role="main">
    <h2>{{ $place.properties.label }}</h2>
    <div id="mapid"></div>

    <script type="text/javascript">
      var lat = {{ $current_location.lat }};
      var lon = {{ $current_location.lon }};
      var map = L.map('mapid').setView([lat, lon], 15);
      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
      }).addTo(map);

      // show the scale bar on the lower left corner
      L.control.scale().addTo(map);

      // show a marker on the map
      L.marker({lon: lon, lat: lat}).bindPopup('Come say hi').addTo(map);
    </script>
  </div>
  </div>
{{ end }}