first marker (siegburg)

index.html

@@ -6,11 +6,40 @@
   <title>Dashboard</title>
   <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
   <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
+  <script src="geolet.js"></script>
+  <style>
+    html, body {
+      height: 100%;
+      margin: 0;
+    }
+    #map {
+      height: 100%;
+    }
+    .dump {
+      background-color: rgba(255, 255, 255, 0.65);
+      box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.75);
+    }
+  </style>
 </head>
 <body>
-  <div id="map" style="height: 100%"></div>
+  <div id="map"></div>
   <script type="text/javascript">
     var map = L.map('map').setView([50.733574532762226, 7.094633909697851], 13);
+    L.geolet({position: 'bottomleft'}).addTo(map);
+   
+    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+      maxZoom: 19,
+      attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+    }).addTo(map);
+
+    var dump = L.icon({
+      iconUrl: 'toilet.svg',
+      iconSize: [32, 32],
+      iconAnchor: [16, 16],
+      className: 'dump'
+    });
+
+    L.marker([50.79352197874706, 7.202796261625698],{icon: dump}).addTo(map).bindPopup("<b>Siegburg</b><br>NTA-Raum<br>Schlüssel: 7625");
   </script>
 </body>
 </html>