2021-07-06 19:06:39 +00:00
|
|
|
(function () {
|
2022-07-03 07:53:53 +00:00
|
|
|
function randomColor() {
|
|
|
|
let color = '#'
|
|
|
|
for (let i = 0; i < 3; i++) {
|
2022-07-03 08:42:26 +00:00
|
|
|
color += Math.floor(10 + Math.random() * 246).toString(16)
|
2022-07-03 07:53:53 +00:00
|
|
|
}
|
|
|
|
return color
|
|
|
|
}
|
|
|
|
|
2022-07-03 08:42:26 +00:00
|
|
|
function getMapJson(data, callback) {
|
|
|
|
if (!data) {
|
|
|
|
return
|
|
|
|
} else if (data.startsWith('url:')) {
|
|
|
|
let url = data.substring(4)
|
|
|
|
let req = new XMLHttpRequest()
|
|
|
|
req.open('GET', url)
|
|
|
|
req.onload = function () {
|
|
|
|
if (req.status == 200) {
|
|
|
|
let parsed = JSON.parse(req.responseText)
|
|
|
|
if (parsed && parsed.length > 0) {
|
|
|
|
callback(parsed)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
req.send()
|
|
|
|
return
|
|
|
|
} else {
|
|
|
|
callback(JSON.parse(data))
|
|
|
|
return
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-04-15 18:53:19 +00:00
|
|
|
function loadMap() {
|
|
|
|
// Get the map element
|
|
|
|
let mapEl = document.getElementById('map')
|
|
|
|
|
|
|
|
// Create Leaflet map
|
|
|
|
let map = L.map('map', {
|
|
|
|
minZoom: mapEl.dataset.minzoom,
|
|
|
|
maxZoom: mapEl.dataset.maxzoom
|
2021-11-16 17:01:11 +00:00
|
|
|
})
|
2022-04-15 18:53:19 +00:00
|
|
|
|
|
|
|
// Set tile source and attribution
|
|
|
|
L.tileLayer("/-/tiles/{s}/{z}/{x}/{y}.png", {
|
|
|
|
attribution: mapEl.dataset.attribution,
|
|
|
|
}).addTo(map)
|
|
|
|
|
2022-07-03 08:42:26 +00:00
|
|
|
// Load map features
|
|
|
|
|
2022-04-15 18:53:19 +00:00
|
|
|
let features = []
|
2022-07-03 08:42:26 +00:00
|
|
|
function fitFeatures() {
|
|
|
|
// Make the map fit the features
|
|
|
|
map.fitBounds(L.featureGroup(features).getBounds(), { padding: [5, 5] })
|
|
|
|
}
|
|
|
|
|
|
|
|
// Map page
|
|
|
|
getMapJson(mapEl.dataset.locations, locations => {
|
|
|
|
locations.forEach(loc => {
|
|
|
|
features.push(L.marker([loc.Lat, loc.Lon]).addTo(map).on('click', function () {
|
|
|
|
window.open(loc.Post, '_blank').focus()
|
2022-04-15 18:53:19 +00:00
|
|
|
}))
|
|
|
|
})
|
2022-07-03 08:42:26 +00:00
|
|
|
fitFeatures()
|
|
|
|
})
|
|
|
|
getMapJson(mapEl.dataset.tracks, tracks => {
|
|
|
|
tracks.forEach(track => {
|
|
|
|
track.Paths.forEach(path => {
|
|
|
|
// Use random color on map page for paths to better differentiate
|
|
|
|
features.push(L.polyline(path.map(point => [point.Lat, point.Lon]), { color: randomColor() }).addTo(map).on('click', function () {
|
|
|
|
window.open(track.Post, '_blank').focus()
|
|
|
|
}))
|
|
|
|
})
|
|
|
|
track.Points.forEach(point => {
|
|
|
|
features.push(L.marker([point.Lat, point.Lon]).addTo(map).on('click', function () {
|
|
|
|
window.open(track.Post, '_blank').focus()
|
|
|
|
}))
|
|
|
|
})
|
2022-04-15 18:53:19 +00:00
|
|
|
})
|
2022-07-03 08:42:26 +00:00
|
|
|
fitFeatures()
|
2022-04-15 18:53:19 +00:00
|
|
|
})
|
2022-07-03 08:42:26 +00:00
|
|
|
// Post map
|
|
|
|
getMapJson(mapEl.dataset.paths, paths => {
|
|
|
|
paths.forEach(path => {
|
|
|
|
features.push(L.polyline(path.map(point => [point.Lat, point.Lon]), { color: 'blue' }).addTo(map))
|
|
|
|
})
|
|
|
|
fitFeatures()
|
2022-04-15 18:53:19 +00:00
|
|
|
})
|
2022-07-03 08:42:26 +00:00
|
|
|
getMapJson(mapEl.dataset.points, points => {
|
|
|
|
points.forEach(point => {
|
|
|
|
features.push(L.marker([point.Lat, point.Lon]).addTo(map))
|
|
|
|
})
|
|
|
|
fitFeatures()
|
2022-04-15 18:53:19 +00:00
|
|
|
})
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
// Add Leaflet to the page
|
|
|
|
|
|
|
|
// CSS
|
|
|
|
let css = document.createElement('link')
|
|
|
|
css.rel = 'stylesheet'
|
2022-10-22 18:29:45 +00:00
|
|
|
css.href = '/-/leaflet/leaflet.css?v=1.9.2'
|
2022-04-15 18:53:19 +00:00
|
|
|
document.head.appendChild(css)
|
2021-11-13 19:19:46 +00:00
|
|
|
|
2022-04-15 18:53:19 +00:00
|
|
|
// JS
|
|
|
|
let script = document.createElement('script')
|
2022-10-22 18:29:45 +00:00
|
|
|
script.src = '/-/leaflet/leaflet.js?v=1.9.2'
|
2022-04-15 18:53:19 +00:00
|
|
|
script.onload = loadMap
|
|
|
|
document.head.appendChild(script)
|
2021-07-06 19:06:39 +00:00
|
|
|
})()
|