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 &copy; <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());
        })