mirror of https://github.com/jlelse/GoBlog
10 changed files with 161 additions and 117 deletions
@ -1,37 +1,68 @@
|
||||
(function () { |
||||
let mapEl = document.getElementById('map') |
||||
let locations = (mapEl.dataset.locations == "") ? [] : JSON.parse(mapEl.dataset.locations) |
||||
let tracks = (mapEl.dataset.tracks == "") ? [] : JSON.parse(mapEl.dataset.tracks) |
||||
|
||||
let map = L.map('map', { |
||||
minZoom: mapEl.dataset.minzoom, |
||||
maxZoom: mapEl.dataset.maxzoom |
||||
}) |
||||
|
||||
L.tileLayer("/-/tiles/{s}/{z}/{x}/{y}.png", { |
||||
attribution: mapEl.dataset.attribution, |
||||
}).addTo(map) |
||||
|
||||
let features = [] |
||||
|
||||
locations.forEach(loc => { |
||||
features.push(L.marker([loc.Lat, loc.Lon]).addTo(map).on('click', function () { |
||||
window.open(loc.Post, '_blank').focus() |
||||
})) |
||||
}) |
||||
|
||||
tracks.forEach(track => { |
||||
track.Paths.forEach(path => { |
||||
features.push(L.polyline(path.map(point => [point.Lat, point.Lon]), { color: 'blue' }).addTo(map).on('click', function () { |
||||
window.open(track.Post, '_blank').focus() |
||||
})) |
||||
function loadMap() { |
||||
// Get the map element
|
||||
let mapEl = document.getElementById('map') |
||||
|
||||
// Read the map data
|
||||
// Map page
|
||||
let locations = !mapEl.dataset.locations ? [] : JSON.parse(mapEl.dataset.locations) |
||||
let tracks = !mapEl.dataset.tracks ? [] : JSON.parse(mapEl.dataset.tracks) |
||||
// Post map
|
||||
let paths = !mapEl.dataset.paths ? [] : JSON.parse(mapEl.dataset.paths) |
||||
let points = !mapEl.dataset.points ? [] : JSON.parse(mapEl.dataset.points) |
||||
|
||||
// Create Leaflet map
|
||||
let map = L.map('map', { |
||||
minZoom: mapEl.dataset.minzoom, |
||||
maxZoom: mapEl.dataset.maxzoom |
||||
}) |
||||
track.Points.forEach(point => { |
||||
features.push(L.marker([point.Lat, point.Lon]).addTo(map).on('click', function () { |
||||
window.open(track.Post, '_blank').focus() |
||||
|
||||
// Set tile source and attribution
|
||||
L.tileLayer("/-/tiles/{s}/{z}/{x}/{y}.png", { |
||||
attribution: mapEl.dataset.attribution, |
||||
}).addTo(map) |
||||
|
||||
// Add features to the map
|
||||
let features = [] |
||||
locations.forEach(loc => { |
||||
features.push(L.marker([loc.Lat, loc.Lon]).addTo(map).on('click', function () { |
||||
window.open(loc.Post, '_blank').focus() |
||||
})) |
||||
}) |
||||
}) |
||||
tracks.forEach(track => { |
||||
track.Paths.forEach(path => { |
||||
features.push(L.polyline(path.map(point => [point.Lat, point.Lon]), { color: 'blue' }).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() |
||||
})) |
||||
}) |
||||
}) |
||||
paths.forEach(path => { |
||||
features.push(L.polyline(path.map(point => [point.Lat, point.Lon]), { color: 'blue' }).addTo(map)) |
||||
}) |
||||
points.forEach(point => { |
||||
features.push(L.marker([point.Lat, point.Lon]).addTo(map)) |
||||
}) |
||||
|
||||
// Make the map fit the features
|
||||
map.fitBounds(L.featureGroup(features).getBounds(), { padding: [5, 5] }) |
||||
} |
||||
|
||||
// Add Leaflet to the page
|
||||
|
||||
// CSS
|
||||
let css = document.createElement('link') |
||||
css.rel = 'stylesheet' |
||||
css.href = '/-/leaflet/leaflet.css' |
||||
document.head.appendChild(css) |
||||
|
||||
map.fitBounds(L.featureGroup(features).getBounds(), { padding: [5, 5] }) |
||||
// JS
|
||||
let script = document.createElement('script') |
||||
script.src = '/-/leaflet/leaflet.js' |
||||
script.onload = loadMap |
||||
document.head.appendChild(script) |
||||
})() |
@ -1,26 +0,0 @@
|
||||
(function () { |
||||
let mapEl = document.getElementById('map') |
||||
let paths = (mapEl.dataset.paths == "") ? [] : JSON.parse(mapEl.dataset.paths) |
||||
let points = (mapEl.dataset.points == "") ? [] : JSON.parse(mapEl.dataset.points) |
||||
|
||||
let map = L.map('map', { |
||||
minZoom: mapEl.dataset.minzoom, |
||||
maxZoom: mapEl.dataset.maxzoom |
||||
}) |
||||
|
||||
L.tileLayer("/-/tiles/{s}/{z}/{x}/{y}.png", { |
||||
attribution: mapEl.dataset.attribution, |
||||
}).addTo(map) |
||||
|
||||
let features = [] |
||||
|
||||
paths.forEach(path => { |
||||
features.push(L.polyline(path.map(point => [point.Lat, point.Lon]), { color: 'blue' }).addTo(map)) |
||||
}) |
||||
|
||||
points.forEach(point => { |
||||
features.push(L.marker([point.Lat, point.Lon]).addTo(map)) |
||||
}) |
||||
|
||||
map.fitBounds(L.featureGroup(features).getBounds(), { padding: [5, 5] }) |
||||
})() |
Loading…
Reference in new issue