From 34bc9f584d86e70d70cc6279d2ecfaa031405fec Mon Sep 17 00:00:00 2001
From: Bryan McBride <mcbride.bryan@gmail.com>
Date: Mon, 11 Jul 2016 22:57:58 -0400
Subject: [PATCH] [Changed] Readme

- Change readme, link demo bootleaf with leaflet 1.3.1
---
 README.md        |  3 +++
 assets/js/app.js | 51 ++++++++++++++++++++++++++++--------------------
 index.html       | 12 ++++++------
 3 files changed, 39 insertions(+), 27 deletions(-)

diff --git a/README.md b/README.md
index c000fccf..2c94636b 100644
--- a/README.md
+++ b/README.md
@@ -6,6 +6,9 @@ A simple, responsive template for building web mapping applications with [Bootst
 ### Demo:
 http://bmcbride.github.io/bootleaf/
 
+### Demo Bootleaf with leaflet v.1.3.1:
+https://anshori.github.io/bootleaf_1.3.1/
+
 ### Features:
 * Fullscreen mobile-friendly map template with responsive Navbar and modal placeholders
 * jQuery loading of external GeoJSON files
diff --git a/assets/js/app.js b/assets/js/app.js
index ff0352e1..656bbfbf 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -123,10 +123,11 @@ var cartoLight = L.tileLayer("https://cartodb-basemaps-{s}.global.ssl.fastly.net
 });
 var usgsImagery = L.layerGroup([L.tileLayer("http://basemap.nationalmap.gov/arcgis/rest/services/USGSImageryOnly/MapServer/tile/{z}/{y}/{x}", {
   maxZoom: 15,
-}), L.tileLayer.wms("http://services.nationalmap.gov/arcgis/services/USGSImageOnlyLarge/MapServer/WMSServer?", {
+}), L.tileLayer.wms("http://raster.nationalmap.gov/arcgis/services/Orthoimagery/USGS_EROS_Ortho_SCALE/ImageServer/WMSServer?", {
   minZoom: 16,
-  layers: "2",
-  format: 'image/png',
+  maxZoom: 19,
+  layers: "0",
+  format: 'image/jpeg',
   transparent: true,
   attribution: "Aerial Imagery courtesy USGS"
 })]);
@@ -140,13 +141,33 @@ var highlightStyle = {
   radius: 10
 };
 
+/* Single marker cluster layer to hold all clusters */
+var markerClusters = new L.MarkerClusterGroup({
+  spiderfyOnMaxZoom: true,
+  showCoverageOnHover: false,
+  zoomToBoundsOnClick: true,
+  disableClusteringAtZoom: 16
+});
+
+/* Map Center */
+map = L.map("map", {
+  zoom: 10,
+  center: [40.702222, -73.979378],
+  layers: [cartoLight, markerClusters, highlight],
+  zoomControl: false,
+  attributionControl: false
+});
+
+map.createPane("pane_boroughs");
+map.getPane("pane_boroughs").style.zIndex = 402;
 var boroughs = L.geoJson(null, {
+  pane: "pane_boroughs",
   style: function (feature) {
     return {
       color: "black",
       fill: false,
       opacity: 1,
-      clickable: false
+      interactive: false
     };
   },
   onEachFeature: function (feature, layer) {
@@ -160,6 +181,7 @@ var boroughs = L.geoJson(null, {
 });
 $.getJSON("data/boroughs.geojson", function (data) {
   boroughs.addData(data);
+  map.addLayer(boroughs);
 });
 
 //Create a color dictionary based off of subway route_id
@@ -170,7 +192,10 @@ var subwayColors = {"1":"#ff3135", "2":"#ff3135", "3":"ff3135", "4":"#009b2e",
     "GS":"#6e6e6e", "J":"#976900", "Z":"#976900", "L":"#969696", "N":"#ffff00",
     "Q":"#ffff00", "R":"#ffff00" };
 
+map.createPane("pane_subwayLines");
+map.getPane("pane_subwayLines").style.zIndex = 401;
 var subwayLines = L.geoJson(null, {
+  pane: "pane_subwayLines",
   style: function (feature) {
       return {
         color: subwayColors[feature.properties.route_id],
@@ -212,14 +237,6 @@ $.getJSON("data/subways.geojson", function (data) {
   subwayLines.addData(data);
 });
 
-/* Single marker cluster layer to hold all clusters */
-var markerClusters = new L.MarkerClusterGroup({
-  spiderfyOnMaxZoom: true,
-  showCoverageOnHover: false,
-  zoomToBoundsOnClick: true,
-  disableClusteringAtZoom: 16
-});
-
 /* Empty layer placeholder to add to layer control for listening when to add/remove theaters to markerClusters layer */
 var theaterLayer = L.geoJson(null);
 var theaters = L.geoJson(null, {
@@ -305,14 +322,6 @@ $.getJSON("data/DOITT_MUSEUM_01_13SEPT2010.geojson", function (data) {
   museums.addData(data);
 });
 
-map = L.map("map", {
-  zoom: 10,
-  center: [40.702222, -73.979378],
-  layers: [cartoLight, boroughs, markerClusters, highlight],
-  zoomControl: false,
-  attributionControl: false
-});
-
 /* Layer control listeners that allow for a single markerClusters layer */
 map.on("overlayadd", function(e) {
   if (e.layer === theaterLayer) {
@@ -385,7 +394,7 @@ var locateControl = L.control.locate({
   },
   circleStyle: {
     weight: 1,
-    clickable: false
+    interactive: false
   },
   icon: "fa fa-location-arrow",
   metric: false,
diff --git a/index.html b/index.html
index d2540b19..c6462688 100644
--- a/index.html
+++ b/index.html
@@ -12,10 +12,10 @@
     <title>BootLeaf</title>
 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css">
-    <link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.css">
-    <link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.Default.css">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.3.0/MarkerCluster.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.3.0/MarkerCluster.Default.css">
     <link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-locatecontrol/v0.43.0/L.Control.Locate.css">
     <link rel="stylesheet" href="assets/leaflet-groupedlayercontrol/leaflet.groupedlayercontrol.css">
     <link rel="stylesheet" href="assets/css/app.css">
@@ -292,8 +292,8 @@ <h4 class="modal-title">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.10.5/typeahead.bundle.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.3/handlebars.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.1.1/list.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
-    <script src="https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/leaflet.markercluster.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.3.0/leaflet.markercluster.js"></script>
     <script src="https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-locatecontrol/v0.43.0/L.Control.Locate.min.js"></script>
     <script src="assets/leaflet-groupedlayercontrol/leaflet.groupedlayercontrol.js"></script>
     <script src="assets/js/app.js"></script>