How to display vector tiles (.pbf) in leaflet v3 with React and Typescript?
I found many similar questions (Render mapbox vector tiles inside react-leaflet?, Style-optimized vector tiles in react-leaflet v3?, ...), but no answer is general enough to handle my use case (display source from https://www.openaip.net/, in particular using the API documented at: https://docs.openaip.net/?urls.primaryName=Tiles%20API#/Tile%20Data/get_data__layer___z___x___y__pbf )
Related
I'm trying to make my own renderer for Mapbox MVT vector tiles, but I have hit the obstacle and couldn't find the answer. My problem is that MVT tile downloaded form Mapbox server contains all roads, but only a few bulding numbers (should be much more for given area) and no land types (grean area on map) and buildings.
Anyone had same problem or know the answer?
link I use to download tile is:
https://api.mapbox.com/v4/mapbox.mapbox-terrain-v2,mapbox.mapbox-streets-v7/18/143415/87627.mvt?access_token={access_token}
Below raster tile for the same area:
The trick is in decoding MVT tiles (using mapbox-vector-tile-java), to parse it properly MvtReader.RING_CLASSIFIER_V1 needs to be used:
final JtsMvt result = MvtReader.loadMvt(f, new GeometryFactory(), new TagKeyValueMapConverter(), MvtReader.RING_CLASSIFIER_V1);
Resolved thanks to boldtrn commit on mapsforge/vtm
I saw several places where OSM data is converted to MVT (mapbox vector tiles) for simple rendering.
Those include:
OSRM which provides MVT based image of the route for rendering
OpenMapTiles which enables downloading of OSM maps in MVT format
GeoServer which can import OSM and export MVT
Is there a simple tool to convert OSM data to MVT locally?
I have my own data in OSM format that I want to convert to MVT and store locally, without rendering to a map image.
The mapbox/awesome-vector-tiles repository at GitHub has a long list of Mapbox Vector Tile implementations. This is the list as of today:
Parsers & Generators
vector-tile-js - Parses vector tiles with JavaScript.
mapnik-vector-tile - C++ vector tile read/write implementation on top of Mapnik.
mbtiles-cpp - C++ library for decoding of mbtiles and vector data into function callbacks.
vector-tile-py - Python tool to convert a Mapnik vector tile to GeoJSON
node-mapnik - Node.js API for vector tiles which depends on mapnik-vector-tile
vector-tile-cs - Parses vector tiles with C# (native C# implementation, no dependencies).
mapbox-vector-tile-cs - Parses vector tiles with C# (uses protobuf-net).
tilelive-bridge - Implements Tilelive API for creating vector tiles from traditional Mapnik datasources in Node.js.
tilelive-vector - Implements Tilelive API for reading vector tiles and rendering to image tiles in Node.js.
mapbox-vector-tile is a Python package for vector tile encoding maintained by Mapzen. (It is used in Mapzen's vector tile service).
geojson-vt - Slice GeoJSON into vector tiles on the fly in the browser.
java-vector-tile - A java encoder and decoder for vector tiles.
mapbox-vector-tile-java - Encode and decode v2.1 Mapbox Vector Tiles. Convert JTS Geometry to and from MVT features, including simple user data support. Utility functions for converting world coordinates to MVT coordinates and clipping to a tile envelope.
cached-vector-tile - An alternative implementation of the vector-tile-js interface, backed by plain JS objects/arrays rather than parsed-on-demand protobuf data. Trades away memory efficiency for faster feature.loadGeometry() calls.
tilegrinder - A helper library for applying a data altering function on each vector tile in an MBTiles, using the native protobuf wrapper for de- and encoding, recompressing the results and storing them either in an MBTiles or as single files.
SwiftVectorTiles - A Swift encoder for vector tiles according to the Mapbox vector tile spec.
Clients
Mapbox GL Native - C++/OpenGL vector maps library with native SDKs for Android, iOS, Node.js, macOS, and Qt
Mapbox GL JS - JavaScript/WebGL vector maps library.
OpenLayers 3 - JavaScript vector & raster library.
WhirlyGlobe/Maply - Objective C code that is able to read and render vector tiles(and style with mapnik xml) on iOS devices.
Leaflet.MapboxVectorTile is able to read PBF MapboxVectorTiles from a REST endpoint and render them as a TileLayer on a Leaflet Map. Use this option if you want to utilize vector tiles on a standard Leaflet web map without needing WebGL.
CARTO Mobile SDK - C++ maps library focused on offline features, for iOS, Android, Windows Phone and Xamarin with bindings for Java, Objective-C and C#. Based on Nutiteq Maps SDK, but open source and uses CartoCSS.
Mapzen Tangram - JavaScript library for rendering 2D & 3D maps live in a web browser with WebGL, supports MVT, GeoJSON, TopoJSON
Mapzen Tangram-es - C++ library for rendering 2D and 3D maps using OpenGL ES 2 with custom styling and interactions
mapbox-gl-leaflet - Create Mapbox GL layers in Leaflet
react-native-mapbox-gl - Render Mapbox GL maps from React applications
hoverboard - Render vector tiles on canvas with Leaflet 0.7.x (supports GeoJSON, TopoJSON, and protobuf)
Leaflet.VectorGrid - Display gridded vector data (sliced GeoJSON, TopoJSON or Mapbox Vector Tiles) in Leaflet 1.0.0
ArcGIS API for JavaScript - Draw vector tile layers as part of your web map. Rendering done via mapbox-gl-js integration.
mapscii - A Vector Tile to Braille and ASCII renderer for xterm-compatible terminals
Applications / Command line tools
Mapbox Studio - Desktop design studio for both creating vector tiles from raw geodata and for rendering them on-the-fly into image tiles. Internally uses tilelive.js modules to handle vector tiles (see tilelive-bridge and tilelive-vector)
kosmtik - Design maps with CartoCSS and Mapnik.
ArcGIS Pro - Generate vector tiles from maps authored in ArcGIS Pro or imported from ArcMap.
MVT Styler - map style editor for vector tiles.
Maputnik - A visual style editor for the Mapbox GL style specification.
CLI Utilities
Datamaps C application that can be used to create vector tiles and store them in an mbtiles. See the render-vector command.
tilemaker - Command line tool to produce vector tiles directly from an .osm.pbf extract without an intermediate database.
vector-tiles-producer Command line tool in C++ to creates vector tiles for a given area at chosen zoom levels using a Mapnik XML.
tippecanoe - Build vector tilesets from large collections of GeoJSON features.
vt-geojson - decodes vector tiles to GeoJSON FeatureCollections
tl - An alternate command line interface to tilelive
tileshrink - Reduce the layer extent and simplify the resulting geometries of all vector tiles in an MBTiles
tiler - Command line tool for converting GeoJSON, Shapefiles or PostGIS layer to raw Vector Tiles (or MBTiles)
geojson2mvt - npm package for building a static vector tile tree for given xyz bounds from a geojson file (uses vt-geojson)
Mapbox GL JS Plugins
gl-draw - Adds support for drawing and editing features on Mapbox GL JS maps
Servers
tessera - Supports serving and rendering vector tiles. Uses the same core libraries as Mapbox Studio.
tilestrata - with tilestrata-vt, it can generate Mapnik Vector Tiles; with tilestrata-postgismvt, it can serve Mapbox Vector Tiles from a PostGIS db
SpatialServer (PGRestAPI) - A multi-purpose GeoSpatial NodeJS web server created at SpatialDev that not only serves MBTiles stuffed with vector tiles, it can also cut vector tiles on the fly from a PostGIS database.
Utilery Server to generate vector tiles from PostGIS queries. Python based
tileserver Mapzen Vector Tile Service.
TileStache added support for Mapbox Vector tiles via .pbf extension requests.
Kartotherian Wikipedia tile server with Tilerator backend tile pre-generator
ArcGIS Online - Supports serving vector tiles and rendering in the mapping application powered by the ArcGIS API for JavaScript
Portal for ArcGIS - Supports serving vector tiles and rendering in the mapping application powered by the ArcGIS API for JavaScript
tilesplash - A light and quick nodejs webserver for serving topojson or mapbox vector tiles from a postgis backend
go-vtile-example - An example server written in Go
Tegola - A MVT server written in pure Go that supports serving tiles from a PostGIS data provider.
t-rex - MVT server in a single executable written in Rust. Serves tiles from PostGIS supporting custom tile grids.
Low-level utilities
mapbox-gl-function - Mapbox GL style function evaluator
mapbox-gl-filter-simplify - Simplifies and complexifies filters in Mapbox GL Styles
vt-pbf serialize JavaScript objects representing vector tiles into binary Protocol Buffer encodings of vector tiles
Articles
Vector tiles remixed - guide to using tilemaker to generating vector tiles
Specific thing with MVT is that this is tiled and multi-resolution (zoom-based) display-optimized, more like "rendered" map for visual fast rendering and styling, it is not your typical geodata format really. For example it does not have geographical coordinates in it, it has "pixel space" coordinates in tiles for your vector objects. This makes 'simple conversion' from/to geodata quite tricky, and very typical conversion solution is a strange one - use use map server or service with your data and then scrape tiles from it. For tile scraping the best tool seems to be tilelive-copy.
However, closest what you may want from the long list above would be tippecanoe which converts GeoJSON to MVT (in a mbtiles file). If your data is in .osm format, then you need to convert it to geojson; but there are other tools for it, for example ogr2ogr. Be aware that OSM files include many data layers and the structure is quite specific, so you need to find well-working configurations for all conversion steps.
After some long time search, here is my conclusion at the very moment:
gdal should be useful with ogr2ogr cli tool converter. Theorically, it is able to convert from osm to mvt (geojson step should not be mandatory).
tippecanoe does a quiet equivalent thing, from geojson to mvt (ogr2ogr or osmium can help to convert from .osm to .geojson)
But the devil is in details: you need to be explicit on what data go on what mvt layer (water, roads, buildings, etc...).
I've not found a convenient "all-in-one" tool able to convert osm building or building parts polygons and relations into mvt buildings layer, and so on... It looks like each team (mapbox and co) keeps it secretely behind API services with API key system.
My map's source file is GeoJSON, but it is very large and very slow. Is there a way to convert this to vector tiles on the fly using MapBox GL JS? (Load the GeoJSON, pre-process the file into vector tiles, and show use the vector tiles as the base map.) It seems that vector tiles are much faster.
I've tried all the GeoJSON-VT tutorials and examples that I could, like the one on MapBox's site, but it just says that GeoJSON-VT works under the hood, so it isn't much help. The others mostly apply to Leaflet, not MapBox GL JS.
Meanwhile, every example I find that uses a large dataset always does so via vector tiles:
map.addSource('x', {
"type": "vector",
"url": "url"
});
For reference, I am loading my file using this method:
map.addSource('x', {
type: 'geojson',
data: 'file.geojson'
});
In case your GeoJSON file is static, you could use mapbox/tippecanoe to convert the GeoJSON to an .mbtiles file. You could then either upload the file to Mapbox as a tileset (about tilesets) or you could serve your own vector tile source from a web server using the .mbtiles file (reference implementation).
If your GeoJSON file is more dynamic, things get a little bit more complicated. I have never used it, but Mapbox Dataset API might be a good solution for that.
To the best of my knowledge, Mapbox-GL-JS uses GeoJSON-VT to automatically convert client-side-loaded GeoJSON files into vector tiles within the browser - so it's already doing what you're asking for.
If this is still "slow", probably the problem is the actual loading and processing - so pre-generating and serving vector tiles is the right answer.
I am using TileStache to render a vector tile layer, works nicely in OpenLayers 3.
http://standup.csc.kth.se/maps/projects.html
However, I would like to add "text path" along the roads (e.g. show the year of expected completion). I could not find any way to do textpath in OpenLayers 3. I only found one for OpenLayers2...
I looked at Leaflet for the this purpose but... it does not work with vector tiles, except with plugins that don't seem to allow a combination with the Leaflet textpath plugin...
Is there any solution for doing textpath with vector tiles ?
Text paths along lines are not yet supported in OpenLayers 3, but are a planned feature that should be available later this year.
In the meantime, you could calculate label points and angles on the server and add those to your vector tiles. Then you can style them with a simple ol.style.Text and the rotation option.
I am writing an application that needs to show a variable number of TileLayers and Polygons on a Bing Maps control in an order specified by another application.
Whilst I can get all items to display correctly, the zIndex I set doesn't do as I expect - the polygons appear in the correct order in relation to each other as do the tile layers, but all the tile layers are always below the polygons, e.g.
Expected display order set using zIndex:
TileLayer 1
Polygon 1
TileLayer 2
Polygon 2
Renders as:
Polygon 1
Polygon 2
TileLayer 1
TileLayer 2
Is this layout possible using Bing maps?
Polygon layers are vectors, whereas tile layers are rasters. I believe that Bing Maps (and, for that matter, every other web-mapping API that I'm aware of - Google Maps, Leaflet etc.) will always render vector layers on top of raster layers.