1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
const parser = new DOMParser()
const mapNode = document.getElementById('map')
const link = mapNode.querySelector('a')
fetch(link.href)
.then(res => res.text())
.then(content => {
xml = parser.parseFromString(content, 'text/xml')
const points = xml.getElementsByTagName('rte')[0] || xml.getElementsByTagName('trkseg')[0]
const positions = Array.prototype.map.call(
points.children, p => [p.getAttribute('lat'), p.getAttribute('lon')])
const anchor = mapNode.getElementsByClassName('map-anchor')[0]
const map = L.map(anchor).setView([0, 0], 13)
L.tileLayer(
'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{
attribution: 'Map data © <a href="http://www.osm.org">OpenStreetMap</a>',
// maxZoom: 18,
subdomains: ['a', 'b', 'c'],
id: 'test/' + link.href,
// tileSize: 512,
// zoomOffset: -1,
// accessToken: 'your.mapbox.access.token'
}).addTo(map);
const polyline = L.polyline(positions, {color: 'red'}).addTo(map);
map.fitBounds(polyline.getBounds());
})
|
