clean up dependencies in map examples and readme

publiclab · Feb 13, 2020 · 611c4a7 · 611c4a7
1 parent 6069264
commit 611c4a7
Show file tree

Hide file tree

Showing 4 changed files with 109 additions and 85 deletions.
diff --git a/README.md b/README.md
@@ -117,10 +117,9 @@ Dependencies:
 - Requires Bootstrap and jquery to be installed
 
 ```
-  <!-- Bootstrap --> 
-  <link rel="stylesheet" href="../node_modules\bootstrap\dist\css\bootstrap.min.css">
   <script src="../node_modules\jquery\dist\jquery.min.js"></script>
   <script src="../node_modules\bootstrap\dist\js\bootstrap.min.js"></script>
+  <link rel="stylesheet" href="../node_modules\bootstrap\dist\css\bootstrap.min.css">
 ```
 
 ```js
@@ -212,26 +211,44 @@ We're going to try spinning this out into its own library; see: https://github.c
 
 ### General (required for all layers) :
 
-           <script src="../dist/LeafletEnvironmentalLayers.js"></script>
-           <link href="../node_modules/leaflet/dist/leaflet.css" rel="stylesheet">
-	   <script src="../node_modules/leaflet-spin/example/spin/dist/spin.min.js"></script>  <!-- Compulsory to add -->
- 	   <script src="../node_modules/leaflet-spin/example/leaflet.spin.min.js"></script>
+    <script src="../node_modules\jquery\dist\jquery.min.js"></script>
+    <script src="../dist/LeafletEnvironmentalLayers.js"></script>
+    <link href="../node_modules/leaflet/dist/leaflet.css" rel="stylesheet" />
+    <link href="../dist/LeafletEnvironmentalLayers.css" rel="stylesheet" />
+    <link href="../node_modules\@fortawesome\fontawesome-free\css\all.min.css" rel="stylesheet" />
+
+### Layers Menu
+
+    <script src="../node_modules\bootstrap\dist\js\bootstrap.min.js"></script>
+    <link rel="stylesheet" href="../node_modules\bootstrap\dist\css\bootstrap.min.css">
+
+  These are not required if you use the old menu `simpleLayerControl: true`
 
 ### To use Wisconsin Non-Metallic Layer :
 
-            <script src="https://unpkg.com/esri-leaflet@2.2.3/dist/esri-leaflet.js"></script>
-            <script src="https://unpkg.com/esri-leaflet-renderers@2.0.6"></script>
+    <script src="https://unpkg.com/esri-leaflet@2.2.3/dist/esri-leaflet.js"></script>
+    <script src="https://unpkg.com/esri-leaflet-renderers@2.0.6"></script>
 
-              var Wisconsin_NM = wisconsinLayer(map) ;
+    var Wisconsin_NM = wisconsinLayer(map) ;
 
 ### To use Fractracker Mobile Layer :
-            var FracTracker_mobile = L.geoJSON.fracTrackerMobile();
 
+    var FracTracker_mobile = L.geoJSON.fracTrackerMobile();
 
 ### To use Purple Layer :
 
-			<script src="../node_modules/heatmap.js/build/heatmap.min.js"></script>
-			<script src="../node_modules/leaflet-heatmap/leaflet-heatmap.js"></script>
+		<script src="../node_modules/heatmap.js/build/heatmap.min.js"></script>
+		<script src="../node_modules/leaflet-heatmap/leaflet-heatmap.js"></script>
+
+### To use PLpeople Layer :
+These must be loaded before "../dist/LeafletEnvironmentalLayers.js"
+
+    <script src="../node_modules/leaflet-blurred-location/dist/Leaflet.BlurredLocation.js"></script>
+    <script src="../node_modules/leaflet.blurred-location-display/dist/Leaflet.BlurredLocationDisplay.js"></script>
+
+### To use Unearthing Layer :
+
+    <script src="../lib/glify.js"></script>
 
 
 ## Real Time Layers :
@@ -284,7 +301,7 @@ We're going to try spinning this out into its own library; see: https://github.c
 
 1.) Add link :
 
-       <script src="../lib/leaflet-fullUrlHash.js"></script>
+    <script src="../lib/leaflet-fullUrlHash.js"></script>
 
 2.) Once you have initialized the map (an instance of L.Map), add the following code :
 
@@ -295,69 +312,65 @@ We're going to try spinning this out into its own library; see: https://github.c
 
  ## Add all LEL Layers at once:
 
- 	 L.LayerGroup.EnvironmentalLayers().addTo(map);
+ 	  L.LayerGroup.EnvironmentalLayers().addTo(map);
 
-## Add all layers except some layers:
+## Add all layers except some specific layers:
 
-	 L.LayerGroup.EnvironmentalLayers({
-            exclude: ['mapknitter', 'clouds'],
-         }).addTo(map);
+	  L.LayerGroup.EnvironmentalLayers({
+      exclude: ['mapknitter', 'clouds'],
+    }).addTo(map);
 
-## Add some layers only:
+## Add only a limited list of layers:
 
-	 L.LayerGroup.EnvironmentalLayers({
-            include: ['mapknitter', 'clouds'],
-         }).addTo(map);
+	  L.LayerGroup.EnvironmentalLayers({
+      include: ['mapknitter', 'clouds'],
+    }).addTo(map);
 
-  The layers added to the 'include' option are displayed by default when the map is initialized
+## Add some layers and turn them on by default:
 
-## Add some layers and display them default:
+    L.LayerGroup.EnvironmentalLayers({
+      addLayersToMap: true,    // by default this is FALSE
+      include: ['mapknitter', 'clouds'],
+    }).addTo(map);
+
+## Turn on display of only specified layers:
+
+    L.LayerGroup.EnvironmentalLayers({
+      display: ['mapknitter', 'clouds'],
+    }).addTo(map);
 
-	 L.LayerGroup.EnvironmentalLayers({
-            addLayersToMap: true,    // by default this is FALSE
-            include: ['mapknitter', 'clouds'],
-         }).addTo(map);
+  Other layers can be turned on from the layer menu but only the listed layers will be displayed on the map on page load.
 
 ## Add base layers:
 
     L.LayerGroup.EnvironmentalLayers({
-            baseLayers: {               // Grayscale base map is used by default when this is undefined 
-             'Standard': baselayer1
-            },
-          }).addTo(map);
+      baseLayers: {               // Grayscale base map is used by default when this is undefined 
+        'Standard': baselayer1
+      },
+    }).addTo(map);
 
 ## Turn on Leaflet Hash in the URL:
 
-	 L.LayerGroup.EnvironmentalLayers({
-            exclude: ['mapknitter', 'clouds'],
+	  L.LayerGroup.EnvironmentalLayers({
 	    hash: true,             // by default this is FALSE
-         }).addTo(map);
+    }).addTo(map);
 
 ## Turn on embed control:
 
     L.LayerGroup.EnvironmentalLayers({
-          exclude: ['mapknitter', 'clouds'],
-          hash: true,                   // by default this is FALSE
-          embed: true,                  // by default this is FALSE
-          hostname: 'placeholder.org'   // by default this is set to 'publiclab.github.io'
+      embed: true,                  // by default this is FALSE
+      hostname: 'placeholder.org'   // by default this is set to 'publiclab.github.io'
     }).addTo(map);
 
   By adding a hostname, the embed code can point to the domain that hosts the maps.
 
 
-## Browse layers
+## New Layers Menu
 
-  The layer menu used by default groups similar layers, displays more information about the layers and filters them when out of bounds.
+  The layer menu used by default groups similar layers together, displays more information about the layers and filters them when out of bounds.
 
-  ### Dependencies
-      
-        <link rel="stylesheet" href="../node_modules\bootstrap\dist\css\bootstrap.min.css">
-        <script src="../node_modules\jquery\dist\jquery.min.js"></script>
-        <script src="../node_modules\bootstrap\dist\js\bootstrap.min.js"></script>
-        <link href="../dist/LeafletEnvironmentalLayers.css" rel="stylesheet" />
-
-  ### To use Leaflet's default layer control:
+  ### To use Leaflet's simple layer control:
 
     L.LayerGroup.EnvironmentalLayers({
-            simpleLayerControl: true,   // by default this is FALSE
-      }).addTo(map);
+      simpleLayerControl: true,   // by default this is FALSE
+    }).addTo(map);
diff --git a/example/index.html b/example/index.html
@@ -11,17 +11,22 @@
 
     <title>Leaflet Environmental Layers</title>
 
-    <!-- Bootstrap --> 
-    <link rel="stylesheet" href="../node_modules\bootstrap\dist\css\bootstrap.min.css">
-    <script src="../node_modules\jquery\dist\jquery.min.js"></script>
-    <script src="../node_modules\bootstrap\dist\js\bootstrap.min.js"></script>
-
-    <!-- Required for PLpeople layer -->
+    <!-- Required for PLpeople layer - must load before dist/LeafletEnvironmentalLayers.js -->
     <script src="../node_modules/leaflet-blurred-location/dist/Leaflet.BlurredLocation.js"></script>
     <script src="../node_modules/leaflet.blurred-location-display/dist/Leaflet.BlurredLocationDisplay.js"></script>
 
+    <!-- Required for all maps -->
+    <script src="../node_modules\jquery\dist\jquery.min.js"></script>
     <script src="../dist/LeafletEnvironmentalLayers.js"></script>
-    <script src="../src/windRoseLayer.js"></script>
+    <link href="../node_modules/leaflet/dist/leaflet.css" rel="stylesheet" />
+    <link href="../dist/LeafletEnvironmentalLayers.css" rel="stylesheet" />
+    <link href="../node_modules\@fortawesome\fontawesome-free\css\all.min.css" rel="stylesheet" />
+
+    <!-- Bootstrap - not needed if you use simpleLayerControl:true -->
+    <script src="../node_modules\bootstrap\dist\js\bootstrap.min.js"></script>
+    <link rel="stylesheet" href="../node_modules\bootstrap\dist\css\bootstrap.min.css">
+
+    <!-- Required for setting hash:true -->
     <script src="../lib/leaflet-fullUrlHash.js"></script>
 
     <!-- Required for purpleLayer -->
@@ -30,14 +35,12 @@
 
     <!-- Required for wisconsin Layer -->
     <script src="https://unpkg.com/esri-leaflet@2.2.3/dist/esri-leaflet.js"></script>
-    <!-- <script src="https://unpkg.com/esri-leaflet-renderers@2.0.6"></script> -->
+    <script src="https://unpkg.com/esri-leaflet-renderers@2.0.6"></script>
 
     <!-- Required for Unearthing Layer -->
     <script src="../lib/glify.js"></script>
 
-    <link href="../node_modules/leaflet/dist/leaflet.css" rel="stylesheet" />
-    <link href="../dist/LeafletEnvironmentalLayers.css" rel="stylesheet" />
-    <link href="../node_modules\@fortawesome\fontawesome-free\css\all.min.css" rel="stylesheet" />
+    <!-- Set the size and position of the map on your page in your own css files -->
     <link rel="stylesheet" href="styles.css">
 
   </head>

diff --git a/example/multipleMaps.html b/example/multipleMaps.html
@@ -11,16 +11,22 @@
 
     <title>Leaflet Environmental Layers</title>
 
-    <!-- Bootstrap --> 
-    <link rel="stylesheet" href="../node_modules\bootstrap\dist\css\bootstrap.min.css">
-    <script src="../node_modules\jquery\dist\jquery.min.js"></script>
-    <script src="../node_modules\bootstrap\dist\js\bootstrap.min.js"></script>
-
-    <!-- Required for PLpeople layer -->
+    <!-- Required for PLpeople layer - must load before dist/LeafletEnvironmentalLayers.js -->
     <script src="../node_modules/leaflet-blurred-location/dist/Leaflet.BlurredLocation.js"></script>
     <script src="../node_modules/leaflet.blurred-location-display/dist/Leaflet.BlurredLocationDisplay.js"></script>
 
+    <!-- Required for all maps -->
+    <script src="../node_modules\jquery\dist\jquery.min.js"></script>
     <script src="../dist/LeafletEnvironmentalLayers.js"></script>
+    <link href="../node_modules/leaflet/dist/leaflet.css" rel="stylesheet" />
+    <link href="../dist/LeafletEnvironmentalLayers.css" rel="stylesheet" />
+    <link href="../node_modules\@fortawesome\fontawesome-free\css\all.min.css" rel="stylesheet" />
+
+    <!-- Bootstrap - not needed if you use simpleLayerControl:true -->
+    <script src="../node_modules\bootstrap\dist\js\bootstrap.min.js"></script>
+    <link rel="stylesheet" href="../node_modules\bootstrap\dist\css\bootstrap.min.css">
+
+    <!-- Required for setting hash:true -->
     <script src="../lib/leaflet-fullUrlHash.js"></script>
 
     <!-- Required for purpleLayer -->
@@ -29,14 +35,12 @@
 
     <!-- Required for wisconsin Layer -->
     <script src="https://unpkg.com/esri-leaflet@2.2.3/dist/esri-leaflet.js"></script>
-    <!-- <script src="https://unpkg.com/esri-leaflet-renderers@2.0.6"></script> -->
+    <script src="https://unpkg.com/esri-leaflet-renderers@2.0.6"></script>
 
     <!-- Required for Unearthing Layer -->
     <script src="../lib/glify.js"></script>
 
-    <link href="../node_modules/leaflet/dist/leaflet.css" rel="stylesheet" />
-    <link href="../dist/LeafletEnvironmentalLayers.css" rel="stylesheet" />
-    <link href="../node_modules\@fortawesome\fontawesome-free\css\all.min.css" rel="stylesheet" />
+    <!-- Set the size and position of the map on your page in your own css files -->
     <link rel="stylesheet" href="styles.css">
 
   </head>

diff --git a/example/oneLinerCodeExample.html b/example/oneLinerCodeExample.html
@@ -11,16 +11,22 @@
 
     <title>Leaflet Environmental Layers</title>
 
-    <!-- Bootstrap --> 
-    <link rel="stylesheet" href="../node_modules\bootstrap\dist\css\bootstrap.min.css">
-    <script src="../node_modules\jquery\dist\jquery.min.js"></script>
-    <script src="../node_modules\bootstrap\dist\js\bootstrap.min.js"></script>
-
-    <!-- Required for PLpeople layer -->
+    <!-- Required for PLpeople layer - must load before dist/LeafletEnvironmentalLayers.js -->
     <script src="../node_modules/leaflet-blurred-location/dist/Leaflet.BlurredLocation.js"></script>
     <script src="../node_modules/leaflet.blurred-location-display/dist/Leaflet.BlurredLocationDisplay.js"></script>
 
+    <!-- Required for all maps -->
+    <script src="../node_modules\jquery\dist\jquery.min.js"></script>
     <script src="../dist/LeafletEnvironmentalLayers.js"></script>
+    <link href="../node_modules/leaflet/dist/leaflet.css" rel="stylesheet" />
+    <link href="../dist/LeafletEnvironmentalLayers.css" rel="stylesheet" />
+    <link href="../node_modules\@fortawesome\fontawesome-free\css\all.min.css" rel="stylesheet" />
+
+    <!-- Bootstrap - not needed if you use simpleLayerControl:true -->
+    <script src="../node_modules\bootstrap\dist\js\bootstrap.min.js"></script>
+    <link rel="stylesheet" href="../node_modules\bootstrap\dist\css\bootstrap.min.css">
+
+    <!-- Required for setting hash:true -->
     <script src="../lib/leaflet-fullUrlHash.js"></script>
 
     <!-- Required for purpleLayer -->
@@ -29,14 +35,12 @@
 
     <!-- Required for wisconsin Layer -->
     <script src="https://unpkg.com/esri-leaflet@2.2.3/dist/esri-leaflet.js"></script>
-    <!-- <script src="https://unpkg.com/esri-leaflet-renderers@2.0.6"></script> -->
+    <script src="https://unpkg.com/esri-leaflet-renderers@2.0.6"></script>
 
     <!-- Required for Unearthing Layer -->
     <script src="../lib/glify.js"></script>
 
-    <link href="../node_modules/leaflet/dist/leaflet.css" rel="stylesheet" />
-    <link href="../dist/LeafletEnvironmentalLayers.css" rel="stylesheet" />
-    <link href="../node_modules\@fortawesome\fontawesome-free\css\all.min.css" rel="stylesheet" />
+    <!-- Set the size and position of the map on your page in your own css files -->
     <link rel="stylesheet" href="styles.css">
 
   </head>
@@ -57,11 +61,11 @@
       map.options.minZoom = 3;
 
       L.LayerGroup.EnvironmentalLayers({
-        simpleLayerControl: true,
+        // simpleLayerControl: true,
         // addLayersToMap: true,
-        // include: ['purpleairmarker', 'skytruth', 'fractracker', 'odorreport', 'asian', 'clouds', 'eonetFiresLayer', 'Unearthing'],
+        include: ['purpleairmarker', 'skytruth', 'fractracker', 'odorreport', 'asian', 'clouds', 'eonetFiresLayer', 'Unearthing'],
         // exclude: ['mapknitter', 'clouds'],
-        // display: ['eonetFiresLayer', 'clouds'],
+        display: ['eonetFiresLayer'],
         hash: true,
         embed: true,
         // hostname: 'domain name goes here'