Compatibility with new Mapbox tiles API urls + ids

Author: sylvainjule

README.md

@@ -79,10 +79,10 @@ return array(
 
 ![tiles-mapbox-2](https://user-images.githubusercontent.com/14079751/48648037-2c542380-e9ee-11e8-916d-ca240a40bc20.jpg)
 
-1. `mapbox.outdoors` (default mapbox theme)
-2. `mapbox.streets`
-3. `mapbox.light`
-4. `mapbox.dark`
+1. ~~mapbox.outdoors~~ → `mapbox/outdoors-v11` (default mapbox theme)
+2. ~~mapbox.streets~~ → `mapbox/streets-v11`
+3. ~~mapbox.light~~ → `mapbox/light-v10`
+4. ~~mapbox.dark~~ → `mapbox/dark-v10`
 
 In case your usage doesn't fall into the above policies (or if you don't want to rely on those services), you can set-up the field to use Mapbox' tiles.
 
@@ -92,7 +92,7 @@ You will have to set both the `id` of the tiles you want to use and your mapbox
 
 ```php
 return array(
-    'sylvainjule.locator.mapbox.id'    => 'mapbox.outdoors',
+    'sylvainjule.locator.mapbox.id'    => 'mapbox/outdoors-v11',
     'sylvainjule.locator.mapbox.token' => 'pk.vdf561vf8...',
 );
 ```

index.js

@@ -55,8 +55,18 @@
 				return kirby()->url('media') . '/plugins/sylvainjule/locator/images/marker-icon-'. $tint .'.png';
 			},
 			'mapbox' => function() {
+                $idSwap = [
+                    'mapbox.outdoors' => 'mapbox/outdoors-v11',
+                    'mapbox.streets'  => 'mapbox/streets-v11',
+                    'mapbox.light'    => 'mapbox/light-v10',
+                    'mapbox.dark'     => 'mapbox/dark-v10',
+                ];
+
+                $setId = option('sylvainjule.locator.mapbox.id');
+                $id    = array_key_exists($setId, $idSwap) ? $idSwap[$setId] : $setId;
+
 				return array(
-					'id'    => option('sylvainjule.locator.mapbox.id'),
+					'id'    => $id,
                 	'token' => option('sylvainjule.locator.mapbox.token', ''),
 				);
 			}

lib/fields.php

@@ -18,14 +18,14 @@
     "not ie <= 11"
   ],
   "devDependencies": {
-    "@vue/component-compiler-utils": "^3.0.0",
+    "@vue/component-compiler-utils": "^3.2.0",
     "cssnano": "^4.1.10",
-    "leaflet": "^1.5.1",
-    "sass": "^1.21.0",
-    "vue-template-compiler": "^2.6.11"
+    "leaflet": "^1.7.1",
+    "sass": "^1.29.0",
+    "vue-template-compiler": "^2.6.12"
   },
   "dependencies": {
-    "vue": "^2.6.11",
+    "vue": "^2.6.12",
     "vue-hot-reload-api": "^2.3.4"
   }
 }

package.json

@@ -123,10 +123,7 @@ export default {
             return this.valueExists ? [this.value.lat, this.value.lon] : []
         },
         tileUrl() {
-            if(this.tiles == 'mapbox') {
-                return 'https://api.tiles.mapbox.com/v4/'+ this.mapbox.id +'/{z}/{x}/{y}'+ (L.Browser.retina ? '@2x.png' : '.png') +'?access_token='+ this.mapbox.token
-            }
-            else if(this.tiles == 'mapbox.custom') {
+            if(this.tiles == 'mapbox' || this.tiles == 'mapbox.custom') {
                 return 'https://api.mapbox.com/styles/v1/'+ this.mapbox.id +'/tiles/256/{z}/{x}/{y}'+ (L.Browser.retina ? '@2x' : '') +'?access_token='+ this.mapbox.token
             }
             else if(this.tiles == 'wikimedia') {