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.
mapbox-gl-cordova-offline's People
Contributors
Stargazers
Watchers
Forkers
michogar daliborjanak klokantech jpmguides archesproject yassinejebli mapsgeek kelcon yermo bill-ricksteves eklauberg esteban03 landerlezcano oligoform trjdreyer canallc byjose007 itbeyond hawk2017 stefanmdt illusionvk jarscr zhenwie siloam adrienredon hdminh247 ramibader geomatico razzetto mountain-maps sbongiz ws1993 aminefth thopiax samongit aibappamapbox-gl-cordova-offline's Issues
Error: tile x,y,z not found
The example app writes a lot of these errors (e.g. "Error: tile 17,66322,82120 not found") to the output. Is there something missing?
UnhandledPromiseRejectionWarning: Error: spawn EACCES
Hello,
When I download your repo and run
npm install
cordova platform add android
all seem fine but having issue with :
cordova run android
ANDROID_HOME=/Users/cerw/Library/Android/sdk
JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_112.jdk/Contents/Home
(node:43973) UnhandledPromiseRejectionWarning: Error: spawn EACCES
at ChildProcess.spawn (internal/child_process.js:330:11)
at Object.exports.spawn (child_process.js:500:9)
at Object.exports.spawn (/Users/cerw/Work/slsa/mapbox-gl-cordova-offline-master/platforms/android/cordova/node_modules/cordova-common/src/superspawn.js:134:31)
at GradleBuilder.runGradleWrapper (/Users/cerw/Work/slsa/mapbox-gl-cordova-offline-master/platforms/android/cordova/lib/builders/GradleBuilder.js:78:27)
at /Users/cerw/Work/slsa/mapbox-gl-cordova-offline-master/platforms/android/cordova/lib/builders/GradleBuilder.js:177:21
at _fulfilled (/Users/cerw/Work/slsa/mapbox-gl-cordova-offline-master/platforms/android/cordova/node_modules/q/q.js:854:54)
at self.promiseDispatch.done (/Users/cerw/Work/slsa/mapbox-gl-cordova-offline-master/platforms/android/cordova/node_modules/q/q.js:883:30)
at Promise.promise.promiseDispatch (/Users/cerw/Work/slsa/mapbox-gl-cordova-offline-master/platforms/android/cordova/node_modules/q/q.js:816:13)
at /Users/cerw/Work/slsa/mapbox-gl-cordova-offline-master/platforms/android/cordova/node_modules/q/q.js:570:49
at runSingle (/Users/cerw/Work/slsa/mapbox-gl-cordova-offline-master/platforms/android/cordova/node_modules/q/q.js:137:13)
(node:43973) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:43973) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
npm --version
n5.6.0
node --version
v9.7.1
MacOS: 10.13.3
Any idea?
Thanks
Will this work with geojson data?
Right now I currently have geojson being loaded offline using the below code. I'm using Ionic and up until production build everything had been working flawlessly, i'm hoping your plugin could help me out 👍 .
this.map.addSource(this.STATES_SOURCE_ID, {
type: "geojson",
data: "/assets/data/map/us-states.geojson"
});
Will this plugin work for this data type as well?
Thanks in advance!
using cordova plugin cordova-spatialite-storage and cordova-sqlite-ext?
Hi!
I have installed the plugin cordova-sqlite-ext in order to work with mapbox-gl-cordova-offline and my mbtiles.
But I also need to access another DB (Spatialite) with the plugin cordova-spatialite-storage in order to use a specific function (asGeoJSON).
When both plugins are installed, then both DB are accessed by only one of the plugins (the one installed the last).
Is there a way I could use one of the plugins to access one DB and the other plugin to acces the other DB? Or maybe access the mbtiles using cordova-spatialite-storage instead of ordova-sqlite-ext?
Thanks!
FileError 5 on Android 9
After update my device to android pie, the map stop loading the layers and result this error
FileError { code: 5 }
what needs to be done to fix this problem?
Road names not showing
Do you have any idea, why the road names of smaller roads are not showing in the example app with the Barcelona tiles?
Not working on Ionic 3 (problem with sqliteplugin)
Great work on the plugin! I have stil one problem... I can't get it to work with the sqliteplugin. I keep getting the error that de plugin is not found. I installed it through npm because it didn't work with cordova plugin add.
Do I have to do something else to get it to work?
Unable to see any layers/content added to the map
I have created an Android app using the sample code and the map renders with the custom mbtiles files, controls render and map browsing works fine.. But I can't seem to be able to draw anything on it using layers. There are no errors, but nothing is visible.
Is this a known issue/limitation?
I need to add some point markers and draw polylines on top of the map - but neither of them work.
MBTiles Problem
Hi,
I'm using your project for offline map application. I bought couple of maps from openmaptiles and they are working without any problems. Only problem is file size is too big for a small area and I need some other layers like(hillshade and contour ) so need another solutions so now I have 2 questions;
-
When I download a map from openstreetmap as osm or geojson and convert it to MBtiles, it's not working (map is not showing on app). Both(from openmaptiles and other one) of are MBtiles what is the difference and why it's not working?
-
Is there any method to edit MBtiles file? Because I need a predefined small area but MBtiles file show whole world(of course not detailed but anyway it includes).
Looking forward for your response
"Failed to install cordova-sqlite-ext" cordova 9.0.0
I get an error when adding Cordova platforms - "Failed to install 'cordova-sqlite-ext': CordovaError: Using "requireCordovaModule" to load non-cordova module "q" is not supported. Instead, add this module to your dependencies and use regular "require" to load it."
when using "osm-bright", labels are not displayed properly
I tried to changed the style to osm-bright. It does not work properly: some map labels are not displayed.
My example is there
https://github.com/JpmGuides/mapbox-gl-cordova-mbtiles/tree/jp-osm-bright
unfortunately, map labels are not displayed properly.
I have trouble figuring out what is wrong here. Could you help?
Thanks
Draggable Marker not moving
When a add a marker and set the property "draggable=true" the marker does not move when I'm testing on the device (Android).
import * as MapboxGLOffline from 'mapbox-gl-cordova-offline';
let marker = new MapboxGLOffline.Marker( { draggable: true })
.setLngLat(new MapboxGLOffline.LngLat(+coords.lng, +coords.lat))
.addTo(map);
Do I need to do something special?
Is it because the mapbox version?
It it possible to update it to the latest version 0.51?
Possibility to load multiple paths for mbtiles in sources
Hello! First of all thanks for your great work.
Problem: As i understood, now it's possible to load only one mbtile at a time on style.json sources property :
"sources": { "openmaptiles": { "type": "mbtiles", "path": "assets/mapStyles/2017-07-03_iceland_reykjavik.mbtiles", "attribution": "<a href=\"http://www.openmaptiles.org/\" target=\"_blank\">© OpenMapTiles</a> <a href=\"http://www.openstreetmap.org/about/\" target=\"_blank\">© OpenStreetMap contributors</a>" } },
Property path takes only String value.
Expected result :
"sources": { "openmaptiles": { "type": "mbtiles", "path": ["assets/mapStyles/2017-07-03_iceland_reykjavik.mbtiles", "Another_greate_tile.mbtiles"], "attribution": "<a href=\"http://www.openmaptiles.org/\" target=\"_blank\">© OpenMapTiles</a> <a href=\"http://www.openstreetmap.org/about/\" target=\"_blank\">© OpenStreetMap contributors</a>" } },- OR
"sources": { "openmaptiles": { "type": "mbtiles", "path": "assets/mapStyles/2017-07-03_iceland_reykjavik.mbtiles", "attribution": "<a href=\"http://www.openmaptiles.org/\" target=\"_blank\">© OpenMapTiles</a> <a href=\"http://www.openstreetmap.org/about/\" target=\"_blank\">© OpenStreetMap contributors</a>" }, openmaptiles": { "type": "mbtiles", "path": "Another_greate_tile.mbtiles", "attribution": "<a href=\"http://www.openmaptiles.org/\" target=\"_blank\">© OpenMapTiles</a> <a href=\"http://www.openstreetmap.org/about/\" target=\"_blank\">© OpenStreetMap contributors</a>" } },
It would be really convenient to use this plugin , if multiple sources paths will be available.
If i just did not catch how to make it , please tell me. And if there is much work to do, could you just give a brief comment Where to start looking to create such a feature in your code.
Readme is not updated
Is the following line in the readme file up-to-date?
Use the bundled library from www/mapbox-gl-cordova-offline.js which is based in mapbox-gl-js v.0.44.0, or install it as npm
Also, I was wondering if there's another way to create an offline mbtiles layer without creating a special version of mapbox?
I'm looking into solving this for an app i'm writing and I would like to use the official mapbox-gl package alongside this one...
I'd love to help out in any way that I can...
Build fails on node 10.5.0, windows
A fresh pull followed by npm install and npm run build produces the following error:
PS C:\Users\Adam Haile\Desktop\Mi-Co\Github\mapbox-gl-cordova-offline> node -v
v10.5.0
PS C:\Users\Adam Haile\Desktop\Mi-Co\Github\mapbox-gl-cordova-offline> npm run build
> [email protected] build C:\Users\Adam Haile\Desktop\Mi-Co\Github\mapbox-gl-cordova-offline
> rollup -c --environment BUILD:production
src/index.js, src/worker.js → rollup/build/mapboxgl...
[!] TypeError [ERR_INVALID_ARG_VALUE]: The argument 'path' must be a string or Uint8Array without null bytes. Received '\u0000commonjs-proxy:C:\\Users\\Adam Haile\\Desktop\\Mi-Co\\Github\\mapbox-gl-cordova-offline\\node_modules\\ieee754\\package.j...
TypeError [ERR_INVALID_ARG_VALUE]: The argument 'path' must be a string or Uint8Array without null bytes. Received '\u0000commonjs-proxy:C:\\Users\\Adam Haile\\Desktop\\Mi-Co\\Github\\mapbox-gl-cordova-offline\\node_modules\\ieee754\\package.j...
at Object.readFile (fs.js:301:3)
at next (C:\Users\Adam Haile\Desktop\Mi-Co\Github\mapbox-gl-cordova-offline\node_modules\browser-resolve\index.js:98:12)
at load_shims (C:\Users\Adam Haile\Desktop\Mi-Co\Github\mapbox-gl-cordova-offline\node_modules\browser-resolve\index.js:116:7)
at resolve (C:\Users\Adam Haile\Desktop\Mi-Co\Github\mapbox-gl-cordova-offline\node_modules\browser-resolve\index.js:236:5)
at C:\Users\Adam Haile\Desktop\Mi-Co\Github\mapbox-gl-cordova-offline\node_modules\rollup-plugin-node-resolve\dist\rollup-plugin-node-resolve.cjs.js:66:5
at new Promise (<anonymous>)
at resolveId$1 (C:\Users\Adam Haile\Desktop\Mi-Co\Github\mapbox-gl-cordova-offline\node_modules\rollup-plugin-node-resolve\dist\rollup-plugin-node-resolve.cjs.js:63:11)
at C:\Users\Adam Haile\Desktop\Mi-Co\Github\mapbox-gl-cordova-offline\node_modules\rollup\dist\rollup.js:5990:113
This is on Windows, if that matters.
From a google search, looks like this might be an incompatibility b/w rollup-plugin-commonjs and node 9+: rollup/rollup#1782
Add Windows and Apple OS X?
Why aren't Windows and Apple OS X included as Cordova platforms?
What would it take to add them?
Thanks
iOS example app doesn't show map data
Cross origin requests are only supported for HTTP.
On a fresh Cordava project, with the included example, on the iOS platform, I get the error XMLHttpRequest cannot load data:application/x-protobuf;base64,...Cross origin requests are only supported for HTTP.
Is there a tested iOS platform version I should be using?
Map labels not showing in android
Marker is not working
Hello,
I try to use simple marker (and other kind of mapbox features like LineString) but it's not showing on the map.Here is the code ;
var map = new mapboxgl.OfflineMap({
container: 'map',
style: 'styles/osm-bright/style-offline.json',
center: [2.15, 41.38],
zoom: 8
});
var marker = new mapboxgl.Marker()
.setLngLat([2.15, 41.38])
.addTo(map);
But when I switch to online version with same code (OfflineMap-->Map) it works and shows the marker ;
var map = new mapboxgl.Map({
container: 'map',
style: 'styles/osm-bright/style-offline.json',
center: [2.15, 41.38],
zoom: 8
});
var marker = new mapboxgl.Marker()
.setLngLat([2.15, 41.38])
.addTo(map);
What could be the reason, any idea?
Thank you
mapbox-gl can't load local resources on iOS simulator
When getting "file://" resources via "ajax", the response status is 0 in some browsers (v. gr. on iOs simulator). We need to patch mapbox-gl-js so it accepts local responses, regardless of status code.
Support raster tiles
Get inspiration from this @geostarters class:
https://github.com/geostarters/mapbox-gl-js/blob/master/src/source/raster_tile_offline_source.js
EXC_BAD_ACCESS when running on IOS
Hi,
I'm trying to run this on IOS but it fails. I followed the exact same steps for Android but than for IOS but it doesn't work.
In xcode I see the following:
2017-09-20 17:49:06.607284+0200 Mapbox GL Cordova MBTiles[9934:3252250] DiskCookieStorage changing policy from 2 to 0, cookie file: file:///private/var/mobile/Containers/Data/Application/AA1920DC-E1D5-4127-9314-15F90EF3CFF6/Library/Cookies/Cookies.binarycookies
2017-09-20 17:49:06.689006+0200 Mapbox GL Cordova MBTiles[9934:3252250] Apache Cordova native platform version 4.4.0 is starting.
2017-09-20 17:49:06.690229+0200 Mapbox GL Cordova MBTiles[9934:3252250] Multi-tasking -> Device: YES, App: YES
2017-09-20 17:49:06.957222+0200 Mapbox GL Cordova MBTiles[9934:3252250] Using UIWebView
2017-09-20 17:49:06.961533+0200 Mapbox GL Cordova MBTiles[9934:3252250] [CDVTimer][handleopenurl] 0.165045ms
2017-09-20 17:49:06.965368+0200 Mapbox GL Cordova MBTiles[9934:3252250] [CDVTimer][intentandnavigationfilter] 3.690958ms
2017-09-20 17:49:06.965680+0200 Mapbox GL Cordova MBTiles[9934:3252250] [CDVTimer][gesturehandler] 0.155985ms
2017-09-20 17:49:06.997877+0200 Mapbox GL Cordova MBTiles[9934:3252250] [CDVTimer][file] 31.947970ms
2017-09-20 17:49:06.999100+0200 Mapbox GL Cordova MBTiles[9934:3252250] [CDVTimer][localstorage] 1.074970ms
2017-09-20 17:49:06.999226+0200 Mapbox GL Cordova MBTiles[9934:3252250] [CDVTimer][TotalPluginStartup] 37.927985ms
2017-09-20 17:49:07.987452+0200 Mapbox GL Cordova MBTiles[9934:3252303] libMobileGestalt MobileGestaltSupport.m:153: pid 9934 (Mapbox GL Cordova MBTiles) does not have sandbox access for frZQaeyWLUvLjeuEK43hmg and IS NOT appropriately entitled
2017-09-20 17:49:07.987599+0200 Mapbox GL Cordova MBTiles[9934:3252303] libMobileGestalt MobileGestalt.c:550: no access to InverseDeviceID (see <rdar://problem/11744455>)
2017-09-20 17:49:09.582580+0200 Mapbox GL Cordova MBTiles[9934:3252250] Resetting plugins due to page load.
2017-09-20 17:49:09.745905+0200 Mapbox GL Cordova MBTiles[9934:3252250] Finished load of: file:///var/containers/Bundle/Application/3C8F2846-8171-4389-A861-58485458CCCA/Mapbox%20GL%20Cordova%20MBTiles.app/www/index.html
And when I connect safari to debug i see the error: Webcore: Worker(15): EXC_BAD_ACCESS (code=1, address=0x0).
Any idea why this is happening??
Ensure iOS compatibility
Support raster-dem in offline
It would be extremely cool if raster-dem source will be supported while using offline to reduce the size of the hillshading database and allow cool hillshading capablilities.
https://docs.mapbox.com/studio-manual/examples/hillshade/
It might take me sometime, but I might be able to contribute the implementation if I'll manage to make it work...
JHelp with Layers
Hi I am trying to create and display a custom Layer once the Map has loaded.
The Layer creates and is available . But never displays on Map
Any Suggestions would be helpful
Markers wrong location on map
Did you ever tried adding markers to the map? I did and they show up on the wrong location...
var element = document.createElement('div');
element.className = 'marker';
new mapboxgl.Marker(element)
.setLngLat([51.57, 4.20])
.addTo(self.map);
The style of the element is correct, it has absolute positioning etc.
Ejemplo en marcha
Hola,
Al hacer el build de la demo, esta solo muestra un mapa en blanco. Hay que hacer algo más de lo que se dice en la documentación?
Gracias
how to call the mbtiles outside www/data/?
Remove custom mapbox dependency and update it to the last version that works
The mapbox-gl-js hacky needed to run the app properly on ios environment was merged Fix ajax when loading local files on iOS web view (#6610)
We are able to change mapbox-gl-js dependency to the last version that works.
- 0.49.0
- 0.50.0
- 0.51.0
- 0.52.0
Upgrade mapbox-gl or maybe will be better to develop a http server cordova plugin?
Hi, i'm testing the project and it is running ok. I will try to upgrade to a newest version but looking at code i asking myself if it is not better to resolve the problem throught a cordova plugin that create an internal http server that respond with the data of mbtile.
I think it will be simplier and much easier to integrate with mapbox-gl and inside other cordova aplications.
I don't know if the performance will be worst or not.
Check if cordova plugin file is installed
App doesn't check if the plugin is installed and throws an exception trying to get the database
mapbox-gl-cordova-offline.js:509 TypeError: Cannot read property 'applicationDirectory' of undefined
at mapbox-gl-cordova-offline.js:591
at new Promise (<anonymous>)
at t.copyDatabaseFile (mapbox-gl-cordova-offline.js:591)
at t.openDatabase (mapbox-gl-cordova-offline.js:591)
at new t (mapbox-gl-cordova-offline.js:591)
at exports.create (mapbox-gl-cordova-offline.js:209)
at new t (mapbox-gl-cordova-offline.js:211)
at t.addSource (mapbox-gl-cordova-offline.js:369)
at e.addSource (mapbox-gl-cordova-offline.js:483)
at mapbox-gl-cordova-offline.js:595
Evented.fire @ mapbox-gl-cordova-offline.js:509
Map on IOS slowing down and eventually crashes
When using the plugin on IOS 11 (iPhone 6), the map is really fast at the beginning but slows down with every zoom/move. Eventually the app crashes. I already changed the cache size to 0.
I stil see a memory problem:
2017-11-05 16:26:01.381482+0100 Store Check App[1322:52411] Got memory pressure notification (critical)
Message from debugger: Terminated due to memory issue
Do you have any ideas? I know you didn't test it on IOS...
Map labels not showing
Sorry to keep firing questions, but this one is kinda essential. Did your labels show on the map? I have label layers in my style and glyphs configured correctly, but they are never shown...
It looks like the layers aren't loaded from the tile.
It appears to go wrong because the layer isn't inside the bucket, so this won't return a layer for the symbol:
Inside: drawLayerSymbols
var bucket = tile.getBucket(layer);
This is the data (without raw data) returned from the database:
{
"rawTileData":"",
"buckets":[
{
"zoom":6,
"layerIds":[
"landuse-residential0"
],
"arrays":{
"layoutVertexArray":{
"length":190,
"arrayBuffer":{
}
},
"elementArray":{
"length":157,
"arrayBuffer":{
}
},
"elementArray2":{
"length":190,
"arrayBuffer":{
}
},
"paintVertexArrays":{
},
"segments":[
{
"vertexOffset":0,
"primitiveOffset":0,
"vertexLength":190,
"primitiveLength":157
}
],
"segments2":[
{
"vertexOffset":0,
"primitiveOffset":0,
"vertexLength":190,
"primitiveLength":190
}
]
}
},
{
"zoom":6,
"layerIds":[
"park0"
],
"arrays":{
"layoutVertexArray":{
"length":844,
"arrayBuffer":{
}
},
"elementArray":{
"length":758,
"arrayBuffer":{
}
},
"elementArray2":{
"length":844,
"arrayBuffer":{
}
},
"paintVertexArrays":{
},
"segments":[
{
"vertexOffset":0,
"primitiveOffset":0,
"vertexLength":844,
"primitiveLength":758
}
],
"segments2":[
{
"vertexOffset":0,
"primitiveOffset":0,
"vertexLength":844,
"primitiveLength":844
}
]
}
},
{
"zoom":6,
"layerIds":[
"park_outline0"
],
"arrays":{
"layoutVertexArray":{
"length":1828,
"arrayBuffer":{
}
},
"elementArray":{
"length":1746,
"arrayBuffer":{
}
},
"paintVertexArrays":{
},
"segments":[
{
"vertexOffset":0,
"primitiveOffset":0,
"vertexLength":1828,
"primitiveLength":1746
}
],
"segments2":[
]
}
},
{
"zoom":6,
"layerIds":[
"water0"
],
"arrays":{
"layoutVertexArray":{
"length":1293,
"arrayBuffer":{
}
},
"elementArray":{
"length":1188,
"arrayBuffer":{
}
},
"elementArray2":{
"length":1293,
"arrayBuffer":{
}
},
"paintVertexArrays":{
},
"segments":[
{
"vertexOffset":0,
"primitiveOffset":0,
"vertexLength":1293,
"primitiveLength":1188
}
],
"segments2":[
{
"vertexOffset":0,
"primitiveOffset":0,
"vertexLength":1293,
"primitiveLength":1293
}
]
}
},
{
"zoom":6,
"layerIds":[
"waterway0"
],
"arrays":{
"layoutVertexArray":{
"length":454,
"arrayBuffer":{
}
},
"elementArray":{
"length":432,
"arrayBuffer":{
}
},
"paintVertexArrays":{
},
"segments":[
{
"vertexOffset":0,
"primitiveOffset":0,
"vertexLength":454,
"primitiveLength":432
}
],
"segments2":[
]
}
},
{
"zoom":6,
"layerIds":[
"road_trunk_primary0"
],
"arrays":{
"layoutVertexArray":{
"length":2443,
"arrayBuffer":{
}
},
"elementArray":{
"length":2095,
"arrayBuffer":{
}
},
"paintVertexArrays":{
},
"segments":[
{
"vertexOffset":0,
"primitiveOffset":0,
"vertexLength":2443,
"primitiveLength":2095
}
],
"segments2":[
]
}
},
{
"zoom":6,
"layerIds":[
"road_major_motorway0"
],
"arrays":{
"layoutVertexArray":{
"length":562,
"arrayBuffer":{
}
},
"elementArray":{
"length":534,
"arrayBuffer":{
}
},
"paintVertexArrays":{
},
"segments":[
{
"vertexOffset":0,
"primitiveOffset":0,
"vertexLength":562,
"primitiveLength":534
}
],
"segments2":[
]
}
},
{
"zoom":6,
"layerIds":[
"admin_sub0"
],
"arrays":{
"layoutVertexArray":{
"length":1738,
"arrayBuffer":{
}
},
"elementArray":{
"length":1314,
"arrayBuffer":{
}
},
"paintVertexArrays":{
},
"segments":[
{
"vertexOffset":0,
"primitiveOffset":0,
"vertexLength":1738,
"primitiveLength":1314
}
],
"segments2":[
]
}
},
{
"zoom":6,
"layerIds":[
"admin_country0"
],
"arrays":{
"layoutVertexArray":{
"length":678,
"arrayBuffer":{
}
},
"elementArray":{
"length":582,
"arrayBuffer":{
}
},
"paintVertexArrays":{
},
"segments":[
{
"vertexOffset":0,
"primitiveOffset":0,
"vertexLength":678,
"primitiveLength":582
}
],
"segments2":[
]
}
}
],
"featureIndex":{
"coord":{
"z":6,
"x":33,
"y":31,
"w":0,
"id":64550,
"posMatrix":null
},
"overscaling":1,
"grid":{
},
"featureIndexArray":{
"length":523,
"arrayBuffer":{
}
},
"bucketLayerIDs":{
"0":[
"landuse-residential0"
],
"1":[
"landuse0"
],
"2":[
"park0"
],
"3":[
"park_outline0"
],
"4":[
"water0"
],
"5":[
"waterway0"
],
"6":[
"tunnel_railway_transit0"
],
"7":[
"road_path0"
],
"8":[
"road_minor0"
],
"9":[
"tunnel_minor0"
],
"10":[
"tunnel_major0"
],
"11":[
"road_trunk_primary0"
],
"12":[
"road_secondary_tertiary0"
],
"13":[
"road_major_motorway0"
],
"14":[
"railway-transit0"
],
"15":[
"railway0"
],
"16":[
"bridge_minor
case0"
],
"17":[
"bridge_major
case0"
],
"18":[
"bridge_minor0"
],
"19":[
"bridge_major0"
],
"20":[
"admin_sub0"
],
"21":[
"admin_country0"
],
"22":[
"place_label_city0"
],
"23":[
"country_label-other0"
],
"24":[
"country_label0"
]
},
"paintPropertyStatistics":{
"landuse-residential0":{
},
"landuse0":{
},
"park0":{
},
"park_outline0":{
},
"water0":{
},
"waterway0":{
},
"tunnel_railway_transit0":{
},
"road_path0":{
},
"road_minor0":{
},
"tunnel_minor0":{
},
"tunnel_major0":{
},
"road_trunk_primary0":{
},
"road_secondary_tertiary0":{
},
"road_major_motorway0":{
},
"railway-transit0":{
},
"railway0":{
},
"bridge_minor
case0":{
},
"bridge_major
case0":{
},
"bridge_minor0":{
},
"bridge_major0":{
},
"admin_sub0":{
},
"admin_country0":{
},
"place_label_city0":{
},
"country_label-other0":{
},
"country_label0":{
}
}
},
"collisionTile":{
"angle":0,
"pitch":0,
"grid":{
},
"ignoredGrid":{
}
},
"collisionBoxArray":{
"length":95,
"arrayBuffer":{
}
}
}
Upgrade mapbox-gl dependency to last version
Which implies refactoring
Missing street names over z14?
Hi,
Over zoom level 14 (?) some street names stacked invisible. With the official openmaptiles app the labels are working. I'm using the same mbtiles file and style.json as the app (I have extracted the style contents from the apk and read the file url with adb logcat).
Is it a bug, or the downloaded file doesn't contain all data?
I recorded a video:
https://youtu.be/dvKBL9vZHfo
My config for the labels:
{
"id": "highway-name-minor",
"type": "symbol",
"source": "openmaptiles",
"source-layer": "transportation_name",
"minzoom": 13,
"filter": [
"all",
["==", "$type", "LineString"],
["in", "class", "minor", "service", "track"]
],
"layout": {
"text-size": {
"base": 1,
"stops": [[13, 12], [14, 13]]
},
"text-font": ["Klokantech Noto Sans Regular"],
"text-field": "{name}",
"symbol-placement": "line",
"text-rotation-alignment": "map"
},
"paint": {
"text-halo-blur": 0.5,
"text-color": "#765",
"text-halo-width": 1
}
},
{
"id": "highway-name-major",
"type": "symbol",
"source": "openmaptiles",
"source-layer": "transportation_name",
"minzoom": 12.2,
"filter": ["in", "class", "primary", "secondary", "tertiary", "trunk"],
"layout": {
"text-size": {
"base": 1,
"stops": [[13, 12], [14, 13]]
},
"text-font": ["Klokantech Noto Sans Regular"],
"text-field": "{name}",
"symbol-placement": "line",
"text-rotation-alignment": "map"
},
"paint": {
"text-halo-blur": 0.5,
"text-color": "#765",
"text-halo-width": 1
}
},
Build failing with listed errors
Fresh install of node, npm, cordova and ADS on windows.
The Cordova sample app (HelloWorld) runs fine in android emulator and on android phone device.
But this app fails with errors shown below. Any tips appreciated!
Here is sequence of commands leading to the failure:
> cordova --version
8.0.0
> git clone https://github.com/oscarfonts/mapbox-gl-cordova-mbtiles.git
no errors.
> cd mapbox-gl-cordova-mbtiles
> cordova platform add android
Using cordova-fetch for [email protected]
Adding android project...
Creating Cordova project for the Android platform:
Path: platforms\android
Package: co.geomati.mapboxGLCordovaMbtiles
Name: Mapbox_GL_Cordova_MBTiles
Activity: MainActivity
Android target: android-25
Subproject Path: CordovaLib
Android project created with [email protected]
Discovered plugin "cordova-plugin-whitelist" in config.xml. Adding it to the project
Installing "cordova-plugin-whitelist" for android This plugin is only applicable for versions of cordova-android greater than 4.0. If you have a previous platform vers
ion, you do not need this plugin since the whitelist will be built in.
Adding cordova-plugin-whitelist to package.json
Saved plugin info for "cordova-plugin-whitelist" to config.xml
Discovered plugin "cordova-plugin-file" in config.xml. Adding it to the project
Installing "cordova-plugin-file" for android
Installing "cordova-plugin-compat" for android
The Android Persistent storage location now defaults to "Internal". Please check this plugin's README to see if your application nee
ds any changes in its config.xml.
If this is a new application no changes are required.
If this is an update to an existing application that did not specify an "AndroidPersistentFileLocation" you may need to add:
"<preference name="AndroidPersistentFileLocation" value="Compatibility" />"
to config.xml in order for the application to find previously stored files.
Adding cordova-plugin-file to package.json
Saved plugin info for "cordova-plugin-file" to config.xml
Discovered plugin "cordova-sqlite-ext" in config.xml. Adding it to the project
Installing "cordova-sqlite-ext" for android
installing external dependencies via npm
npm install of external dependencies ok
Adding cordova-sqlite-ext to package.json
Saved plugin info for "cordova-sqlite-ext" to config.xml
Discovered plugin "cordova-plugin-device" in config.xml. Adding it to the project
Installing "cordova-plugin-device" for android
Adding cordova-plugin-device to package.json
Saved plugin info for "cordova-plugin-device" to config.xml
--save flag or autosave detected
Saving android@~6.2.3 into config.xml file ...
> cordova platforms --list
Installed platforms:
android 6.2.3
Available platforms:
browser ~5.0.1
ios ~4.5.4
osx ~4.0.1
windows ~5.0.0
www ^3.12.0
> cordova run android
ANDROID_HOME=C:\androidsdks
JAVA_HOME=C:\Program Files\Java\jdk1.8.0_101
BUILD SUCCESSFUL in 1s
1 actionable task: 1 executed
Subproject Path: CordovaLib
The Task.leftShift(Closure) method has been deprecated and is scheduled to be removed in Gradle 5.0. Please use Task.doLast(Action)
instead.
at build_12p8shvf5uajbb4h6u8hmyvkd.run(C:\cordova\mapbox-gl-cordova-mbtiles\platforms\android\build.gradle:137)
FAILURE: Build failed with an exception.
- What went wrong:
A problem occurred configuring root project 'android'.
Could not resolve all dependencies for configuration ':_debugApk'.
A problem occurred configuring project ':CordovaLib'.
> Failed to notify project evaluation listener.
> com.android.build.gradle.tasks.factory.AndroidJavaCompile.setDependencyCacheDir(Ljava/io/File;)V
-
Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. -
Get more help at https://help.gradle.org
BUILD FAILED in 1s
(node:9344) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: cmd: Command failed with exit co
de 1 Error output:
FAILURE: Build failed with an exception.
- What went wrong:
A problem occurred configuring root project 'android'.
Could not resolve all dependencies for configuration ':_debugApk'.
A problem occurred configuring project ':CordovaLib'.
> Failed to notify project evaluation listener.
> com.android.build.gradle.tasks.factory.AndroidJavaCompile.setDependencyCacheDir(Ljava/io/File;)V
-
Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. -
Get more help at https://help.gradle.org
BUILD FAILED in 1s
(node:9344) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are no
t handled will terminate the Node.js process with a non-zero exit code.
inflate tiles natively
currently, tiles are decompressed from the sqlite database in the main javascript thread.
It would be faster to decompress natively using a cordova plugin, or even a sqlite C function.
The inflate call is here
https://github.com/oscarfonts/mapbox-gl-cordova-mbtiles/blob/master/src/mbtiles_source.js#L93
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
OpenClaw
Personal AI Assistant
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.