make code more DRY #121

Merged
hughrun merged 1 commit from dry into main 2021-03-08 16:21:50 +11:00

View file

@ -15,35 +15,60 @@ const nslaBranches = fetch('data/nsla_library_locations.csv')
var isSmallScreen = window.screen.availWidth < 800; var isSmallScreen = window.screen.availWidth < 800;
Promise.all([boundaries, branchesCsv, ikcCsv, mechanics, nslaBranches]) function BaseMap(id) {
.then( data => { this.id = id;
// add tile layer from OSM return L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
const baseMap = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>', attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
maxZoom: 18, maxZoom: 18,
id: 'mapbox/dark-v10', id: id,
tileSize: 512, tileSize: 512,
zoomOffset: -1, zoomOffset: -1,
accessToken: mapBoxToken accessToken: mapBoxToken
}); })
}
const baseRules = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', { function LocationsLayer(data, color) {
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a><br>Incorporates Administrative Boundaries ©PSMA Australia Limited licensed by the Commonwealth of Australia under Creative Commons Attribution 4.0 International licence (CC BY 4.0).', this.data = data;
maxZoom: 18, this.color = color;
id: 'mapbox/light-v10', return L.layerGroup([
tileSize: 512, L.geoCsv(data, {
zoomOffset: -1, firstLineTitles: true,
accessToken: mapBoxToken fieldSeparator: ',',
}); onEachFeature: function (feature, layer) {
layer.bindPopup(
`<strong>${feature.properties.town}</strong>` +
`<p>${feature.properties.address}<br/>` +
`phone: ${feature.properties.phone}</p>`
)
},
pointToLayer: function (f, latlng) {
return L.circle(latlng, {color: color, radius: 800}) // this is an 800m radius around the library
}
}),
L.geoCsv(data, {
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 (f, latlng) {
return L.circleMarker(latlng, {color: color, radius: 2, fill: true})
}
})
])
}
const baseIls = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a><br>Incorporates Administrative Boundaries ©PSMA Australia Limited licensed by the Commonwealth of Australia under Creative Commons Attribution 4.0 International licence (CC BY 4.0).', Promise.all([boundaries, branchesCsv, ikcCsv, mechanics, nslaBranches])
maxZoom: 18, .then( data => {
id: 'mapbox/light-v10', // add tile layers for each base map
tileSize: 512, const baseMap = new BaseMap('mapbox/dark-v10')
zoomOffset: -1, const baseRules = new BaseMap('mapbox/light-v10')
accessToken: mapBoxToken const baseIls = new BaseMap('mapbox/light-v10')
});
// attach map to #mapid div above and centre // attach map to #mapid div above and centre
const map = L.map('mapid', { const map = L.map('mapid', {
@ -52,8 +77,20 @@ Promise.all([boundaries, branchesCsv, ikcCsv, mechanics, nslaBranches])
layers: [baseMap] layers: [baseMap]
}); });
// LOCATION LAYERS
const branches = new LocationsLayer(data[1], "#FF3961")
const ikcs = new LocationsLayer(data[2], "#76DBA7")
const mechsAndSoA = new LocationsLayer(data[3], "rgb(255,165,0)")
const otherLibs = new LocationsLayer(data[4], "#75f857")
// add to the initial map on load
branches.addTo(map)
ikcs.addTo(map)
mechsAndSoA.addTo(map)
otherLibs.addTo(map)
// Use TopoJSON // Use TopoJSON
// ----------------------------------------------------------------- // -----------------------------------------------------------------
// This snippet Copyright (c) 2013 Ryan Clark (MIT License)
L.TopoJSON = L.GeoJSON.extend({ L.TopoJSON = L.GeoJSON.extend({
addData: function (jsonData) { addData: function (jsonData) {
if (jsonData.type === 'Topology') { if (jsonData.type === 'Topology') {
@ -66,8 +103,6 @@ Promise.all([boundaries, branchesCsv, ikcCsv, mechanics, nslaBranches])
} }
}, },
}); });
// This snippet Copyright (c) 2013 Ryan Clark (MIT License)
// ----------------------------------------------------------------- // -----------------------------------------------------------------
// library services fines overlay // library services fines overlay
@ -158,133 +193,6 @@ Promise.all([boundaries, branchesCsv, ikcCsv, mechanics, nslaBranches])
} }
}); });
const branches = L.layerGroup([
L.geoCsv(data[1], {
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.circle(latlng, {color: "#FF3961", radius: 800}) // this is an 800m radius around the library
}
}),
L.geoCsv(data[1], {
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})
}
})
]).addTo(map) // add this to the initial map on load
// Indigenous Knowledge Centre locations from csv file
const ikcs = L.layerGroup([
L.geoCsv(data[2], {
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.circle(latlng, {color: "#76DBA7", radius: 800})
}
}),
L.geoCsv(data[2], {
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})
}
})
]).addTo(map) // add this to the initial map on load
// mechanics institutes (Vic) & schools of arts (NSW) locations from csv file
const mechsAndSoA = L.layerGroup([
L.geoCsv(data[3], {
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.circle(latlng, {color: "rgb(255,165,0)", radius: 800})
}
}),
L.geoCsv(data[3], {
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})
}
})
]).addTo(map) // add this to the initial map on load
// NSLA locations from csv file
const otherLibs = L.layerGroup([
L.geoCsv(data[4], {
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.circle(latlng, {color: "#75f857", radius: 800})
}
}),
L.geoCsv(data[4], {
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})
}
})
]).addTo(map) // add this to the initial map on load
// integrated library management software // integrated library management software
const ils = new L.TopoJSON(data[0], { const ils = new L.TopoJSON(data[0], {
style: function(feature){ style: function(feature){
@ -318,12 +226,7 @@ Promise.all([boundaries, branchesCsv, ikcCsv, mechanics, nslaBranches])
// change the branches overlay names depending on the mode. // change the branches overlay names depending on the mode.
const modeButton = document.getElementById('mode-button'); const modeButton = document.getElementById('mode-button');
var overlayMaps = { var overlayMaps = {}
"Settler Knowledge Centres" : branches,
"Indigenous Knowledge Centres": ikcs,
"Worker Pacification Centres" : mechsAndSoA,
"Imperial Knowledge Centres": otherLibs
}
function setGeneral() { function setGeneral() {
overlayMaps = { overlayMaps = {