oscarfonts / mapbox-gl-cordova-offline Goto Github PK
View Code? Open in Web Editor NEWOffline vector maps in Cordova using Mapbox GL JS
License: Other
Offline vector maps in Cordova using Mapbox GL JS
License: Other
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
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?
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.
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...
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
}
},
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
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
Get inspiration from this @geostarters class:
https://github.com/geostarters/mapbox-gl-js/blob/master/src/source/raster_tile_offline_source.js
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...
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.
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
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
Which implies refactoring
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
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??
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.
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
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 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?
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>" } },
"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.
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.
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!
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.
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.
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.
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.
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
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?
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...
Why aren't Windows and Apple OS X included as Cordova platforms?
What would it take to add them?
Thanks
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?
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?
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":{
}
}
}
Do you have any idea, why the road names of smaller roads are not showing in the example app with the Barcelona tiles?
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!
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.