Used Content Delivery Network hosted Leaflet library to display real time map with geolocation data.

Using the provided CDN links from Leafletjs.com and changing some of the parameters to use fetched location variables, we can now see our current approximate location rendered on a map in the correct identified div.

Author: KDA-Coding

15-Mapty/starter/index.html

@@ -13,6 +13,19 @@
 
     <link rel="stylesheet" href="style.css" />
 
+    <link rel="stylesheet" 
+    href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" 
+    integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" 
+    crossorigin="" 
+    />
+    <script 
+    defer
+    src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" 
+    integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" 
+    crossorigin="">
+    </script>
+
+    <!--<script defer src="other.js"></script>-->
     <script defer src="script.js"></script>
     <title>mapty // Map your workouts</title>
   </head>

15-Mapty/starter/other.js

@@ -0,0 +1,2 @@
+const firstName = 'Jonas';
+console.log(months);

15-Mapty/starter/script.js

@@ -18,6 +18,18 @@ navigator.geolocation.getCurrentPosition(function(position) {
     const {longitude} = position.coords;
     console.log(`https://www.google.com/maps/@${latitude},${longitude}`);
 
+    const coords = [latitude, longitude]
+
+    const map = L.map('map').setView(coords, 13);
+
+    L.tileLayer('https://tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
+    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+    }).addTo(map);
+
+    L.marker(coords).addTo(map)
+    .bindPopup('A pretty CSS popup.<br> Easily customizable.')
+    .openPopup();
+
 }, function()
 { 
     alert('Could not get your position')