Merge pull request #121 from hughrun/dry

make code more DRY

website/load-map.js

@@ -15,35 +15,60 @@ const nslaBranches = fetch('data/nsla_library_locations.csv')
 
 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>',
     maxZoom: 18,
-      id: 'mapbox/dark-v10',
+      id: id,
       tileSize: 512,
       zoomOffset: -1,
       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
   const map = L.map('mapid', {
@@ -52,8 +77,20 @@ Promise.all([boundaries, branchesCsv, ikcCsv, mechanics, nslaBranches])
       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
   // -----------------------------------------------------------------
+  // This snippet Copyright (c) 2013 Ryan Clark (MIT License)
   L.TopoJSON = L.GeoJSON.extend({
     addData: function (jsonData) {
       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
@@ -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
   const ils = new L.TopoJSON(data[0], {
     style: function(feature){
@@ -318,12 +226,7 @@ Promise.all([boundaries, branchesCsv, ikcCsv, mechanics, nslaBranches])
   // change the branches overlay names depending on the mode.
   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() {
     overlayMaps = {