{{ define "main" }}
  <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>{{ $.Site.Params.CurrentLocationName }}</h2>
    <div id="mapid"></div>

    <script type="text/javascript">
      var lat = {{ $.Site.Params.CurrentLat }};
      var lon = {{ $.Site.Params.CurrentLon }};
      var map = L.map('mapid').setView([lat, lon], 10);
      L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/{id}/tiles/{z}/{x}/{y}?access_token={token}', {
        maxZoom: 19,
        attribution: '<a href="https://www.mapbox.com/about/maps/" target="_blank">&copy; Mapbox &copy; OpenStreetMap</a>',
        id: 'outdoors-v11',
        token: {{ os.Getenv "HUGO_MAPBOX_API_KEY" }},
        tileSize: 512,
        zoomOffset: -1
      }).addTo(map);

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

      // show a marker on the map
      var circleCenter =  [lat, lon];
      var circleOptions = {
        color: 'red',
        fillColor: '#f03',
        fillOpacity: 0.25
      }

      var circle = L.circle(circleCenter, 5000, circleOptions);
      circle.addTo(map);

    </script>
  </div>
  </div>
{{ end }}