Mapbox GL using external maps
Asked Answered
S

3

11

I want to use Mapbox GL in my Android application. This service is going to be released soon and I have a tricky question about using the renderer.

I like the renderer itself, but I really want to use my own maps data in the application (not the data, offered by Mapbox and which is paid). For instance, I want to parse OpenStreetMaps data on my own, customise it somehow and then put inside of a renderer to show it in my application.

And now the question: is it possible to use my own maps data while using Mapbox GL? Or it can be only used with Mapbox data?

Thank you in advance for any help. Maybe you know any other well-done solutions for this problem? The thing is, that I want to have vector tiles, not the raster ones. And this project is planned to be developed for iOS later..

Singles answered 18/7, 2015 at 3:33 Comment(0)
P
10

You can use MapBox open-source SDK with your own tiles. The Mapbox Native renderer for Android, iOS or Node.JS can be used directly with tiles hosted outside of MapBox.com platform.

See the sample mobile app "OSM2VectorTiles" loading the vector tiles from a custom server or locally from a embedded MBTiles.

The trick is to point the style attribute in the API to your own JSON style file - which requests the vector tiles from your own server. An example: See https://gist.github.com/klokan/3eee87899644f5d82b3946bf0cd1e176

See project http://www.openmaptiles.org/, where you can download ready to use vector tiles made from OpenStreetMap - or check the documentation of this project on how to generate your own customised vector tiles.

Hosting of the vector tiles itself is described at https://openmaptiles.org/docs/ or https://gis.stackexchange.com/questions/125037/self-hosting-mapbox-vector-tiles

You may need to host somewhere the assets (font glyphs + sprites) and the JSON style itself - or embed these directly into your mobile app.

If you want to rasterize the vector tiles with the same JSON style on a server - for a web-application compatible with old web clients (Leaflet, ...) or for static maps or print output with the same look&feel as you mobile app maps, you can check https://github.com/klokantech/tileserver-gl

Parry answered 25/4, 2016 at 10:27 Comment(2)
Could you give some more information what is the proper way to use embedded MBTiles?Secern
A complete source code showing how to use embedded MBTiles with Mapbox SDK on iOS and Android is now available at: openmaptiles.com/mobile-appParry
F
3

You can use your own tiles. I tried 2 things. Generating my own Mapzen vector tiles (they use same format as Mapbox) And you can also use them for free. Here is their layer descriptions. This is quite work intensive. You need to have postgresql and load whole OSM PBF export into the database, then you run python server which requests data from this database and renders vector tiles. I think it is meant to render all the tiles in queue since it took couple of seconds per page to render visible tiles. Most of the time was spend in python after DB server was queried. It's advantage is that you get nice tiles back. It has basically everything you need, but is much harder to customize. For example if you want to add specific style to cycle ways. You need to go deep into the code and change couple of query templates and a lot of other things.

Then I tried Tilemaker. This is just C++ program which reads OSM PBF dumps and lua config script (where you specify what tags to send into tile) and spits out mapbox tiles. It's advantage is that it is much easier to set up and customize and that all tiles are rendered at once. But it is harder to create nice tiles. (AKA load all the different highway tags are roads just of different kind. It is up to you to specify that but this already works in previously mentioned Mapzen and also Mapbox).

For example kind in Mapzen roads layer In mapzen this is already taken care of but in tilemaker it is up to you to write all the conditionals that get road type from different OSM tags into a layer. And it gets more complicated in landuse tags since kind is a:

combination of the landuse, leisure, natural, highway, aeroway, and amenity OSM tags, or urban area and park or protected land for Natural Earth areas.

Of course you can have completely different tags but it is nice to have one which tells you what landuse you are looking at.

You ned to know that Mapbox, mapzen your custom mapbox tiles all use same format, but each will have different tags. So the style you create for one probably won't work for the other.

For creating styles you can use Mapbox Studio (but is probably useless since it is in public beta currently and I'm not sure if you can specify own tiles there).

I used Mapbox codeflow, which is basically nodejs server with gulp script that reloads site with a map when style file changes. It also supports writing styles in toml, JSON5 and yml in addition to JSON. It also shows errors kinda nicely. (only line numbers are missing) Currently it support version 7 of styles but 8 is currently out. For getting line numbers of errors I used Mapbox GL style spec which can also update style to the new version. You can also try Glug which is a different style language which compiles to Mapbox GL style. It is a little more compact.

For using tiles you can also create mbtiles with mb-util and use them.

Fortner answered 9/11, 2015 at 13:17 Comment(2)
Is anyone maintaining a set of styles (or any resource) for switching between mapbox and mapzen vector tiles? (Does this conflict with any copyright/other issues?) Mapzen's api appears to be more flexible and I'm just starting to explore styling their tiles but it seems to be quite a bit of work I'd like to avoid at the moment--especially if someone has already done so. Thanks!Deteriorate
Recently I found OSM2vector which maintains reverse engineered mapbox styles. It is also an opensource project on GitHub. The only problem it seems is that its tiles are 2 versions behind MapBox.Fortner
O
0

If you have a running Tileserver GL, it is as easy as changing the following line from an example app from mapbox:

mapboxMap.setStyle(Style.MAPBOX_STREETS) {
        // Map is set up and the style has loaded. Now you can add data or make other map adjustments.
        }

to

mapboxMap.setStyle(Style.Builder().fromUri("https://maps.somedomain.com/styles/awesome_style/style.json")) {}
Outburst answered 3/8, 2020 at 21:10 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.