custom mapzen, load before show map

Author: JackDougherty

README.md

@@ -14,7 +14,7 @@ Developed by [Ilya Ilyankou](https://github.com/ilyankou) and [Jack Dougherty](h
 - Leaflet v1.0.3 https://leafletjs.com (BSD-2-Clause)
 - jQuery v3.2.0 https://code.jquery.com (MIT)
 - leaflet-providers (v1.1.15, manually updated for Carto https) https://github.com/leaflet-extras/leaflet-providers (BSD-2-Clause)
-- Mapzen Search geocoding plugin (v1.8.1) https://github.com/mapzen/leaflet-geocoder (MIT)
+- Mapzen Search geocoding plugin (v1.8.1, customized to display a blue circle around the search result) https://github.com/mapzen/leaflet-geocoder (MIT)
 - leaflet-locatecontrol (v0.60.0) https://github.com/domoritz/leaflet-locatecontrol (MIT)
 - Leaflet.markercluster (v1.0.4) https://github.com/Leaflet/Leaflet.markercluster (MIT)
 - Leaflet.MarkerCluster.LayerSupport (v.1.0.3) https://github.com/ghybs/Leaflet.MarkerCluster.LayerSupport (MIT)
@@ -28,6 +28,6 @@ Developed by [Ilya Ilyankou](https://github.com/ilyankou) and [Jack Dougherty](h
 - jQuery-CSV (v0.71) https://github.com/evanplaice/jquery-csv (MIT)
 - DataTables (v1.10.13) by SpryMedia Ltd. https://datatables.net (MIT)
 
-## Please submit any pull requests to our DEV repo 
+## Please submit any pull requests to our DEV repo
 - Leaflet Map FOR DEVELOPMENT https://jackdougherty.github.io/leaflet-maps-with-google-sheets-dev/index.html
 - Google Sheet FOR DEVELOPMENT https://docs.google.com/spreadsheets/d/1_xjrH3gSImzRKqIkhRAqpAAMjH387yaBWfGbidkKtqM/

index.html

@@ -34,8 +34,8 @@
   <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/leaflet.markercluster.js"></script>
 
   <!-- Mapzen Search -->
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet-geocoder-mapzen/1.8.1/leaflet-geocoder-mapzen.css">
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-geocoder-mapzen/1.8.1/leaflet-geocoder-mapzen.js"></script>
+  <link rel="stylesheet" href="scripts/leaflet-geocoder/leaflet-geocoder-mapzen.css">
+  <script src="scripts/leaflet-geocoder/leaflet-geocoder-mapzen.js"></script>
 
   <!-- Locate Control -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet-locatecontrol/0.60.0/L.Control.Locate.min.css" />

scripts/map.js

@@ -1,12 +1,16 @@
 $(window).on('load', function() {
   var documentSettings = {};
-  var     markerColors = [];
+  var markerColors = [];
 
   var polygonSettings = [];
   var polygonSheets = 1;
   var currentPolygonSheet = 0;
   var polygonsLegend;
 
+  var completePoints = false;
+  var completePolygons = false;
+  var completePolylines = false;
+
   /**
    * Returns an Awesome marker with specified parameters
    */
@@ -251,10 +255,9 @@ $(window).on('load', function() {
         searching: false,
         columns: generateColumnsArray(),
       });
-
-      updateTable();
     }
 
+    completePoints = true;
     return group;
   }
 
@@ -397,6 +400,8 @@ $(window).on('load', function() {
     if (legendPos == 'off') {
       $('.polygons-legend').hide();
     }
+
+    completePolygons = true;
   }
 
   /**
@@ -565,6 +570,8 @@ $(window).on('load', function() {
     if (points.length > 0) {
       layers = determineLayers(points);
       group = mapPoints(points, layers);
+    } else {
+      completePoints = true;
     }
 
     centerAndZoomMap(group);
@@ -573,11 +580,15 @@ $(window).on('load', function() {
     var polylines = mapData.sheets(constants.polylinesSheetName).elements;
     if (polylines.length > 0) {
       processPolylines(polylines);
+    } else {
+      completePolylines = true;
     }
 
     // Add polygons
     if (getPolygonSetting(0, '_polygonsGeojsonURL')) {
       processPolygons();
+    } else {
+      completePolygons = true;
     }
 
     // Add Mapzen search control
@@ -615,7 +626,7 @@ $(window).on('load', function() {
     // Change Map attribution to include author's info + urls
     changeAttribution();
 
-    // Generate icons for markers legend
+    // Append icons to categories in markers legend
     $('#points-legend form label span').each(function(i) {
       var legendIcon = (markerColors[i].indexOf('.') > 0)
         ? '<img src="' + markerColors[i] + '" class="markers-legend-icon">'
@@ -625,16 +636,24 @@ $(window).on('load', function() {
       $(this).prepend(legendIcon);
     });
 
-    // All processing has been done, so hide the loader and make the map visible
-    $('#map').css('visibility', 'visible');
-    $('.loader').hide();
+    // When all processing is done, hide the loader and make the map visible
+    showMap();
 
-    // Open intro popup window in the center of the map
-    if (getSetting('_introPopupText') != '') {
-      initIntroPopup(getSetting('_introPopupText'), map.getCenter());
-    };
+    function showMap() {
+      if (completePoints && completePolylines && completePolygons) {
+        $('#map').css('visibility', 'visible');
+        $('.loader').hide();
 
-    togglePolygonLabels();
+        // Open intro popup window in the center of the map
+        if (getSetting('_introPopupText') != '') {
+          initIntroPopup(getSetting('_introPopupText'), map.getCenter());
+        };
+
+        togglePolygonLabels();
+      } else {
+        setTimeout(showMap, 50);
+      }
+    }
   }
 
   /**
@@ -730,6 +749,10 @@ $(window).on('load', function() {
               });
             }
           }
+
+          if (p.length == index + 1) {
+            completePolylines = true;
+          }
         };
       }(i));
     }