I have an Ionic 2 app with an embedded map, it needs to work 100% offline so I chose to use openlayers 3 with local z/x/y tiles in png format. Now, the problem with that is the size of the map. I'm thinking about switching to a vector tile, but it needs to be offline as well. I know that OL3 supports pbf vector tiles servers

var layer = new ol.layer.VectorTile({
source: new ol.source.VectorTile({
    attributions: '© <a href="https://openmaptiles.org/">OpenMapTiles</a> ' +
    '© <a href="http://www.openstreetmap.org/copyright">' +
    'OpenStreetMap contributors</a>',
    format: new ol.format.MVT(),
    tileGrid: tilegrid,
    tilePixelRatio: 8,
    url: 'https://free-0.tilehosting.com/data/v3/{z}/{x}/{y}.pbf?key=tXiQqN3lIgskyDErJCeY'

But I never found an example of tile in a local pbf (or any other vectorial format), nor a way to split and crop a big pbf to only include the interesting area.

Are local pbf supported?

Can I use something like url: 'assets/tiles/{z}/{x}/{y}.pbf' to include a local vector file?

How do I split and crop to get the {z}/{x}/{y} folder structure only for the relevant area?

closed as too broad by PolyGeo Apr 28 '17 at 7:44

Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.


All of this is possible...

PBFs can be stored in a folder and loaded directly - same as PNG or JPEG map tiles. OpenLayers is able to display such tiles (from http://localhost:8080/ for example).

See a demo of hosting of vector map tiles on GitHub directly: http://klokantech.github.io/mapbox-gl-js-offline-example/ with code at https://github.com/klokantech/mapbox-gl-js-offline-example and https://github.com/klokantech/vector-tiles-sample#host-the-vector-tiles-without-any-server-at-all

and adjust our the OpenLayers viewer code at https://openmaptiles.org/docs/website/openlayers/.

For creating vector tiles check the OpenMapTiles project or tippecanoe.

If you need OpenStreetMap vector tiles for a small area of your choice - you can get one at https://openmaptiles.com/extracts/. The service also allows filtering the data which you don't need in the vector tiles - to decrease the size of the vector tiles. Small tiles are ideal for offline use and distribution with mobile apps. Just upload your GL style JSON - and the TileShrink helps to filter out features, layers and attributes which you don't display on your maps to your users. Then the vector tiles are tailored directly for your use case.

I see you know already our OpenMapTiles and MapTiler projects.

If you need more help - feel free to contact us.

Not the answer you're looking for? Browse other questions tagged or ask your own question.