mirror of https://github.com/jlelse/GoBlog
Use Leaflet Marker Cluster plugin
This commit is contained in:
parent
5593607db9
commit
5eecc71e7b
|
@ -0,0 +1 @@
|
||||||
|
.leaflet-cluster-anim .leaflet-marker-icon,.leaflet-cluster-anim .leaflet-marker-shadow{-webkit-transition:-webkit-transform .3s ease-out,opacity .3s ease-in;-moz-transition:-moz-transform .3s ease-out,opacity .3s ease-in;-o-transition:-o-transform .3s ease-out,opacity .3s ease-in;transition:transform .3s ease-out,opacity .3s ease-in}.leaflet-cluster-spider-leg{-webkit-transition:-webkit-stroke-dashoffset .3s ease-out,-webkit-stroke-opacity .3s ease-in;-moz-transition:-moz-stroke-dashoffset .3s ease-out,-moz-stroke-opacity .3s ease-in;-o-transition:-o-stroke-dashoffset .3s ease-out,-o-stroke-opacity .3s ease-in;transition:stroke-dashoffset .3s ease-out,stroke-opacity .3s ease-in}
|
|
@ -0,0 +1 @@
|
||||||
|
.marker-cluster-small{background-color:rgba(181,226,140,.6)}.marker-cluster-small div{background-color:rgba(110,204,57,.6)}.marker-cluster-medium{background-color:rgba(241,211,87,.6)}.marker-cluster-medium div{background-color:rgba(240,194,12,.6)}.marker-cluster-large{background-color:rgba(253,156,115,.6)}.marker-cluster-large div{background-color:rgba(241,128,23,.6)}.leaflet-oldie .marker-cluster-small{background-color:#b5e28c}.leaflet-oldie .marker-cluster-small div{background-color:#6ecc39}.leaflet-oldie .marker-cluster-medium{background-color:#f1d357}.leaflet-oldie .marker-cluster-medium div{background-color:#f0c20c}.leaflet-oldie .marker-cluster-large{background-color:#fd9c73}.leaflet-oldie .marker-cluster-large div{background-color:#f18017}.marker-cluster{background-clip:padding-box;border-radius:20px}.marker-cluster div{width:30px;height:30px;margin-left:5px;margin-top:5px;text-align:center;border-radius:15px;font:12px "Helvetica Neue",Arial,Helvetica,sans-serif}.marker-cluster span{line-height:30px}
|
File diff suppressed because one or more lines are too long
|
@ -269,6 +269,10 @@ details summary {
|
||||||
|
|
||||||
#map {
|
#map {
|
||||||
height: 400px;
|
height: 400px;
|
||||||
|
|
||||||
|
* {
|
||||||
|
max-width: unset;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#announcement {
|
#announcement {
|
||||||
|
|
|
@ -228,6 +228,9 @@ details summary > *:first-child {
|
||||||
#map {
|
#map {
|
||||||
height: 400px;
|
height: 400px;
|
||||||
}
|
}
|
||||||
|
#map * {
|
||||||
|
max-width: unset;
|
||||||
|
}
|
||||||
|
|
||||||
#announcement {
|
#announcement {
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
|
@ -244,25 +247,21 @@ details summary > *:first-child {
|
||||||
--primary: #000;
|
--primary: #000;
|
||||||
color: #000;
|
color: #000;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: serif;
|
font-family: serif;
|
||||||
max-width: inherit;
|
max-width: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav,
|
nav,
|
||||||
.actions,
|
.actions,
|
||||||
#tts,
|
#tts,
|
||||||
#interactions,
|
#interactions,
|
||||||
#tor,
|
#tor,
|
||||||
#announcement {
|
#announcement {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.e-content a[href]:after {
|
.e-content a[href]:after {
|
||||||
content: " [" attr(href) "]";
|
content: " [" attr(href) "]";
|
||||||
}
|
}
|
||||||
|
|
|
@ -46,17 +46,17 @@
|
||||||
}).addTo(map)
|
}).addTo(map)
|
||||||
|
|
||||||
// Load map features
|
// Load map features
|
||||||
|
let cluster = L.markerClusterGroup().addTo(map)
|
||||||
|
|
||||||
let features = []
|
|
||||||
function fitFeatures() {
|
function fitFeatures() {
|
||||||
// Make the map fit the features
|
// Make the map fit the features
|
||||||
map.fitBounds(L.featureGroup(features).getBounds(), { padding: [5, 5] })
|
map.fitBounds(cluster.getBounds(), { padding: [5, 5] })
|
||||||
}
|
}
|
||||||
|
|
||||||
// Map page
|
// Map page
|
||||||
getMapJson(mapEl.dataset.locations, locations => {
|
getMapJson(mapEl.dataset.locations, locations => {
|
||||||
locations.forEach(loc => {
|
locations.forEach(loc => {
|
||||||
features.push(L.marker([loc.Lat, loc.Lon]).addTo(map).on('click', function () {
|
cluster.addLayer(L.marker([loc.Lat, loc.Lon]).on('click', function () {
|
||||||
window.open(loc.Post, '_blank').focus()
|
window.open(loc.Post, '_blank').focus()
|
||||||
}))
|
}))
|
||||||
})
|
})
|
||||||
|
@ -66,12 +66,12 @@
|
||||||
tracks.forEach(track => {
|
tracks.forEach(track => {
|
||||||
track.Paths.forEach(path => {
|
track.Paths.forEach(path => {
|
||||||
// Use random color on map page for paths to better differentiate
|
// 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 () {
|
cluster.addLayer(L.polyline(path.map(point => [point.Lat, point.Lon]), { color: randomColor() }).on('click', function () {
|
||||||
window.open(track.Post, '_blank').focus()
|
window.open(track.Post, '_blank').focus()
|
||||||
}))
|
}))
|
||||||
})
|
})
|
||||||
track.Points.forEach(point => {
|
track.Points.forEach(point => {
|
||||||
features.push(L.marker([point.Lat, point.Lon]).addTo(map).on('click', function () {
|
cluster.addLayer(L.marker([point.Lat, point.Lon]).on('click', function () {
|
||||||
window.open(track.Post, '_blank').focus()
|
window.open(track.Post, '_blank').focus()
|
||||||
}))
|
}))
|
||||||
})
|
})
|
||||||
|
@ -81,13 +81,13 @@
|
||||||
// Post map
|
// Post map
|
||||||
getMapJson(mapEl.dataset.paths, paths => {
|
getMapJson(mapEl.dataset.paths, paths => {
|
||||||
paths.forEach(path => {
|
paths.forEach(path => {
|
||||||
features.push(L.polyline(path.map(point => [point.Lat, point.Lon]), { color: 'blue' }).addTo(map))
|
cluster.addLayer(L.polyline(path.map(point => [point.Lat, point.Lon]), { color: 'blue' }))
|
||||||
})
|
})
|
||||||
fitFeatures()
|
fitFeatures()
|
||||||
})
|
})
|
||||||
getMapJson(mapEl.dataset.points, points => {
|
getMapJson(mapEl.dataset.points, points => {
|
||||||
points.forEach(point => {
|
points.forEach(point => {
|
||||||
features.push(L.marker([point.Lat, point.Lon]).addTo(map))
|
cluster.addLayer(L.marker([point.Lat, point.Lon]))
|
||||||
})
|
})
|
||||||
fitFeatures()
|
fitFeatures()
|
||||||
})
|
})
|
||||||
|
@ -102,9 +102,26 @@
|
||||||
css.href = '/-/leaflet/leaflet.css?v=1.9.4'
|
css.href = '/-/leaflet/leaflet.css?v=1.9.4'
|
||||||
document.head.appendChild(css)
|
document.head.appendChild(css)
|
||||||
|
|
||||||
|
// Marker Cluster plugin
|
||||||
|
let pluginCss1 = document.createElement('link')
|
||||||
|
pluginCss1.rel = 'stylesheet'
|
||||||
|
pluginCss1.href = '/-/leaflet/markercluster.css?v=1.5.3'
|
||||||
|
document.head.appendChild(pluginCss1)
|
||||||
|
|
||||||
|
let pluginCss2 = document.createElement('link')
|
||||||
|
pluginCss2.rel = 'stylesheet'
|
||||||
|
pluginCss2.href = '/-/leaflet/markercluster.default.css?v=1.5.3'
|
||||||
|
document.head.appendChild(pluginCss2)
|
||||||
|
|
||||||
// JS
|
// JS
|
||||||
let script = document.createElement('script')
|
let script = document.createElement('script')
|
||||||
script.src = '/-/leaflet/leaflet.js?v=1.9.4'
|
script.src = '/-/leaflet/leaflet.js?v=1.9.4'
|
||||||
script.onload = loadMap
|
script.onload = function () {
|
||||||
|
// Marker Cluster plugin
|
||||||
|
let plugin = document.createElement('script')
|
||||||
|
plugin.src = '/-/leaflet/markercluster.js?v=1.5.3'
|
||||||
|
plugin.onload = loadMap
|
||||||
|
document.head.appendChild(plugin)
|
||||||
|
}
|
||||||
document.head.appendChild(script)
|
document.head.appendChild(script)
|
||||||
})()
|
})()
|
Loading…
Reference in New Issue