public_library_map/website/load-map.js

556 lines
17 KiB
JavaScript
Raw Normal View History

const boundaries = fetch('data/boundaries.topo.json')
.then( response => response.json())
2021-01-22 18:29:30 +11:00
const branchesCsv = fetch('data/public_library_locations.csv')
.then( response => response.text());
2021-01-22 18:29:30 +11:00
const ikcCsv = fetch('data/indigenous_knowledge_centre_locations.csv')
.then( response => response.text());
2021-01-22 18:29:30 +11:00
const mechanics = fetch('data/mechanics_institute_locations.csv')
.then( response => response.text());
2021-01-22 18:29:30 +11:00
const nslaBranches = fetch('data/nsla_library_locations.csv')
.then( response => response.text());
const caul = fetch('data/academic_library_locations.csv')
.then( response => response.text());
var isSmallScreen = window.screen.availWidth < 800;
function BaseMap(id) {
this.id = id;
return 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>',
2021-01-17 19:47:25 +11:00
maxZoom: 18,
id: id,
tileSize: 512,
zoomOffset: -1,
accessToken: mapBoxToken
})
}
2021-01-17 19:47:25 +11:00
function getIlsColor(f) {
return f == 'AIT Aurora' ? '#d16a6e' :
f == 'Champ LMSi' ? '#ff00db' :
f == 'Civica Spydus' ? '#800080' :
f == 'DECD Bookmark' ? '#e1153e' :
f == 'Ex Libris Alma' ? '#ff6500' :
2024-02-11 14:20:30 +11:00
f == 'FOLIO' ? '#0dc5ff' :
f == 'Follett Destiny' ? '#df4917' :
f == 'Infor V-smart' ? '#e174c1' :
f == 'Innovative Polaris' ? '#8e7cc3' :
f == 'Innovative Sierra' ? '#ff0000' :
f == 'Koha ILS' ? '#2fbf2f' :
f == 'Libero' ? '#ffa500' :
f == 'Locally developed' ? '#bfdf17' :
f == 'OCLC Amlib' ? '#ddb372' :
f == 'OCLC WorldShare' ? '#2fbf97' :
f == 'SirsiDynix Horizon' ? '#ffff00' :
f == 'SirsiDynix Symphony' ? '#115583' :
f == 'Softlink Liberty' ? '#00f9ff' :
f == 'SumWare Athenaeum' ? '#ff3232' : '#bbb';
}
function LocationsLayer(data, color, outline, type) {
this.data = data;
this.color = color;
this.outline = outline;
this.type = type;
return L.layerGroup([
L.geoCsv(data, {
firstLineTitles: true,
fieldSeparator: ',',
onEachFeature: function (feature, layer) {
if (type === 'ils') {
if (feature.properties.discovery) {
layer.bindPopup(
`<strong>${feature.properties.town}</strong>` +
`<p>${feature.properties.ils}</p>` +
`<p>${feature.properties.discovery}</p>`
)
} else {
layer.bindPopup(
`<strong>${feature.properties.town}</strong>` +
`<p>${feature.properties.ils}</p>`
)
}
} else {
layer.bindPopup(
`<strong>${feature.properties.town}</strong>` +
`<p>${feature.properties.address}<br/>` +
`phone: ${feature.properties.phone}</p>`
)
}
},
pointToLayer: function (f, latlng) {
let col = type === 'ils' ? getIlsColor(f.properties.ils) : color;
return L.circle(latlng, {color: col, radius: outline}) // 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) {
let col = type === 'ils' ? getIlsColor(f.properties.ils) : color;
return L.circleMarker(latlng, {color: col, radius: 2, fill: true})
}
})
])
}
Promise.all([boundaries, branchesCsv, ikcCsv, mechanics, nslaBranches, caul])
.then( data => {
// add tile layers for each base map
const baseMap = new BaseMap('mapbox/dark-v10')
const baseRules = new BaseMap('mapbox/light-v10')
const baseIls = new BaseMap('mapbox/light-v10')
// attach map to #mapid div above and centre
const map = L.map('mapid', {
center: [-27.00, 133.000],
zoom: isSmallScreen ? 4 : 5,
layers: [baseMap]
});
// LOCATION LAYERS
const branches = new LocationsLayer(data[1], '#FF3961', 800)
const ikcs = new LocationsLayer(data[2], '#76DBA7', 800)
const mechsAndSoA = new LocationsLayer(data[3], 'rgb(255,165,0)', 800)
const otherLibs = new LocationsLayer(data[4], '#75f857', 800)
const nslaLibs = new LocationsLayer(data[4], '#FF3961', 20000, 'ils')
const academicLibs = new LocationsLayer(data[5], '#0073A1', 5000, 'ils')
// add to the initial map on load
branches.addTo(map)
ikcs.addTo(map)
mechsAndSoA.addTo(map)
otherLibs.addTo(map)
// Use TopoJSON
// -----------------------------------------------------------------
// This snippet Copyright (c) 2013 Ryan Clark (MIT License)
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);
2021-01-17 19:47:25 +11:00
}
},
});
// -----------------------------------------------------------------
2021-01-17 19:47:25 +11:00
// 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
2021-01-17 19:47:25 +11:00
}
// 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
})
}
});
// 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 = {}
function setGeneral() {
overlayMaps = {
'Settler Knowledge Centres' : branches,
'Indigenous Knowledge Centres' : ikcs,
'Mechanics Institutes' : mechsAndSoA,
'Colonial Knowledge Centres' : otherLibs
2021-01-17 19:47:25 +11:00
}
modeButton.setAttribute('class', 'visible');
modeButton.innerText = 'View in Colonial Mode';
2021-01-17 19:47:25 +11:00
}
function setColonial() {
overlayMaps = {
'Public Libraries' : branches,
'Indigenous Knowledge Centres' : ikcs,
'Mechanics Institutes' : mechsAndSoA,
'National & State Libraries' : otherLibs
};
modeButton.setAttribute('class', 'visible');
modeButton.innerText = 'View in Standard Mode';
2021-01-17 19:47:25 +11:00
}
if (sessionStorage.getItem('mapMode') === 'colonial') {
setColonial()
} 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 colonial
function switchMode() {
if (sessionStorage.getItem('mapMode') === 'colonial') {
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', 'colonial');
setColonial()
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';
2021-01-17 19:47:25 +11:00
}
// 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}`) +
`<br/>Website: ` +
(!props.website || props.website == '?' ? `Unknown` : `<a target="_blank" href="`+ `${props.website}` + `" >` + `${props.website}` + `</a>`) +
`</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>
2024-06-29 11:43:14 +10:00
<div><div class="circle fine-free"></div>Fine free</div>
<div><div class="circle fine-free-unconfirmed"></div>Fine free (unconfirmed)</div>
<div><div class="circle fine-free-kids"></div>Fine free for children</div>
<div><div class="circle fine-varies"></div>Fine policy varies</div>
<div><div class="circle fine-all"></div>Fines for all users</div>
<div><div class="circle fine-unknown"></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 = `
2021-01-17 19:47:25 +11:00
<section>
2024-06-29 12:01:10 +10:00
<div><div class="circle two-weeks"></div>2 weeks</div>
<div><div class="circle three-weeks"></div>3 weeks</div>
<div><div class="circle four-weeks"></div>4 weeks</div>
<div><div class="circle six-weeks"></div>6 weeks</div>
<div><div class="circle unknown-weeks"></div>Unknown (help me find out!)</div>
2021-01-17 19:47:25 +11:00
</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>'
}
2021-01-17 19:47:25 +11:00
}
// loan period layer is always at bottom
map.on('overlayadd', l => {
if (l.name == "Loan Period") {
loanPeriod.bringToBack()
2021-01-17 19:47:25 +11:00
}
})
// 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
var ilsMaps = {
"Academic Libraries": academicLibs,
"NSLA Libraries" : nslaLibs,
"Local Libraries" : ils
}
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()
}
for (let i in ilsMaps ) {
mapControl.removeLayer(ilsMaps[i])
ilsMaps[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)
nslaLibs.addTo(map)
academicLibs.addTo(map)
for (let k in ilsMaps ) {
mapControl.addOverlay(ilsMaps[k], k)
}
} else {
// if 'Libraries' layer...
mapControl.removeLayer(fines)
mapControl.removeLayer(loanPeriod)
fines.remove()
loanPeriod.remove()
for (let i in ilsMaps ) {
mapControl.removeLayer(ilsMaps[i])
ilsMaps[i].remove()
}
branches.addTo(map)
for (let k in overlayMaps ) {
mapControl.addOverlay(overlayMaps[k], k)
}
if (!isSmallScreen) {
infoBoxes.branches.addTo(map)
}
modeButton.setAttribute('class', 'visible');
2021-01-17 19:47:25 +11:00
}
})
// remove the loading message once everything is loaded
const loadingDiv = document.getElementById("loading");
loadingDiv.remove()
})