Moving to a CUGOS mapbox token and updating to mapboxjs 3.2.0.

css/bbox.css

@@ -117,7 +117,7 @@ html, body, #map {
 
 #map-ui-proj {
     position: absolute;
-    top: 420px;
+    top: 460px;
     left: 10px;
     list-style: none;
     margin: 0;
@@ -172,8 +172,8 @@ html, body, #map {
 
 #map-ui {
     position: absolute;
-    top: 300px;
-    left: 10px;
+    top: 330px;
+    left: 12px;
     list-style: none;
     margin: 0;
     padding: 0;
@@ -183,9 +183,9 @@ html, body, #map {
 #map-ui a {
     background-color: #fff;
     border-bottom: 1px solid #ccc;
-    width: 26px;
-    height: 26px;
-    line-height: 26px;
+    width: 30px;
+    height: 30px;
+    line-height: 30px;
     display: block;
     text-align: center;
     text-decoration: none;
@@ -261,6 +261,10 @@ html, body, #map {
    font-size: large;
 }
 
+.leaflet-sidebar .close{
+  z-index:10001;
+}
+
 .ui-autocomplete {
     max-height: 180px;
     overflow-y: auto;

index.html

@@ -7,17 +7,17 @@
     <link rel="stylesheet" href="css/maps/leaflet.css" />
     <link rel="stylesheet" href="css/maps/leaflet.draw.css" />
     <link rel="stylesheet" href="css/maps/leaflet.sidebar.css" />
-    <link rel="stylesheet" href="css/maps/mapbox.standalone.css" />
+    <link rel="stylesheet" href="css/maps/mapbox.v3.2.0.css" />
     <link rel="stylesheet" href="css/libs/ui-lightness/jquery-ui-1.10.3.custom.css" />
     <link rel="stylesheet" href="css/bbox.css" />
 
     <script src="js/libs/jquery-1.9.1.min.js"></script>
     <script src="js/libs/jquery-ui-1.10.3.custom.js"></script>
     <script src="js/libs/ZeroClipboard.min.js"></script>
     <script src="js/maps/leaflet.js"></script>
+    <script src="js/maps/mapbox.v3.2.0.js"></script>
     <script src="js/maps/leaflet.draw.js"></script>
     <script src="js/maps/leaflet.sidebar.js"></script>
-    <script src="js/maps/mapbox.standalone.js"></script>
     <script src="js/maps/wkt.parser.js"></script>
     <script src="js/maps/proj4-src.js"></script>
     <script src="js/maps/proj4leaflet.js"></script>

js/bbox.js

@@ -1,5 +1,4 @@
 var map, rsidebar, lsidebar, drawControl, drawnItems = null;
-var apikey = window.location.hostname.indexOf('bboxfinder.com') !== -1 ? 'reprojected.g9on3k93' : 'examples.map-9ijuk24y';
 
 // Where we keep the big list of proj defs from the server
 var proj4defs = null;
@@ -466,7 +465,8 @@ $(document).ready(function() {
     // Have to init the projection input box as it is used to format the initial values
     $( "#projection" ).val(currentproj);
 
-    map = L.mapbox.map('map', apikey).setView([0, 0], 3);
+    L.mapbox.accessToken = 'pk.eyJ1IjoiY3Vnb3MiLCJhIjoiY2p4Nm43MzA3MDFmZDQwcGxsMjB4Z3hnNiJ9.SQbnMASwdqZe6G4n6OMvVw';
+    map = L.mapbox.map('map').setView([0, 0], 3).addLayer(L.mapbox.styleLayer('mapbox://styles/mapbox/streets-v11'));
 
     rsidebar = L.control.sidebar('rsidebar', {
         position: 'right',
@@ -532,8 +532,8 @@ $(document).ready(function() {
     );
     bounds.on('bounds-set', function( e ) {
         // move it to the end of the parent
-        var parent = e.target._container.parentElement;
-        $( parent ).append( e.target._container ); 
+        var parent = e.target._renderer._container.parentElement;
+        $( parent ).append( e.target._renderer._container ); 
         // Set the hash
         var southwest = this.getBounds().getSouthWest();
         var northeast = this.getBounds().getNorthEast();