mirror of
https://github.com/TheGreyDiamond/elevatormapRewritten.git
synced 2025-07-18 02:23:50 +02:00
100 lines
3.7 KiB
HTML
100 lines
3.7 KiB
HTML
<!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 © <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>
|