oscarfonts / mapbox-gl-cordova-offline

Offline vector maps in Cordova using Mapbox GL JS
Other
60 stars 37 forks source link

Upgrade mapbox-gl or maybe will be better to develop a http server cordova plugin? #52

Open lasterra opened 4 years ago

lasterra commented 4 years ago

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.

stefanmdt commented 4 years ago

I managed to update mapbox to version 1.2.1. With higher versions it is not working out of the box.

There also seem to be some bugs in the current version, e.g. missing street name labels: https://github.com/oscarfonts/mapbox-gl-cordova-offline/issues/49

Did you find any relevant native cordova plugins? Those I found look quite outdated, e.g.: https://github.com/rgamez/cordova-plugin-http-mbtiles https://github.com/ffournier/cordova-plugin-mbtiles

lasterra commented 4 years ago

Great links, i will study them.

what i was thinking is to use https://github.com/bykof/cordova-plugin-webserver and mix it with the code https://github.com/oscarfonts/mapbox-gl-cordova-offline/blob/master/src/mbtiles_source.js to return the tile

Develop a plugin in android will not be dificult for me but i don't know iOS so this is why i select cordova-plugin-webserver

lasterra commented 4 years ago

Mbtiles plugins are prepared to process raster tiles and i want to proces mvt/pbf vector tiles.

My idea works, the only problem is that cordova-plugin-webserver only return text or files and vector tiles are binary pbf data, so it is necesary to write a file on disk to put it in http server response.

I think i could improve the performance if i modify the webserver to translate from base64 to binary, but it is working quite good without it.

shafiramaki commented 4 years ago

@lasterra can you please share the code?

lasterra commented 4 years ago

Yeah, code it is tricky

First decode mvt to write it on disk

var base64Data = res.rows.item(0).base64_tile_data; var tileByteArray = base64js.toByteArray(base64Data); var rawData = pako.inflate(tileByteArray); var unzipedbase64 = base64js.fromByteArray(rawData); var blobData = localThis.b64toBlob(unzipedbase64, "application/octet-stream") ;

Then write blob using cordova-file-plugin

Then serve using cordova-plugin-webserver

shafiramaki commented 4 years ago

@lasterra thanks, but I used another repository and its working fine

lasterra commented 4 years ago

which one?

stefanmdt commented 4 years ago

@shafiramaki which one? :)

shafiramaki commented 4 years ago

@stefanmdt https://github.com/AirSuite/mapbox-gl-js-cordova-offline-example

stefanmdt commented 4 years ago

@shafiramaki Thanks for sharing. I tried to start the project for ios based on the readme, but it doesn't work ("Database Error: no such table: tiles"). Also it doesn't look like this project is very active / maintained.

@lasterra How good is the performance? Do you have a working example that you could upload to a repository?

shafiramaki commented 4 years ago

@stefanmdt am aslo in trouble , want to integrate with quasar framework but getting the same error ("Database Error: no such table: tiles") , actually it was fine with a normal cordova project I test it in android platform through real device, but i dont know why its not working in quasar. if you find any solution let me know please. @lasterra it will be my pleasure to upload it in repository.

shafiramaki commented 4 years ago

@stefanmdt recently worked for me, there are some points to be notice if you wish this is my skype id "live:shafimm40" then we will be in touch.

itbeyond commented 4 years ago

Guys I am looking at this and wondering where you all ended up. I am working on a project that has millions of offline tiles stored in Base64 within SQL on Cordova - it has worked great using Leaflet and rewiting the getTile calls to inject the Base64 as img. Now looking at MapBox GLJS engine for better rotation and Vector support however must be able to serve local tile data.

Playing around with cordova-plugin-webserver does look promising but the text output is a real pain, I wonder if you have done anything better with this?

stefanmdt commented 4 years ago

In my opinion, the general approach of this plugin could be the cleanest way of implementing a vector based offline map. Unfortunately, I neither managed to fix the bugs in the current version nor to update mapbox to the current version (the corresponding project was frozen, so I stopped my work at some point).

itbeyond commented 4 years ago

@stefanmdt thanks for your update. I have made my project work currently using a local device webserver approach - it is a bit clumsy as I had to create a local file like @lasterra but added a file delete after 500ms after serve. Also adding expire, max-age and caching headers in the web server helps a lot.

I do agree that the approach used in this repo is the best way to make this work and I may get back to this and attempt to move it forward. Thanks for your work on this and for the other input received.

itbeyond commented 4 years ago

Just submitted pull #54 to bring this mapbox-gl-js to the latest version 1.11.0. Good luck, I may submit additional pulls on updates to DB drivers and to add Windows UWP support.