personal_site/_drafts/2023-10-01-maps-3.md
2023-10-12 17:05:08 +02:00

41 lines
1.2 KiB
Markdown

---
title: "UK to Romania... by Train!"
layout: post
excerpt: |
image:
---
<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="https://cdnjs.cloudflare.com/ajax/libs/leaflet-gpx/1.7.0/gpx.min.js"></script>
<div id="map" style="height:400px; width:100%; margin-top: 1em;"></div>
<script>
let Stamen_Toner = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}{r}.{ext}', {
subdomains: 'abcd',
minZoom: 0,
maxZoom: 16,
ext: 'png'
});
let map = L.map('map', {attributionControl: false, zoomControl: false}).setView({'lat': 51.555514883267996, 'lng': -0.07930755615234376}, 15);
map.addLayer(Stamen_Toner);
var gpx = '/assets/blog/romania_trip/route.gpx'; // URL to your GPX file or the GPX itself
new L.GPX(gpx, {
async: true,
parseElements: ['track']
}).on('loaded', function(e) {
map.fitBounds(e.target.getBounds());
}).addTo(map);
</script>