Merge pull request #261 from lbaey/json-style

Allow Mapbox to load local json map style definition

README.md

@@ -119,7 +119,7 @@ All currently supported options for your XML based map are (__don't__ use other
 |---|---|---
 |`accesstoken`|-|see 'Prerequisites' above
 |`delay`|0|A delay in milliseconds - you can set this to have better control over when Mapbox is invoked so it won't clash with other computations your app may need to perform.
-|`mapStyle`|streets|streets, light, dark, satellite_streets, satellite, traffic_day, traffic_night
+|`mapStyle`|streets|streets, light, dark, satellite_streets, satellite, traffic_day, traffic_night, an URL starting with mapbox:// or pointing to a custom JSON definition (http://, https://, or local relative to nativescript app path ~/) 
 |`latitude `|-|Set the center of the map by passing this in
 |`longitude`|-|.. and this as well
 |`zoomLevel`|0|0-20

demo/app/OSM-map-style.json

@@ -0,0 +1,30 @@
+{
+    "version": 8,
+    "name": "OpenStreetMap Tiles",
+    "sources": {
+        "OSMTileLayer": {
+            "type": "raster",
+            "attribution": "(c) OpenStreetMap contributors, CC-BY-SA",
+            "scheme": "xyz",
+            "tiles": [
+                "https://a.tile.openstreetmap.org/{z}/{x}/{y}.png",
+                "https://b.tile.openstreetmap.org/{z}/{x}/{y}.png",
+                "https://c.tile.openstreetmap.org/{z}/{x}/{y}.png"
+            ],
+            "minzoom": 0,
+            "maxzoom": 18,
+            "tileSize": 256,
+            "bounds": [ -180, -85, 180, 85 ]
+        }
+    },
+    "layers": [
+        {
+            "id": "OSMTileLayer",
+            "type": "raster",
+            "source": "OSMTileLayer",
+            "paint": {
+                "raster-fade-duration": 100
+            }
+        }
+    ]
+}

demo/app/main-page.ts

@@ -32,6 +32,9 @@ function onMapReady(args) {
   // this works perfectly fine, but generates a lot of noise
   // map.setOnScrollListener((point?: LatLng) => console.log(`Map scrolled: ${JSON.stringify(point)}`));
 
+  // this allows json style loading for XYZ or TMS tiles source
+  // map.setMapStyle("~/OSM-map-style.json");
+
   // .. or use the convenience methods exposed on args.map, for instance:
   map.addMarkers([
     {

src/mapbox.android.ts

@@ -141,10 +141,13 @@ export class MapboxView extends MapboxViewBase {
 const _getMapStyle = (input: any): any => {
   const Style = com.mapbox.mapboxsdk.constants.Style;
   // allow for a style URL to be passed
-  if (/^mapbox:\/\/styles/.test(input)) {
+  if (/^mapbox:\/\/styles/.test(input) || /^http:\/\//.test(input) || /^https:\/\//.test(input)) {
     return input;
-  }
-  if (input === MapStyle.LIGHT || input === MapStyle.LIGHT.toString()) {
+  } else if (/^~\//.test(input)) {
+    let assetsPath = 'asset://app/';
+    input = input.replace(/^~\//, assetsPath);
+    return input;
+  } else if (input === MapStyle.LIGHT || input === MapStyle.LIGHT.toString()) {
     return Style.LIGHT;
   } else if (input === MapStyle.DARK || input === MapStyle.DARK.toString()) {
     return Style.DARK;

src/mapbox.ios.ts

@@ -65,8 +65,11 @@ const _setMapboxMapOptions = (mapView: MGLMapView, settings) => {
 };
 
 const _getMapStyle = (input: any): NSURL => {
-  if (/^mapbox:\/\/styles/.test(input)) {
-    // allow for a style URL to be passed
+  if (/^mapbox:\/\/styles/.test(input) || /^http:\/\//.test(input) || /^https:\/\//.test(input)) {
+    return NSURL.URLWithString(input);
+  } else if (/^~\//.test(input)) {
+    var assetPath = 'file://' + fs.knownFolders.currentApp().path + '/';
+    input = input.replace(/^~\//, assetPath);
     return NSURL.URLWithString(input);
   } else if (input === MapStyle.LIGHT || input === MapStyle.LIGHT.toString()) {
     return MGLStyle.lightStyleURL;