Allows map layers (old repo #4)

CivicTechAtlanta · Mar 25, 2016 · d93108e · d93108e
1 parent 54f8868
commit d93108e
Showing 1 changed file with 60 additions and 37 deletions.
diff --git a/map.js b/map.js
@@ -38,38 +38,61 @@ window.onload = function () {
     };
   }
 
+  // possibly refactor this so you can add points to layers without knowing what all the layers are beforehand
+  // run this function after document is loaded but before mapPoints()
+  function determineLayers(points) {
+    var layerNamesFromSpreadsheet = [];
+    var layers = {};
+    for (var i in points) {
+      var pointLayerNameFromSpreadsheet = points[i].Layer;
+      if (layerNamesFromSpreadsheet.indexOf(pointLayerNameFromSpreadsheet) === -1) {
+        layerNamesFromSpreadsheet.push(pointLayerNameFromSpreadsheet);
+      }
+    }
+
+    // if none of the points have named layers or if there was only one name, return no layers
+    if (layerNamesFromSpreadsheet.length === 1) {
+      layers = undefined;
+    } else {
+      for (var i in layerNamesFromSpreadsheet) {
+        var layerNameFromSpreadsheet = layerNamesFromSpreadsheet[i];
+        layers[layerNameFromSpreadsheet] = L.layerGroup();
+        layers[layerNameFromSpreadsheet].addTo(map);
+      }
+    }
+    return layers;
+  }
+
   // only run this after Tabletop has loaded (onTabletopLoad())
-  function mapPoints(points) {
+  function mapPoints(points, layers) {
     var markerArray = [];
     // check that map has loaded before adding points to it?
     for (var i in points) {
       var point = points[i];
       if (point.Latitude !== "" && point.Longitude !== "") {
-        markerArray.push(L.marker([point.Latitude, point.Longitude], {
+        var marker = L.marker([point.Latitude, point.Longitude], {
           icon: createMarkerIcon(point['Marker Icon'], 'fa', point['Marker Color'].toLowerCase(), point['Marker Icon Color'])
-        }).bindPopup("<b>" + point["Title"] + "</b><br>" + point["Description"]));
+        }).bindPopup("<b>" + point["Title"] + "</b><br>" + point["Description"]);
+        if (layers !== undefined && layers.length !== 1) {
+          marker.addTo(layers[point.Layer]);
+        }
+        markerArray.push(marker);
       }
     }
 
     var group = L.featureGroup(markerArray);
-
-    // cluster markers, or don't
-    if (documentSettings["Markercluster:"] === 'on') {
-        var cluster = L.markerClusterGroup({
-            polygonOptions: {
-                opacity: 0.3,
-                weight: 3
-            }
-        });
-
-        cluster.addLayer(group);
-        map.addLayer(cluster);
+    // if layers.length === 0, add points to map instead of layer
+    if (layers === undefined || layers.length === 0) {
+      clusterMarkers(group);
     } else {
-        map.addLayer(group);
+      L.control.layers(null, layers, {
+        collapsed: false
+      }).addTo(map);
     }
-
     centerAndZoomMap(group);
+
   }
+
   // reformulate documentSettings as a dictionary, e.g.
   // {"webpageTitle": "Leaflet Boilerplate", "infoPopupText": "Stuff"}
   function createDocumentSettings(settings) {
@@ -82,12 +105,29 @@ window.onload = function () {
     }
   }
 
+  function clusterMarkers(group) {
+    // cluster markers, or don't
+    if (documentSettings["Markercluster:"] === 'on') {
+        var cluster = L.markerClusterGroup({
+            polygonOptions: {
+                opacity: 0.3,
+                weight: 3
+            }
+        });
+        cluster.addLayer(group);
+        map.addLayer(cluster);
+    } else {
+        map.addLayer(group);
+    }
+  }
+
   function onTabletopLoad() {
-    // documentSettings = tabletop.sheets(constants.informationSheetName).elements;
     createDocumentSettings(tabletop.sheets(constants.informationSheetName).elements);
     addBaseMap();
     document.title = documentSettings["Webpage Title:"];
-    mapPoints(tabletop.sheets(constants.pointsSheetName).elements);
+    var points = tabletop.sheets(constants.pointsSheetName).elements;
+    var layers = determineLayers(points);
+    mapPoints(points, layers);
   }
 
   var tabletop = Tabletop.init( { key: constants.googleDocID, // from constants.js
@@ -100,8 +140,6 @@ window.onload = function () {
       .setContent(info)
       .openOn(map);
   }
-
-  // map
 
   function addBaseMap() {
     var basemap = documentSettings["Tile Provider:"] === '' ? 'Stamen.TonerLite' : documentSettings["Tile Provider:"];
@@ -119,19 +157,4 @@ window.onload = function () {
     attributionHTML = mapCreatorAttribution + ' <a href="http://mapsfor.us/">mapsfor.us</a><br><a href="http://mapsfor.us/">Mapsfor.us</a> was created by <a href="http://www.codeforatlanta.org/">Code for Atlanta</a><br>' + attributionHTML;
     document.getElementsByClassName("leaflet-control-attribution")[0].innerHTML = attributionHTML;
   }
-
-  // var counties = {
-  //   "Fulton": fultonLayer
-  // };
-
-  // L.control.layers(null, null, {
-  //   collapsed: false
-  // }).addTo(map);
-
-  // // change zoom and center of map when county changes
-  // map.on('baselayerchange', function(e) {
-  //   map.fitBounds(e.layer.getBounds(), {
-  //     maxZoom: 14
-  //   });
-  // });
-};
+};