Merge pull request #1 from JackDougherty/dev

updates
JackDougherty · Jun 15, 2016 · 5cab5ee · 5cab5ee
2 parents 6955d46 + 0e223e2
commit 5cab5ee
Show file tree

Hide file tree

Showing 2 changed files with 90 additions and 44 deletions.
diff --git a/README.md b/README.md
@@ -1,2 +1,25 @@
 # mapbox-gl-compare
 Mapbox compare two maps side-by-side with sync and swipe
+
+## links
+
+## to do
+
+based on these Mapbox GL examples
+https://www.mapbox.com/mapbox-gl-js/examples/
+
+add a WMS raster layer?
+https://www.mapbox.com/mapbox-gl-js/example/third-party/
+
+add a layer switcher
+https://www.mapbox.com/mapbox-gl-js/example/setstyle/
+or
+https://www.mapbox.com/mapbox-gl-js/example/toggle-layers/
+but with drop-down menus
+https://esri.github.io/esri-leaflet/examples/switching-basemaps.html
+
+need to disable rotate?
+https://www.mapbox.com/mapbox-gl-js/example/disable-rotation/
+
+place geocoder results as point on map
+https://www.mapbox.com/mapbox-gl-js/example/point-from-geocoder-result/
diff --git a/index.html b/index.html
@@ -1,65 +1,88 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <meta charset='utf-8' />
-    <title></title>
-    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
-    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.20.0/mapbox-gl.js'></script>
-    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.20.0/mapbox-gl.css' rel='stylesheet' />
-    <style>
-        body { margin:0; padding:0; }
-        #map { position:absolute; top:0; bottom:0; width:100%; }
-    </style>
+  <meta charset='utf-8' />
+  <title></title>
+  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
+  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.20.0/mapbox-gl.js'></script>
+  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.20.0/mapbox-gl.css' rel='stylesheet' />
+  <style>
+  body { margin:0; padding:0; }
+  #map { position:absolute; top:0; bottom:0; width:100%; }
+  </style>
 </head>
 <body>
 
-<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.0.1/mapbox-gl-compare.js'></script>
-<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.0.1/mapbox-gl-compare.css' type='text/css' />
-<style>
-body {
+  <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-supported/v0.0.1/mapbox-gl-supported.js'></script>
+
+  <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.0.1/mapbox-gl-compare.js'></script>
+  <link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.0.1/mapbox-gl-compare.css' type='text/css' />
+  <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v1.1.0/mapbox-gl-geocoder.js'></script>
+  <link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v1.1.0/mapbox-gl-geocoder.css' type='text/css' />
+  <style>
+  body {
     overflow: hidden;
-}
+  }
 
-body * {
-   -webkit-touch-callout: none;
-     -webkit-user-select: none;
-        -moz-user-select: none;
-         -ms-user-select: none;
-             user-select: none;
-}
+  body * {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+  }
 
-.map {
+  .map {
     position: absolute;
     top: 0;
     bottom: 0;
     width: 100%;
-}
-</style>
+  }
+  </style>
+
+  <div id='left' class='map'></div>
+  <div id='right' class='map'></div>
+
+  <script>
+  mapboxgl.accessToken = 'pk.eyJ1IjoiamFja2RvdWdoZXJ0eSIsImEiOiJxMi11TGlzIn0.ydUTGpMKcADi7fKPxy0GVA';
+  if (!mapboxgl.supported()) {
+    alert('Your browser does not support Mapbox GL');
+  } else {
+
+    // set max bounds for Connecticut aerial map
+    var bounds = [
+      [-73.7045, 40.928], // Southwest coordinates
+      [-71.7517, 42.0493]  // Northeast coordinates
+    ];
+
+    var left = new mapboxgl.Map({
+      container: 'left',
+      style: 'mapbox://styles/mapbox/light-v8',
+      center: [-72.69, 41.76],
+      zoom: 13,
+      maxBounds: bounds,
+      hash: true  // updates page position in URL
+    });
 
-<div id='left' class='map'></div>
-<div id='right' class='map'></div>
+    var right = new mapboxgl.Map({
+      container: 'right',
+      style: 'mapbox://styles/mapbox/satellite-v8',
+      center: [-72.69, 41.76],
+      maxBounds: bounds,
+      zoom: 13
+    });
 
-<script>
-mapboxgl.accessToken = 'pk.eyJ1IjoiamFja2RvdWdoZXJ0eSIsImEiOiJxMi11TGlzIn0.ydUTGpMKcADi7fKPxy0GVA';
-var left = new mapboxgl.Map({
-    container: 'left',
-    style: 'mapbox://styles/mapbox/light-v8',
-    center: [-72.69, 41.76],
-    zoom: 13,
-    hash: true  // updates page position in URL
-});
+    // disable map zoom when using scroll
+    left.scrollZoom.disable();
+    right.scrollZoom.disable();
 
-var right = new mapboxgl.Map({
-    container: 'right',
-    style: 'mapbox://styles/mapbox/dark-v8',
-    center: [-72.69, 41.76],
-    zoom: 13
-});
+    new mapboxgl.Compare(left, right);
 
-new mapboxgl.Compare(left, right);
+    left.addControl(new mapboxgl.Geocoder({position: 'top-left'}));
+    left.addControl(new mapboxgl.Navigation({position: 'top-left'}));
 
-left.addControl(new mapboxgl.Navigation({position: 'top-left'}));
-</script>
+  } // end of else statement
+  </script>
 
 </body>
 </html>