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..5123b27 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-map-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 4c6c8a0..213f2cb 100755 --- a/src/mapbox.android.ts +++ b/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; diff --git a/src/mapbox.ios.ts b/src/mapbox.ios.ts index 4229f2a..07b400f 100755 --- a/src/mapbox.ios.ts +++ b/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;