improve popups when clicking on libraries

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

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})
}