hugh/public_library_map
hugh/public_library_map
1
Fork 0
Code Issues 9 Pull requests Actions Packages Projects Releases Wiki Activity

improve popups when clicking on libraries

Browse source 
Allows users to click on the location dots AND the 800m radius (location point is overlayed at long distances).
Also adds phone numbers to all popups and improves code readability.
Fixes #12
This commit is contained in:
Hugh Rundle 2021-01-19 08:17:22 +11:00
parent fca91746d4
commit 632534789d
1 changed files with 55 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
website/load-map.js
View file

@ -132,13 +132,16 @@ onEachFeature: function onEachFeature(feature, layer) {
}
});
// TODO:
const branches = L.layerGroup([
L.geoCsv(branchesCsv, {
firstLineTitles: true,
fieldSeparator: ',',
onEachFeature: function (feature, layer) {
layer.bindPopup("<strong>" + feature.properties.town + "</strong><br/>" + feature.properties.address)
layer.bindPopup(
`<strong>${feature.properties.town}</strong>` +
`<p>${feature.properties.address}<br/>` +
`phone: ${feature.properties.phone}</p>`
)
},
pointToLayer: function (feature, latlng) {
return L.circle(latlng, {color: "#FF3961", radius: 800}) // this is an 800m radius around the library
@ -147,6 +150,13 @@ const branches = L.layerGroup([
L.geoCsv(branchesCsv, {
firstLineTitles: true,
fieldSeparator: ',',
onEachFeature: function (feature, layer) {
layer.bindPopup(
`<strong>${feature.properties.town}</strong>` +
`<p>${feature.properties.address}<br/>` +
`phone: ${feature.properties.phone}</p>`
)
},
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, {color: "#FF3961", radius: 2, fill: true})
}
@ -154,12 +164,16 @@ const branches = L.layerGroup([
]).addTo(map) // add this to the initial map on load
// Indigenous Knowledge Centre locations from csv file
var ikcs = L.layerGroup([
const ikcs = L.layerGroup([
L.geoCsv(ikcCsv, {
firstLineTitles: true,
fieldSeparator: ',',
onEachFeature: function (feature, layer) {
layer.bindPopup("<strong>" + feature.properties.town + "</strong><br/>" + feature.properties.address)
layer.bindPopup(
`<strong>${feature.properties.town}</strong>` +
`<p>${feature.properties.address}<br/>` +
`phone: ${feature.properties.phone}</p>`
)
},
pointToLayer: function (feature, latlng) {
return L.circle(latlng, {color: "#76DBA7", radius: 800})
@ -168,6 +182,13 @@ var ikcs = L.layerGroup([
L.geoCsv(ikcCsv, {
firstLineTitles: true,
fieldSeparator: ',',
onEachFeature: function (feature, layer) {
layer.bindPopup(
`<strong>${feature.properties.town}</strong>` +
`<p>${feature.properties.address}<br/>` +
`phone: ${feature.properties.phone}</p>`
)
},
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, {color: "#76DBA7", radius: 2, fill: true})
}
@ -175,12 +196,16 @@ var ikcs = L.layerGroup([
]).addTo(map) // add this to the initial map on load
// mechanics institutes (Vic) & schools of arts (NSW) locations from csv file
var mechsAndSoA = L.layerGroup([
const mechsAndSoA = L.layerGroup([
L.geoCsv(mechanics, {
firstLineTitles: true,
fieldSeparator: ',',
onEachFeature: function (feature, layer) {
layer.bindPopup("<strong>" + feature.properties.town + "</strong><br/>" + feature.properties.address)
layer.bindPopup(
`<strong>${feature.properties.town}</strong>` +
`<p>${feature.properties.address}<br/>` +
`phone: ${feature.properties.phone}</p>`
)
},
pointToLayer: function (feature, latlng) {
return L.circle(latlng, {color: "rgb(255,165,0)", radius: 800})
@ -189,6 +214,13 @@ var mechsAndSoA = L.layerGroup([
L.geoCsv(mechanics, {
firstLineTitles: true,
fieldSeparator: ',',
onEachFeature: function (feature, layer) {
layer.bindPopup(
`<strong>${feature.properties.town}</strong>` +
`<p>${feature.properties.address}<br/>` +
`phone: ${feature.properties.phone}</p>`
)
},
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, {color: "rgb(255,165,0)", radius: 2, fill: true})
}
@ -196,12 +228,16 @@ var mechsAndSoA = L.layerGroup([
]).addTo(map) // add this to the initial map on load
// NSLA locations from csv file
var otherLibs = L.layerGroup([
const otherLibs = L.layerGroup([
L.geoCsv(nslaBranches, {
firstLineTitles: true,
fieldSeparator: ',',
onEachFeature: function (feature, layer) {
layer.bindPopup("<strong>" + feature.properties.town + "</strong><br/>" + feature.properties.address)
layer.bindPopup(
`<strong>${feature.properties.town}</strong>` +
`<p>${feature.properties.address}<br/>` +
`phone: ${feature.properties.phone}</p>`
)
},
pointToLayer: function (feature, latlng) {
return L.circle(latlng, {color: "#75f857", radius: 800})
@ -210,6 +246,13 @@ var otherLibs = L.layerGroup([
L.geoCsv(nslaBranches, {
firstLineTitles: true,
fieldSeparator: ',',
onEachFeature: function (feature, layer) {
layer.bindPopup(
`<strong>${feature.properties.town}</strong>` +
`<p>${feature.properties.address}<br/>` +
`phone: ${feature.properties.phone}</p>`
)
},
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, {color: "#75f857", radius: 2, fill: true})
}