A mapbox-gl-js build capable of reading local mbtiles in cordova. Tested on Android, and (to a lesser extent) on iOS.
npm install
cordova platform add android
cordova run android
The Android emulator browser won't display WebGL content, please run on a physical Android device
npm install
cordova platform add ios
cordova run ios
Will use www/data/2017-07-03_spain_barcelona.mbtiles as sample data source, and www/styles/osm-bright/style-offline.json
as style, both coming from the OpenMapTiles project: https://openmaptiles.org/
Use the bundled library from www/mapbox-gl-cordova-offline.js which is based in mapbox-gl-js v.0.53.1, or install it
as npm dependency (npm install oscarfonts/mapbox-gl-cordova-offline).
Add the following cordova plugins via "cordova plugin add" command:
* "cordova-plugin-device"
* "cordova-plugin-file"
* "cordova-sqlite-ext"
Use the OfflineMap constructor. It returns a promise instead of a map, as the offline map creation process is asynchronous:
new mapboxgl.OfflineMap({
container: 'map',
style: 'styles/osm-bright/style-offline.json'
}).then(function(map) {
map.addControl(new mapboxgl.NavigationControl());
});See www/index.html in this repo for a working example.
In your style, you can specify offline tile sources specifying mbtiles as the source type,
and the location to the mbtiles file as a relative path:
"sources": {
"openmaptiles": {
"type": "mbtiles",
"path": "data/2017-07-03_spain_barcelona.mbtiles"
}
}Additional styles can be found in OpenMapTiles repos (see gh-pages branches): https://github.com/openmaptiles Vector tiles for other regions can be downloaded here: https://openmaptiles.com/downloads/planet/
You can add raster tiles in offline mode. In the style you have to add a new source with type rasteroffline with the
relative path:
"sources": {
"hillshading": {
"type": "rasteroffline",
"path": "data/2016-11-28-hillshade-spain_barcelona.mbtiles"
}
}The style related to this source will be the same that a common Mapbox raster layer. You have to relate the layer with
the source using the source name, and the type of the layer have to be raster as a common raster Mapbox layer.
{
"id": "hillshading",
"type": "raster",
"source": "hillshading",
"layout": {
"visibility": "visible"
},
"paint": {
"raster-opacity": {
"base": 0.5,
"stops": [
[
3,
0
],
[
5,
0.5
],
[
12,
0.5
]
]
},
"raster-fade-duration": 300,
"raster-contrast": 0
}
}Copy the files sprite.json, sprite.png, [email protected] and [email protected] as local resources and
reference them as a relative path in your style:
"sprite": "styles/osm-bright/sprite"Search "text-font" attributes in your style. Download the needed fonts from https://github.com/openmaptiles/fonts (see gh-pages branch) and copy them locally. Set the relative path in the "glyphs" property of the style:
"glyphs": "fonts/{fontstack}/{range}.pbf"- Get the your development computer's IP address (
ifconfig). - Edit
www/index.htmland put your IP address in the script tag that loads themapbox-gl-cordova-offline.jsresource:<script src='http://xxx.xxx.xxx.xxx:8080/www/mapbox-gl-cordova-offline.js'></script>. For live reload to work, change also the IP_ADDRESS_AND_PORT var, and uncomment the code block at the end of the document. - Run
npm start.
Every time the contents in src/ are changed, the file www/mapbox-gl-cordova-offline.js will be rebuilt, and the
web view will be reloaded.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent