Hugh Rundle
21c0c10f08
Adds a layer to view the library software for each library service. Each software system is colour-coded. Adds the ILS to the infobox on hover and the popup on select.
631 lines
20 KiB
JavaScript
631 lines
20 KiB
JavaScript
const boundaries = fetch('data/boundaries.topo.json')
|
|
.then( response => response.json())
|
|
|
|
const branchesCsv = fetch('data/public_library_locations.csv')
|
|
.then( response => response.text());
|
|
|
|
const ikcCsv = fetch('data/indigenous_knowledge_centre_locations.csv')
|
|
.then( response => response.text());
|
|
|
|
const mechanics = fetch('data/mechanics_institute_locations.csv')
|
|
.then( response => response.text());
|
|
|
|
const nslaBranches = fetch('data/nsla_library_locations.csv')
|
|
.then( response => response.text());
|
|
|
|
var isSmallScreen = window.screen.availWidth < 800;
|
|
|
|
Promise.all([boundaries, branchesCsv, ikcCsv, mechanics, nslaBranches])
|
|
.then( data => {
|
|
// add tile layer from OSM
|
|
const baseMap = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
|
|
attribution: 'Map data © <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,
|
|
id: 'mapbox/dark-v10',
|
|
tileSize: 512,
|
|
zoomOffset: -1,
|
|
accessToken: mapBoxToken
|
|
});
|
|
|
|
const baseRules = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
|
|
attribution: 'Map data © <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).',
|
|
maxZoom: 18,
|
|
id: 'mapbox/light-v10',
|
|
tileSize: 512,
|
|
zoomOffset: -1,
|
|
accessToken: mapBoxToken
|
|
});
|
|
|
|
const baseIls = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
|
|
attribution: 'Map data © <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).',
|
|
maxZoom: 18,
|
|
id: 'mapbox/light-v10',
|
|
tileSize: 512,
|
|
zoomOffset: -1,
|
|
accessToken: mapBoxToken
|
|
});
|
|
|
|
// attach map to #mapid div above and centre
|
|
const map = L.map('mapid', {
|
|
center: [-27.00, 133.000],
|
|
zoom: isSmallScreen ? 4 : 5,
|
|
layers: [baseMap]
|
|
});
|
|
|
|
// Use TopoJSON
|
|
// -----------------------------------------------------------------
|
|
L.TopoJSON = L.GeoJSON.extend({
|
|
addData: function (jsonData) {
|
|
if (jsonData.type === 'Topology') {
|
|
for (let key in jsonData.objects) {
|
|
geojson = topojson.feature(jsonData, jsonData.objects[key]);
|
|
L.GeoJSON.prototype.addData.call(this, geojson);
|
|
}
|
|
} else {
|
|
L.GeoJSON.prototype.addData.call(this, jsonData);
|
|
}
|
|
},
|
|
});
|
|
// This snippet Copyright (c) 2013 Ryan Clark (MIT License)
|
|
|
|
// -----------------------------------------------------------------
|
|
|
|
// library services fines overlay
|
|
const fines = new L.TopoJSON(data[0], {
|
|
style: function(feature){
|
|
return {
|
|
fillColor: getFinesColor(feature.properties.fines),
|
|
weight: 3,
|
|
color: "white",
|
|
dashArray: "4",
|
|
fillOpacity: 0.2
|
|
}
|
|
},
|
|
onEachFeature: function onEachFeature(feature, layer) {
|
|
layer.on({
|
|
mouseover: e => highlightFeature(e),
|
|
mouseout: e => resetHighlight(e, fines),
|
|
click: e => zoomToFeature(e, feature.properties),
|
|
})
|
|
}
|
|
});
|
|
|
|
// fill patterns for loan period overlay
|
|
const circles = new L.PatternCircle({
|
|
color: '#000',
|
|
weight: 1,
|
|
radius: 2,
|
|
x: 4,
|
|
y: 4,
|
|
fill: true,
|
|
fillOpacity: 1
|
|
});
|
|
|
|
const loanTwo = new L.Pattern({
|
|
width: 8,
|
|
height: 8
|
|
})
|
|
|
|
loanTwo.addShape(circles);
|
|
loanTwo.addTo(map);
|
|
|
|
const loanThree = new L.StripePattern({
|
|
color: '#000'
|
|
});
|
|
loanThree.addTo(map);
|
|
|
|
const loanFour = new L.StripePattern({
|
|
color: '#000',
|
|
weight: 6,
|
|
spaceWeight: 2,
|
|
angle: 45
|
|
});
|
|
loanFour.addTo(map);
|
|
|
|
const loanSix = new L.StripePattern({
|
|
color: '#000',
|
|
weight: 2,
|
|
spaceWeight: 6,
|
|
angle: 135
|
|
});
|
|
loanSix.addTo(map);
|
|
|
|
function getLoanFillPattern(w) {
|
|
return w == '2' ? loanTwo :
|
|
w == '3' ? loanThree :
|
|
w == '4' ? loanFour :
|
|
w == '6' ? loanSix : null
|
|
}
|
|
|
|
// loan period overlay
|
|
const loanPeriod = new L.TopoJSON(data[0], {
|
|
style: function(feature){
|
|
return {
|
|
weight: 3,
|
|
color: "#fff",
|
|
dashArray: "4",
|
|
fillOpacity: 0.2,
|
|
fillColor: "#bbb",
|
|
fillPattern: getLoanFillPattern(feature.properties.standard_loan_weeks)
|
|
}
|
|
},
|
|
onEachFeature: function onEachFeature(feature, layer) {
|
|
layer.on({
|
|
mouseover: e => highlightFeature(e),
|
|
mouseout: e => resetHighlight(e, loanPeriod),
|
|
click: zoomToFeature
|
|
})
|
|
}
|
|
});
|
|
|
|
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
|
|
const ils = new L.TopoJSON(data[0], {
|
|
style: function(feature){
|
|
return {
|
|
fillColor: getIlsColor(feature.properties.ILS),
|
|
weight: 3,
|
|
color: "white",
|
|
dashArray: "4",
|
|
fillOpacity: 0.2
|
|
}
|
|
},
|
|
onEachFeature: function onEachFeature(feature, layer) {
|
|
layer.on({
|
|
mouseover: e => highlightFeature(e),
|
|
mouseout: e => resetHighlight(e, ils),
|
|
click: e => zoomToFeature(e, feature.properties),
|
|
})
|
|
}
|
|
});
|
|
|
|
|
|
// ++++++++++++++
|
|
// control layers
|
|
// ++++++++++++++
|
|
const baseMaps = {
|
|
"Libraries" : baseMap,
|
|
"Rules" : baseRules,
|
|
"Library Management Software" : baseIls
|
|
}
|
|
|
|
// change the branches overlay names depending on the mode.
|
|
const modeButton = document.getElementById('mode-button');
|
|
|
|
var overlayMaps = {
|
|
"Settler Knowledge Centres" : branches,
|
|
"Indigenous Knowledge Centres": ikcs,
|
|
"Worker Pacification Centres" : mechsAndSoA,
|
|
"Imperial Knowledge Centres": otherLibs
|
|
}
|
|
|
|
function setGeneral() {
|
|
overlayMaps = {
|
|
"Settler Knowledge Centres" : branches,
|
|
"Indigenous Knowledge Centres": ikcs,
|
|
"Worker Pacification Centres" : mechsAndSoA,
|
|
"Imperial Knowledge Centres": otherLibs
|
|
}
|
|
modeButton.innerText = "View in White Fragility mode";
|
|
}
|
|
|
|
function setFragile() {
|
|
overlayMaps = {
|
|
"Public Libraries" : branches,
|
|
"Indigenous Knowledge Centres": ikcs,
|
|
"Mechanics Institutes" : mechsAndSoA,
|
|
"National & State Libraries" : otherLibs
|
|
};
|
|
modeButton.innerText = "View in General mode";
|
|
}
|
|
|
|
if (sessionStorage.getItem('mapMode') === 'fragile') {
|
|
setFragile()
|
|
} else {
|
|
setGeneral()
|
|
}
|
|
|
|
// add control layers
|
|
var mapControl = L.control.layers(
|
|
baseMaps,
|
|
overlayMaps,
|
|
{ "collapsed" : isSmallScreen }
|
|
).addTo(map);
|
|
|
|
// scale
|
|
L.control.scale().addTo(map);
|
|
|
|
// info boxes
|
|
const infoBoxes = {
|
|
branches: L.control(),
|
|
fines: L.control(),
|
|
loanPeriod: L.control(),
|
|
serviceInfo: L.control({position: 'topleft'})
|
|
}
|
|
|
|
// switching mode between standard and fragile
|
|
function switchMode() {
|
|
if (sessionStorage.getItem('mapMode') === 'fragile') {
|
|
sessionStorage.setItem('mapMode', 'general');
|
|
setGeneral()
|
|
mapControl.remove();
|
|
infoBoxes.branches.remove()
|
|
mapControl = L.control.layers(baseMaps, overlayMaps, {"collapsed": isSmallScreen}).addTo(map);
|
|
if (!isSmallScreen) {
|
|
infoBoxes.branches.addTo(map)
|
|
}
|
|
} else {
|
|
sessionStorage.setItem('mapMode', 'fragile');
|
|
setFragile()
|
|
mapControl.remove();
|
|
infoBoxes.branches.remove()
|
|
mapControl = L.control.layers(baseMaps, overlayMaps, {"collapsed": isSmallScreen}).addTo(map);
|
|
if (!isSmallScreen) {
|
|
infoBoxes.branches.addTo(map)
|
|
}
|
|
}
|
|
}
|
|
|
|
modeButton.addEventListener('click', switchMode, false);
|
|
|
|
function getFinesColor(f) {
|
|
return f == 'no' ? '#4dac26' :
|
|
f == 'yes' ? '#d01c8b' :
|
|
f == 'adults' ? '#f1b6da' :
|
|
f == 'by_lga' ? '#abd9e9' :
|
|
f == 'no_unconfirmed' ? '#b8e186' : '#bbb';
|
|
}
|
|
|
|
function getIlsColor(f) {
|
|
return f == 'AIT Aurora' ? '#d16a6e' :
|
|
f == 'Champ LMSi' ? '#ff00db' :
|
|
f == 'Civica Spydus' ? '#800080' :
|
|
f == 'DECD Bookmark' ? '#e1153e' :
|
|
f == 'Follett Destiny' ? '#df4917' :
|
|
f == 'Infor V-smart' ? '#e174c1' :
|
|
f == 'Innovative Sierra' ? '#ff0000' :
|
|
f == 'Koha ILS' ? '#2fbf2f' :
|
|
f == 'Libero' ? '#ffa500' :
|
|
f == 'Locally developed' ? '#bfdf17' :
|
|
f == 'OCLC Amlib' ? '#ddb372' :
|
|
f == 'OCLC WorldCat' ? '#3b2fbf' :
|
|
f == 'OCLC WorldShare' ? '#2fbf97' :
|
|
f == 'Sirsi Dynix Horizon' ? '#ffff00' :
|
|
f == 'Sirsi Dynix Symphony' ? '#115583' :
|
|
f == 'Softlink Liberty' ? '#00f9ff' :
|
|
f == 'SumWare Athenaeum' ? '#ff3232' : '#bbb';
|
|
}
|
|
|
|
// highlight feature on mouse hover
|
|
function highlightFeature(e) {
|
|
const layer = e.target;
|
|
layer.setStyle({
|
|
weight: 6,
|
|
color: '#FF3961',
|
|
dashArray: "0",
|
|
fillOpacity: 0
|
|
});
|
|
|
|
if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
|
|
layer.bringToFront();
|
|
}
|
|
if (!isSmallScreen) {
|
|
infoBoxes.serviceInfo.addTo(map)
|
|
infoBoxes.serviceInfo.update(layer.feature.properties)
|
|
}
|
|
}
|
|
|
|
|
|
function zoomToFeature(e, props) {
|
|
map.fitBounds(e.target.getBounds());
|
|
e.target.bindPopup(`
|
|
<strong>${props.name}</strong>` +
|
|
`<p>Fines: ` +
|
|
(
|
|
props.fines === "no" ? "No" :
|
|
props.fines == "no_unconfirmed" ? "Probably no" :
|
|
props.fines === "yes" ? "Yes" :
|
|
props.fines == "adults" ? "No for children" :
|
|
props.fines == "by_lga" ? "Varies by LGA" : "Unknown"
|
|
) +
|
|
`<br/>Loans : ` +
|
|
(!props.standard_loan_weeks || props.standard_loan_weeks == "?" ? `Unknown` : `${props.standard_loan_weeks} weeks`) +
|
|
`<br/>Software : ` +
|
|
(!props.ILS || props.ILS == "?" ? `Unknown` : `${props.ILS}`) +
|
|
`</p>`
|
|
).openPopup()
|
|
}
|
|
|
|
// clear on mouseout
|
|
function resetHighlight(e, layer) {
|
|
layer.resetStyle(e.target);
|
|
infoBoxes.serviceInfo.remove()
|
|
}
|
|
|
|
// this is used to add general info when each layer is added
|
|
function addLegend() {
|
|
this._div = L.DomUtil.create('div', 'info')
|
|
this.update();
|
|
return this._div;
|
|
}
|
|
|
|
// FINES LEGEND
|
|
infoBoxes.fines.onAdd = addLegend;
|
|
infoBoxes.fines.update = function (props) {
|
|
this._div.innerHTML =
|
|
`<p>Hover over an area for more information</p>
|
|
<section>
|
|
<div><div class="circle" style="background-color: #4dac26"></div>Fine free</div>
|
|
<div><div class="circle" style="background-color: #b8e186"></div>Fine free (unconfirmed)</div>
|
|
<div><div class="circle" style="background-color: #f1b6da"></div>Fine free for children</div>
|
|
<div><div class="circle" style="background-color: #abd9e9"></div>Fine policy varies</div>
|
|
<div><div class="circle" style="background-color: #d01c8b"></div>Fines for all users</div>
|
|
<div><div class="circle" style="background-color: #bbb"></div>Unknown (help me find out!)</div>
|
|
</section>
|
|
`
|
|
};
|
|
|
|
// BRANCH LOCATIONS LEGEND
|
|
infoBoxes.branches.onAdd = addLegend;
|
|
infoBoxes.branches.update = function (props) {
|
|
this._div.innerHTML = `
|
|
<h4>Library Branches</h4>
|
|
<p>Circles represent an 800 metre radius from the library location. This is the distance generally used by urban planners to represent "conceptually within walking distance" for most people.</p>
|
|
`};
|
|
if (!isSmallScreen) {
|
|
infoBoxes.branches.addTo(map) // add by default it larger screen
|
|
}
|
|
|
|
// STANDARD LOAN PERIOD LEGEND
|
|
infoBoxes.loanPeriod.onAdd = addLegend;
|
|
infoBoxes.loanPeriod.update = function (props) {
|
|
this._div.innerHTML = `
|
|
<section>
|
|
<div><div class="circle" style="background:
|
|
radial-gradient(4px 4px at 6px 6px, #3a3a3a 50%, transparent 75%),
|
|
radial-gradient(4px 4px at 16px 6px, #3a3a3a 50%, transparent 75%),
|
|
radial-gradient(4px 4px at 2px 12px, #3a3a3a 50%, transparent 75%),
|
|
radial-gradient(4px 4px at 12px 12px, #3a3a3a 50%, transparent 75%),
|
|
radial-gradient(4px 4px at 20px 12px, #3a3a3a 50%, transparent 75%),
|
|
radial-gradient(4px 4px at 8px 18px, #3a3a3a 50%, transparent 75%);
|
|
background-repeat: no-repeat;
|
|
border: 1px solid black;
|
|
"></div>2 weeks</div>
|
|
<div><div class="circle" style="background: repeating-linear-gradient(
|
|
0deg,
|
|
#3a3a3a,
|
|
#3a3a3a 2px,
|
|
#fff 2px,
|
|
#3a3a3a 4px
|
|
)"></div>3 weeks</div>
|
|
<div><div class="circle" style="background: repeating-linear-gradient(
|
|
45deg,
|
|
#3a3a3a,
|
|
#3a3a3a 3px,
|
|
#fff 1px,
|
|
#3a3a3a 4px
|
|
)"></div>4 weeks</div>
|
|
<div><div class="circle" style="background: repeating-linear-gradient(
|
|
135deg,
|
|
#fff,
|
|
#fff 8px,
|
|
#3a3a3a 2px,
|
|
#fff 10px
|
|
)"></div>6 weeks</div>
|
|
<div><div class="circle" style="background-color: #bbb"></div>Unknown (help me find out!)</div>
|
|
</section>
|
|
`
|
|
};
|
|
|
|
// FOCUSSED AREA INFOBOX (pops up on top left)
|
|
infoBoxes.serviceInfo.onAdd = addLegend;
|
|
infoBoxes.serviceInfo.update = function(props) {
|
|
if (props) {
|
|
this._div.innerHTML = `<h4>${props.name}</h4>` +
|
|
'<section><p>' +
|
|
(
|
|
props.fines === "no" ? "Fine free for overdue items" :
|
|
props.fines == "no_unconfirmed" ? "Probably no overdue fines" :
|
|
props.fines === "yes" ? "Overdue fines for all users" :
|
|
props.fines == "adults" ? "No overdue fines for children" :
|
|
props.fines == "by_lga" ? "Fine policy varies" : "No fines data"
|
|
) + '<br/>' +
|
|
(!props.standard_loan_weeks || props.standard_loan_weeks == "?" ? `No loan period data` : `${props.standard_loan_weeks} week loans`) +
|
|
`<br/>Software: ` +
|
|
(!props.ILS || props.ILS == "?" ? `Unknown` : `${props.ILS}`) +
|
|
'</p></section>'
|
|
}
|
|
}
|
|
|
|
// loan period layer is always at bottom
|
|
map.on('overlayadd', l => {
|
|
if (l.name == "Loan Period") {
|
|
loanPeriod.bringToBack()
|
|
}
|
|
})
|
|
|
|
// change overlays depending on base layer
|
|
// we remove info boxes before adding them again where relevant
|
|
// this is so we don't accidentally stack up multiple copies dependng on user
|
|
// navigation journey
|
|
map.on('baselayerchange', l => {
|
|
for (let k in infoBoxes) {
|
|
infoBoxes[k].remove()
|
|
}
|
|
if (l.name == "Rules") {
|
|
modeButton.setAttribute('class', 'hidden'); // hide the mode button when it's not relevant
|
|
mapControl.addOverlay(fines, "Fines")
|
|
mapControl.addOverlay(loanPeriod, "Loan Period")
|
|
loanPeriod.addTo(map)
|
|
fines.addTo(map)
|
|
for (let i in overlayMaps ) {
|
|
mapControl.removeLayer(overlayMaps[i])
|
|
overlayMaps[i].remove()
|
|
}
|
|
ils.remove()
|
|
if (!isSmallScreen) { // only add infoboxes to larger screens
|
|
infoBoxes.loanPeriod.addTo(map)
|
|
infoBoxes.fines.addTo(map)
|
|
}
|
|
} else if (l.name == "Library Management Software") {
|
|
modeButton.setAttribute('class', 'hidden'); // hide the mode button when it's not relevant
|
|
// remove any other layers
|
|
for (let i in overlayMaps ) {
|
|
mapControl.removeLayer(overlayMaps[i])
|
|
overlayMaps[i].remove()
|
|
}
|
|
mapControl.removeLayer(fines)
|
|
mapControl.removeLayer(loanPeriod)
|
|
fines.remove()
|
|
loanPeriod.remove()
|
|
// add ILS layer
|
|
ils.addTo(map)
|
|
} else {
|
|
// if 'Libraries' layer...
|
|
mapControl.removeLayer(fines)
|
|
mapControl.removeLayer(loanPeriod)
|
|
fines.remove()
|
|
loanPeriod.remove()
|
|
ils.remove()
|
|
branches.addTo(map)
|
|
for (let k in overlayMaps ) {
|
|
mapControl.addOverlay(overlayMaps[k], k)
|
|
}
|
|
if (!isSmallScreen) {
|
|
infoBoxes.branches.addTo(map)
|
|
}
|
|
modeButton.setAttribute('class', 'visible');
|
|
}
|
|
})
|
|
|
|
// remove the loading message once everything is loaded
|
|
const loadingDiv = document.getElementById("loading");
|
|
loadingDiv.remove()
|
|
|
|
}) |