diff --git a/map.js b/map.js index 7b1e121..b33171a 100644 --- 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("" + point["Title"] + "
" + point["Description"])); + }).bindPopup("" + point["Title"] + "
" + 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 + ' mapsfor.us
Mapsfor.us was created by Code for Atlanta
' + 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 - // }); - // }); -}; \ No newline at end of file +};