<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Basic Page Needs
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
    <meta charset="utf-8" />
    <title><%= it.siteTitel %></title>
    <meta name="description" content="<%= it.desc %>" />
    <meta name="author" content="<%= it.author %>" />

    <!-- Mobile Specific Metas
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- CSS
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
    <link rel="stylesheet" href="css/normalize.css" />
    <link rel="stylesheet" href="css/barebones.css" />
    <link rel="stylesheet" href="css/skeleton-legacy.css" />
    <link rel="stylesheet" href="css/mainMap.css" />

    <!-- Favicon
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
    <link rel="icon" type="image/png" href="images/favicon-16.png" />

    <script async defer src="/js/site.js"></script>
    <script
      src="https://kit.fontawesome.com/<%= it.fontawesomeKey %>.js"
      crossorigin="anonymous"
    ></script>

    <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
      integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
      crossorigin=""
    />

    <!-- Make sure you put this AFTER Leaflet's CSS -->
    <script
      src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
      integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
      crossorigin=""
    ></script>

    <link rel="stylesheet" href="./leafletCluster/dist/MarkerCluster.css" />
    <link
      rel="stylesheet"
      href="./leafletCluster/dist/MarkerCluster.Default.css"
    />

    <script src="./leafletCluster/dist/leaflet.markercluster.js"></script>
  </head>
  <body>
    <!-- Primary Page Layout
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
    <div style="margin: 0px">
      <div class="map" id="map"></div>

      <div class="inspector" id="inspector">
        <br /><br /><br /><br />
        <center>
          Select an elevator on the map and information about it will be
          displayed here.
        </center>
      </div>
    </div>

    <aside>
      <i
        style="color: black; cursor: pointer"
        class="fas fa-map-marker-alt"
        onclick="home()"
      ></i>
      <i style="color: black; cursor: pointer" class="fas fas fa-plus" onclick="createNewElev()"></i>
    </aside>

    <!-- End Document
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <script>
    var mymap = L.map("map").setView([51.505, -0.09], 50);

L.tileLayer(
  "https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=<%= it.mapboxAccessToken %>",
  {
    attribution:
      'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 100,
    minZoom: 2,
    id: "mapbox/streets-v11",
    tileSize: 512,
    zoomOffset: -1,
    accessToken: "<%= it.mapboxAccessToken %>",
  }
).addTo(mymap);
  </script>
  <script src="./js/map.js"></script>
  </body>
</html>
