Skip to content

Commit 2100668

Browse files
committed
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.
1 parent 1995380 commit 2100668

File tree

3 files changed

+27
-0
lines changed

3 files changed

+27
-0
lines changed

15-Mapty/starter/index.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,19 @@
1313

1414
<link rel="stylesheet" href="style.css" />
1515

16+
<link rel="stylesheet"
17+
href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
18+
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
19+
crossorigin=""
20+
/>
21+
<script
22+
defer
23+
src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
24+
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
25+
crossorigin="">
26+
</script>
27+
28+
<!--<script defer src="other.js"></script>-->
1629
<script defer src="script.js"></script>
1730
<title>mapty // Map your workouts</title>
1831
</head>

15-Mapty/starter/other.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
const firstName = 'Jonas';
2+
console.log(months);

15-Mapty/starter/script.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,18 @@ navigator.geolocation.getCurrentPosition(function(position) {
1818
const {longitude} = position.coords;
1919
console.log(`https://www.google.com/maps/@${latitude},${longitude}`);
2020

21+
const coords = [latitude, longitude]
22+
23+
const map = L.map('map').setView(coords, 13);
24+
25+
L.tileLayer('https://tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
26+
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
27+
}).addTo(map);
28+
29+
L.marker(coords).addTo(map)
30+
.bindPopup('A pretty CSS popup.<br> Easily customizable.')
31+
.openPopup();
32+
2133
}, function()
2234
{
2335
alert('Could not get your position')

0 commit comments

Comments
 (0)