From 5c6b08667dd503d1389f0c6fad293e7bcbebddbd Mon Sep 17 00:00:00 2001 From: Laurent Baey Date: Fri, 21 Sep 2018 17:23:58 +0200 Subject: [PATCH 1/5] Add http and file json style loading --- src/mapbox.android.ts | 3 +++ src/mapbox.ios.ts | 2 ++ 2 files changed, 5 insertions(+) diff --git a/src/mapbox.android.ts b/src/mapbox.android.ts index 4c6c8a0..b9353f9 100755 --- a/src/mapbox.android.ts +++ b/src/mapbox.android.ts @@ -144,6 +144,9 @@ const _getMapStyle = (input: any): any => { if (/^mapbox:\/\/styles/.test(input)) { return input; } + if (/^http:\/\//.test(input) || /^https:\/\//.test(input) || /^file:\/\//.test(input)) { + return input; + } if (input === MapStyle.LIGHT || input === MapStyle.LIGHT.toString()) { return Style.LIGHT; } else if (input === MapStyle.DARK || input === MapStyle.DARK.toString()) { diff --git a/src/mapbox.ios.ts b/src/mapbox.ios.ts index 4229f2a..51043ef 100755 --- a/src/mapbox.ios.ts +++ b/src/mapbox.ios.ts @@ -68,6 +68,8 @@ const _getMapStyle = (input: any): NSURL => { if (/^mapbox:\/\/styles/.test(input)) { // allow for a style URL to be passed return NSURL.URLWithString(input); + } else if (/^http:\/\//.test(input) || /^https:\/\//.test(input) || /^file:\/\//.test(input)) { + return NSURL.URLWithString(input); } else if (input === MapStyle.LIGHT || input === MapStyle.LIGHT.toString()) { return MGLStyle.lightStyleURL; } else if (input === MapStyle.DARK || input === MapStyle.DARK.toString()) { From feab93f715644fe8e9e09613bdac765d4ca3ef03 Mon Sep 17 00:00:00 2001 From: Laurent Baey Date: Fri, 21 Sep 2018 17:27:19 +0200 Subject: [PATCH 2/5] Merge test lines --- src/mapbox.android.ts | 8 ++------ src/mapbox.ios.ts | 5 +---- 2 files changed, 3 insertions(+), 10 deletions(-) diff --git a/src/mapbox.android.ts b/src/mapbox.android.ts index b9353f9..4f681c6 100755 --- a/src/mapbox.android.ts +++ b/src/mapbox.android.ts @@ -141,13 +141,9 @@ 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) || /^file:\/\//.test(input)) { return input; - } - if (/^http:\/\//.test(input) || /^https:\/\//.test(input) || /^file:\/\//.test(input)) { - return input; - } - if (input === MapStyle.LIGHT || input === MapStyle.LIGHT.toString()) { + } else if (input === MapStyle.LIGHT || input === MapStyle.LIGHT.toString()) { return Style.LIGHT; } else if (input === MapStyle.DARK || input === MapStyle.DARK.toString()) { return Style.DARK; diff --git a/src/mapbox.ios.ts b/src/mapbox.ios.ts index 51043ef..4064ab8 100755 --- a/src/mapbox.ios.ts +++ b/src/mapbox.ios.ts @@ -65,10 +65,7 @@ const _setMapboxMapOptions = (mapView: MGLMapView, settings) => { }; const _getMapStyle = (input: any): NSURL => { - if (/^mapbox:\/\/styles/.test(input)) { - // allow for a style URL to be passed - return NSURL.URLWithString(input); - } else if (/^http:\/\//.test(input) || /^https:\/\//.test(input) || /^file:\/\//.test(input)) { + if (/^mapbox:\/\/styles/.test(input) || /^http:\/\//.test(input) || /^https:\/\//.test(input) || /^file:\/\//.test(input)) { return NSURL.URLWithString(input); } else if (input === MapStyle.LIGHT || input === MapStyle.LIGHT.toString()) { return MGLStyle.lightStyleURL; From b26da016a1dc6db60df69f6f8f07ec68b8cc3c58 Mon Sep 17 00:00:00 2001 From: Laurent Baey Date: Mon, 24 Sep 2018 22:29:53 +0200 Subject: [PATCH 3/5] Use asset:// for android, as file:// is not supported --- src/mapbox.android.ts | 6 +++++- src/mapbox.ios.ts | 6 +++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/src/mapbox.android.ts b/src/mapbox.android.ts index 4f681c6..f44c635 100755 --- a/src/mapbox.android.ts +++ b/src/mapbox.android.ts @@ -141,7 +141,11 @@ 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) || /^http:\/\//.test(input) || /^https:\/\//.test(input) || /^file:\/\//.test(input)) { + if (/^mapbox:\/\/styles/.test(input) || /^http:\/\//.test(input) || /^https:\/\//.test(input)) { + return input; + } else if (/^assets:\/\//.test(input)) { + let assetsPath = 'asset://app/assets/'; + input = input.replace('assets://', assetsPath); return input; } else if (input === MapStyle.LIGHT || input === MapStyle.LIGHT.toString()) { return Style.LIGHT; diff --git a/src/mapbox.ios.ts b/src/mapbox.ios.ts index 4064ab8..eeabe3d 100755 --- a/src/mapbox.ios.ts +++ b/src/mapbox.ios.ts @@ -65,7 +65,11 @@ const _setMapboxMapOptions = (mapView: MGLMapView, settings) => { }; const _getMapStyle = (input: any): NSURL => { - if (/^mapbox:\/\/styles/.test(input) || /^http:\/\//.test(input) || /^https:\/\//.test(input) || /^file:\/\//.test(input)) { + if (/^mapbox:\/\/styles/.test(input) || /^http:\/\//.test(input) || /^https:\/\//.test(input)) { + return NSURL.URLWithString(input); + } else if (/^assets:\/\//.test(input)) { + let assetPath = 'file://' + fs.knownFolders.currentApp().path + '/assets/'; + input = input.replace('assets://', assetPath); return NSURL.URLWithString(input); } else if (input === MapStyle.LIGHT || input === MapStyle.LIGHT.toString()) { return MGLStyle.lightStyleURL; From e29e4b9c474ecb708b4c8560a8dd4a672e58929b Mon Sep 17 00:00:00 2001 From: Laurent Baey Date: Tue, 25 Sep 2018 12:56:32 +0200 Subject: [PATCH 4/5] Swith local URL path to nativescript local app definition ~/ --- README.md | 2 +- demo/app/OSM-map-style.json | 30 ++++++++++++++++++++++++++++++ demo/app/main-page.ts | 3 +++ src/mapbox.android.ts | 6 +++--- src/mapbox.ios.ts | 6 +++--- 5 files changed, 40 insertions(+), 7 deletions(-) create mode 100644 demo/app/OSM-map-style.json diff --git a/README.md b/README.md index 01cef17..0934af0 100755 --- a/README.md +++ b/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 diff --git a/demo/app/OSM-map-style.json b/demo/app/OSM-map-style.json new file mode 100644 index 0000000..867b7a3 --- /dev/null +++ b/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 + } + } + ] +} diff --git a/demo/app/main-page.ts b/demo/app/main-page.ts index 42eeba0..5bb8bf5 100644 --- a/demo/app/main-page.ts +++ b/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-raster-style.json"); + // .. or use the convenience methods exposed on args.map, for instance: map.addMarkers([ { diff --git a/src/mapbox.android.ts b/src/mapbox.android.ts index f44c635..213f2cb 100755 --- a/src/mapbox.android.ts +++ b/src/mapbox.android.ts @@ -143,9 +143,9 @@ const _getMapStyle = (input: any): any => { // allow for a style URL to be passed if (/^mapbox:\/\/styles/.test(input) || /^http:\/\//.test(input) || /^https:\/\//.test(input)) { return input; - } else if (/^assets:\/\//.test(input)) { - let assetsPath = 'asset://app/assets/'; - input = input.replace('assets://', assetsPath); + } 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; diff --git a/src/mapbox.ios.ts b/src/mapbox.ios.ts index eeabe3d..07b400f 100755 --- a/src/mapbox.ios.ts +++ b/src/mapbox.ios.ts @@ -67,9 +67,9 @@ const _setMapboxMapOptions = (mapView: MGLMapView, settings) => { const _getMapStyle = (input: any): NSURL => { if (/^mapbox:\/\/styles/.test(input) || /^http:\/\//.test(input) || /^https:\/\//.test(input)) { return NSURL.URLWithString(input); - } else if (/^assets:\/\//.test(input)) { - let assetPath = 'file://' + fs.knownFolders.currentApp().path + '/assets/'; - input = input.replace('assets://', assetPath); + } 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; From 0c2623b67678fe249f38f312957b47b8053163d2 Mon Sep 17 00:00:00 2001 From: Laurent Baey Date: Tue, 25 Sep 2018 13:06:15 +0200 Subject: [PATCH 5/5] Typo --- demo/app/main-page.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/demo/app/main-page.ts b/demo/app/main-page.ts index 5bb8bf5..5123b27 100644 --- a/demo/app/main-page.ts +++ b/demo/app/main-page.ts @@ -33,7 +33,7 @@ function onMapReady(args) { // 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-raster-style.json"); + // map.setMapStyle("~/OSM-map-style.json"); // .. or use the convenience methods exposed on args.map, for instance: map.addMarkers([