Give users the option to use mapbox v4

doc/db_geoa.rst

@@ -28,6 +28,11 @@ settings::
     app = Flask(__name__)
     app.config['MAPBOX_MAP_ID'] = "example.abc123"
 
+To use the v4 of their API: (Note that while 4 is parameterized here, only v3 and v4 are currently supported.)::
+
+    app.config['MAPBOX_ACCESS_TOKEN'] = "pk.def456"
+    app.config['MAPBOX_API_VERSION'] = 4
+
 .. note::
   Leaflet supports loading map tiles from any arbitrary map tile provider, but
   at the moment, Flask-Admin only supports Mapbox. If you want to use other

flask_admin/static/admin/js/form-1.0.0.js

@@ -73,8 +73,8 @@
        * Process Leaflet (map) widget
        */
       function processLeafletWidget($el, name) {
-        if (!window.MAPBOX_MAP_ID) {
-          console.error("You must set MAPBOX_MAP_ID in your Flask settings to use the map widget");
+        if (!window.MAPBOX_MAP_ID || (window.MAPBOX_API_VERSION === 4 && !window.MAPBOX_ACCESS_TOKEN)) {
+          console.error("You must set MAPBOX_MAP_ID and MAPBOX_ACCESS_TOKEN in your Flask settings to use the map widget");
           return false;
         }
 
@@ -155,7 +155,11 @@
         }
 
         // set up tiles
-        L.tileLayer('http://{s}.tiles.mapbox.com/v3/'+MAPBOX_MAP_ID+'/{z}/{x}/{y}.png', {
+        var mapboxTemplateUrl = 'http://{s}.tiles.mapbox.com/v3/'+MAPBOX_MAP_ID+'/{z}/{x}/{y}.png';
+        if (MAPBOX_API_VERSION === 4) {
+          mapboxTemplateUrl = 'http://{s}.tiles.mapbox.com/v4/'+MAPBOX_MAP_ID+'/{z}/{x}/{y}.png?access_token='+MAPBOX_ACCESS_TOKEN;
+        }
+        L.tileLayer(mapboxTemplateUrl, {
           attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
           maxZoom: 18
         }).addTo(map);

flask_admin/templates/bootstrap2/admin/lib.html

@@ -187,6 +187,10 @@
   {% if config.MAPBOX_MAP_ID %}
   <script>
   window.MAPBOX_MAP_ID = "{{ config.MAPBOX_MAP_ID }}";
+  {% if config.get(MAPBOX_API_VERSION) == 4 %}
+  window.MAPBOX_ACCESS_TOKEN = "{{ config.MAPBOX_ACCESS_TOKEN }}";
+  window.MAPBOX_API_VERSION = "{{ config.MAPBOX_API_VERSION }}";
+  {% endif %}
   </script>
   <script src="{{ admin_static.url(filename='vendor/leaflet/leaflet.js') }}"></script>
   <script src="{{ admin_static.url(filename='vendor/leaflet/leaflet.draw.js') }}"></script>

flask_admin/templates/bootstrap3/admin/lib.html

@@ -169,7 +169,7 @@
   <link href="{{ admin_static.url(filename='vendor/select2/select2.css') }}" rel="stylesheet">
   <link href="{{ admin_static.url(filename='vendor/select2/select2-bootstrap3.css') }}" rel="stylesheet">
   <link href="{{ admin_static.url(filename='vendor/bootstrap-daterangepicker/daterangepicker-bs3.css') }}" rel="stylesheet">
-  {% if config.MAPBOX_MAP_ID %}
+  {% if config.MAPBOX_MAP_ID and config.MAPBOX_ACCESS_TOKEN %}
   <link href="{{ admin_static.url(filename='vendor/leaflet/leaflet.css') }}" rel="stylesheet">
   <link href="{{ admin_static.url(filename='vendor/leaflet/leaflet.draw.css') }}" rel="stylesheet">
   {% endif %}
@@ -179,9 +179,13 @@
 {% endmacro %}
 
 {% macro form_js() %}
-  {% if config.MAPBOX_MAP_ID %}
+  {% if config.MAPBOX_MAP_ID and config.MAPBOX_ACCESS_TOKEN %}
   <script>
   window.MAPBOX_MAP_ID = "{{ config.MAPBOX_MAP_ID }}";
+  {% if config.get('MAPBOX_API_VERSION') == 4 %}
+  window.MAPBOX_ACCESS_TOKEN = "{{ config.MAPBOX_ACCESS_TOKEN }}";
+  window.MAPBOX_API_VERSION = "{{ config.MAPBOX_API_VERSION }}";
+  {% endif %}
   </script>
   <script src="{{ admin_static.url(filename='vendor/leaflet/leaflet.js') }}"></script>
   <script src="{{ admin_static.url(filename='vendor/leaflet/leaflet.draw.js') }}"></script>