Add basemap on map load

public/grijalva/index.html

@@ -156,8 +156,9 @@
         <script type="text/javascript" src="../js/Leaflet.Sync.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
         <script src="https://npmcdn.com/@turf/turf/turf.min.js"></script>
-        
+        <script type="text/javascript" src="../js/jszip.min.js"></script>
         <script src="../js/grijalva_functions.js"></script>
+        <script src="../js/grijalva_basemap.js"></script>
         <script src="../js/grijalva_charts.js"></script>
 
     <!--<script>

public/js/grijalva_charts.js

@@ -303,7 +303,7 @@ function makeIndicatorGraph() {
 
                     xaxisTicks.transition()
                         .duration(500)
-                        .call( // FIXME: this call causes a "translate(NaN,0)" ...
+                        .call(
                             d3.axisBottom(xLine)
                             .tickValues(monthsInGraph)
                             .tickFormat("")

public/js/grijalva_functions.js

@@ -6,7 +6,7 @@
  */
 
 /* globals omnivore, Promise, chroma, makeBaseMap, makeIndicatorGraph, getData */
-/* exported userFiles, userDates, layerControl */
+/* exported indicators. userFiles, userDates, timeParse, layerControl, updateCharts */
 
 let timeParse,
     timeFormat,
@@ -409,6 +409,7 @@ const populateMap = (mapData) => {
         };
 
         layerControl = L.control.layers(baseLayers, overlays).addTo(map);
+        makeBaseMap(); // basemap.js
     });
 
     // Define charts with reusable components
@@ -443,9 +444,6 @@ const populateMap = (mapData) => {
         let option = $("#indicatorSelect").val(); // option selected from dropdrown
         d3.select(indicatorVars[option].container).select("svg text.title").classed("active", true);
     });
-
-    // TODO: basemap
-    //makeBaseMap(); // basemap.js
 }
 
 const updateMap = (mapData) => {
@@ -502,7 +500,25 @@ const updateMap = (mapData) => {
     updateCharts();
 }
 
-const updateCharts = () => {
+const updateCharts = async () => {
+
+    // TODO: get data inside drawn polygons
+    // if user has drawn polygons, update chart with data inside selection
+    //if (drawnItems.getBounds().isValid()) {
+    /*if (drawnItems.toGeoJSON().features.length != 0) {
+        //console.time("selection");
+        let selectionData = await getDataInSelection();
+        //console.timeEnd("selection");
+        indicators.forEach( indicator => {
+            indicatorVars[indicator].chart.data(await summarizeData(selectionData, indicator));
+        });
+    } else {
+        // otherwise use all data
+        indicators.forEach( indicator => {
+            indicatorVars[indicator].chart.data( await getData(indicator));
+        });
+    }*/
+
     indicators.map( async (indicator) => {
         indicatorVars[indicator].chart.data( await getData(indicator));
     });