Vector Tiles

[pjcozzi]

2D maps like Google, Apple, MapBox GL, and OL3 are moving to actual vectors for rendering vector data, instead of baking vector data into a raster tile. This allows, for example, to make labels always face up even if south is up and to fade out labels so they never hit each other.

For now, this roadmap is a collection of resources on this topic.

• Google Maps + WebGL = MapsGL
• Vector tiles for fast custom maps (video)
• Videos from FOSS4G
• Mapbox Vector Tile Specification
  • blog post
  • tools: vector-tile-js and mapnik-vector-tile
  • Client-side: pbf.js to decode tiles (protocol buffers).
• geojson-vt
• MMT-Vector-Tiles

[pksorensen]

Vector tiles for fast custom maps (video) , http://vimeo.com/10622814 Wrong video ? :)

[pjcozzi]

Fixed. Thanks.

[pjcozzi]

Cesium forum discussion

[pjcozzi]

More discussion: https://groups.google.com/forum/#!topic/cesium-dev/QnOxsA0iwa0

[mramato]

Looks like ESRI is adopting Mapbox vector tiles: https://www.mapbox.com/blog/vector-tile-adoption/

[pjcozzi]

Info from FOSS4G NA 2015.

• Video The State of Vector Tiles

[pjcozzi]

From Mapzen: Look Upon Our Squares of Math in Three Dimensions

[pjcozzi]

• State of the Map 2015 - Vector Rendering Panel - video, transcript

[pjcozzi]

http://osgeo-org.1560.x6.nabble.com/Asking-for-new-vector-tiles-community-module-tt5211994.html

[pjcozzi]

• From Esri: http://blogs.esri.com/esri/arcgis/2015/07/20/vector-tiles-preview/

[GatorScott]

Demo of vector tiles at Esri UC is last video on page

http://www10.giscafe.com/blogs/gissanjay/2015/07/20/keynote-from-jack-dangermond-at-the-2015-esri-user-conference/

From: Patrick Cozzi [mailto:notifications@github.com] Sent: Monday, July 20, 2015 5:45 PM To: AnalyticalGraphicsInc/cesium Subject: Re: [cesium] Vector Tiles (#2132)

• From Esri: http://blogs.esri.com/esri/arcgis/2015/07/20/vector-tiles-preview/

— Reply to this email directly or view it on GitHubhttps://github.com/AnalyticalGraphicsInc/cesium/issues/2132#issuecomment-123053536.

[bensleveritt]

Is this still being considered by Cesium? It would be an impressive feature to tout.

[pjcozzi]

Yes, but our current focus is on 3D Tiles.

[bingqixuan]

Hello, I want to know when will it come out, I'm very looking forward to it~

[pjcozzi]

Current work-in-progress for 3D Tiles vector tiles is in the vector-tiles branch. The final date is still TBA.

[davidyaha]

@pjcozzi Was this issue "fixed" with https://github.com/AnalyticalGraphicsInc/cesium/pull/6097?

[pjcozzi]

@davidyaha that added support for the draft vector tile payload in 3D Tiles, but I would still leave this issue open for other potential vector tile specs.

[OmarShehata]

OSM has global vector data, it would be cool to support that in Cesium and eventually serve it from ion:

https://openmaptiles.com/downloads/dataset/osm/#0.23/0/-26

Forum discussion.

[OmarShehata]

Requested again here: https://github.com/AnalyticalGraphicsInc/cesium/issues/7939

Also perhaps relevant, some thoughts on how TerriaJS loads these vector tiles? https://github.com/AnalyticalGraphicsInc/cesium/issues/6182#issuecomment-362723885

[bampakoa]

Is there any related work or PR that we could follow up?

[icemagno]

How can I extend MapboxImageryProvider to load PBF files instead PNG ? I think I can do something to put it to work using this : https://landtechnologies.github.io/Mapbox-vector-tiles-basic-js-renderer/.

As I can see, this renderer can get a PBF from {x},{y},{z} and render it in any canvas (the Cesium canvas??).

https://landtechnologies.github.io/Mapbox-vector-tiles-basic-js-renderer/debug/basic/google

it is just an idea to start. I know almost nothing about how Providers work. I need to know how to test a new Provider without need to compile all Cesium code. Any way to add it as a plugin? Some code to show me how?

What do you say?

[OmarShehata]

@icemagno you might find the GridImageryProvider useful as a reference here. It's the simplest imagery provider I know of (procedural creates a grid as the tiles): https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Source/Scene/GridImageryProvider.js

It should be straightforward to set up the CesiumJS source code so you can add your custom class, see the build guide here: https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Documentation/Contributors/BuildGuide/README.md#build-guide

[icemagno]

Ok. I'll give a try. BTW: I know you guys have a long expertise to write thousands of lines before build and test but I like to check every step I do in the code.

So... I dont like the "write-build-test" method because I'll spend hours in a lot of builds. Is there some "write-F5-test" way to do this? I mean... can I write my code and immediately check it just refreshing the browser without the need to rebuild every time?

[OmarShehata]

BTW: I know you guys have a long expertise to write thousands of lines before build and test

I don't think that's a good idea no matter how much expertise anyone has :smile:

When running CesiumJS from the source as described in the linked guide above, you can make changes directly to the source and see the changes immediately by refreshing the page or re-running the Sandcastle example. This is how most CesiumJS development is done.

If you have any follow up questions on best practices here, let's take this conversation to the forum so as not to derail this GitHub issue.

[am2222]

How can I extend MapboxImageryProvider to load PBF files instead PNG ? I think I can do something to put it to work using this : https://landtechnologies.github.io/Mapbox-vector-tiles-basic-js-renderer/.

As I can see, this renderer can get a PBF from {x},{y},{z} and render it in any canvas (the Cesium canvas??).

https://landtechnologies.github.io/Mapbox-vector-tiles-basic-js-renderer/debug/basic/google

it is just an idea to start. I know almost nothing about how Providers work. I need to know how to test a new Provider without need to compile all Cesium code. Any way to add it as a plugin? Some code to show me how?

What do you say?

@icemagno What if we suse something like this library https://github.com/Leaflet/Leaflet.VectorGrid

[icemagno]

@am2222 I'm using Cesium not Leaflet

[am2222]

@icemagno yeah I know, I am also looking for a way to make vector tiles work on cesium, but that plugin actually is doing the same thing as you said.it reads pbf files draws them on a canvas and leaflet plots that canvas. in our case we need draw pbf using cesium's canvas.

[nf-s]

Terriajs has a MapboxVectorTileImageryProvider which draws (polygons only at this point in time) to canvas - see https://github.com/TerriaJS/terriajs/blob/master/lib/Map/MapboxVectorTileImageryProvider.js @steve9164 created this a few years ago, he can give you more info about it

[am2222]

@nf-s I think the provided sample helps me alot. I have not looked at it in details yet, Does it use any internal files fron terriajs library as well?

[nf-s]

It uses 2 small utility functions from the terria library which are essential, but everything else is imported from Cesium, @mapbox/vector-tile, pbf and urijs (except the i18next internationalisation stuff which can be stripped out)

[am2222]

@nf-s thanks I could make it work

[davenquinn]

Either of you make any progress on this with working code? I was going to try to hack together an implementation soon as well.

[am2222]

@davenquinn this code works well with polygons https://github.com/TerriaJS/terriajs/blob/master/lib/Map/MapboxVectorTileImageryProvider.js

[robbo1975]

Hi, I am currently working an an implementation of a StyledVector Map tile provider for Cesium. I am doing this work for a commercial project that I am working on and am willing to contribute the code to the community project. I am making steady progress and will be continuing to develop a solution until it provides at least around 85% of the StyledVector map features. Would the community be interested in receiving this code and if so should I submit through a pull request on a branch associated with this ticket?

[am2222]

@robbo1975 I think it would be great thing having vectoretiles in cesium,

[davenquinn]

@robbo1975: excited to see this contribution! It is sorely needed.

There are different strategies taken by different providers for styling vector layers (e.g. Mapbox, Carto, Deck.gl, and probably OpenLayers although I haven't looked deeply). Does your layer take a separate strategy? Or does it adopt one of the existing solutions (e.g. CartoCSS)?

Either way, would it make sense to first package the project outside of core Cesium as a separate module? This might allow it to evolve quickly and independently — if it proves to be a widely useful solution, it could easily be integrated into Cesium itself at that point. I recently packed up a terrain provider that might be a good example of how to structure an external Cesium plugin.

[robbo1975]

@davenquinn I have adopted the mapbox standard in my approach because of a need to support ESRI Vector tile services. Your suggestion of developing as an external plugin module seems eminently sensible; however, JavaScript is not my first language so I'm still trying to find my feet with all of the language concepts and associated Frameworks and tools! I will take a look at your example module and see if I can replicate the core modular capability. Thanks for your feedback :)

[davenquinn]

@robbo1975 the Mapbox standard is the most widely used, so having a renderer targeted at that would be wonderful, and extremely useful for our work as well. If you were able to create a project, I'd be happy to help with code review etc. (as someone who is mostly an outsider to Cesium, but a fairly proficient javascript developer).

[robbo1975]

@davenquinn I have managed to get a bare-bones project started for a node module that can plug in to Cesium. It is still very much in the prototype stage, but you are welcome to provide feedback. https://github.com/robbo1975/MapboxVectorTileImageryProvider

[kring]

Hey @robbo1975, thanks for working on this and for sharing your code! I just wanted to mention real quick that CesiumJS can't accept GPL-licensed code because of CesiumJS's much more permissive Apache 2.0 license. I suspect most CesiumJS applications would also be unable to use it. Not sure if the license was a conscious choice there, but thought I should mention it.

[robbo1975]

@kring Thanks for the observation; it was an oversight on my part. I have updated the license to the more permissive MIT license

[hmartiro]

+1 for Mapbox vector tile support!

[TJPovey]

has there been any further development on this? There are several vector basemaps provided by esri that I would love to use as imagery providers

[robbo1975]

Hi,

Thanks for the interest. I do need to complete this project, but recently I've been tied up with other work. I will need to complete within the next 6 months or so, but with will depend on getting time to focus on the improvements that need to be made.

Happy to take assistance if anybody has the skills to help.

Robbo

On Thu, 24 Sep 2020, 11:01 TJPovey, notifications@github.com wrote:

has there been any further development on this? There are several vector basemaps provided by esri that I would love to use as imagery providers

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/CesiumGS/cesium/issues/2132#issuecomment-698246088, or unsubscribe https://github.com/notifications/unsubscribe-auth/APJN7WTFXVZQNTWKXBAXU6DSHMKHLANCNFSM4AUKTBAQ .

[kikitte]

Hi, here (https://github.com/kikitte/MVTImageryProvider) is another implementation of MapboxVectorTileImageryProvider using Mapbox-vector-tiles-basic-js-renderer. I hope it will help somebody who want to render mapbox vector tile in cesium.

[davenquinn]

Hi — just an update on this thread: I tried several approaches to this rendering problem for my work on visualizing Mars in advance of the Perseverance landing this week. The approach brought over from TerriaJS works well but is relatively slow. @kikitte's renderer based on the Mapbox GL fork also works well and is much quicker (that's what I ended up using, ultimately). I think some sort of WebGL approach based on Mapbox GL (pre-license-change) or Deck.gl would be appropriate long term, with the significant benefit that we could reuse some of the work on styling/symbology that has gone into these renderers. There's no reason why we couldn't have multiple vector-tile backends, too.

[ChillAndImprove]

Updates?

[davenquinn]

Actually, yeah there are some updates! I just finished the initial public rollout of the cesium-vector-provider module and created a demo website that shows it in action.

I think this will be pretty great implementation that maximizes compatibility with the Mapbox stack, especially once some of the outstanding design deficiencies are addressed. I'm working to ensure that the project can be based directly on the rendering stack within Maplibre GL (see https://github.com/maplibre/maplibre-gl-js/issues/166). It'd be nice if we could eventually drop in a Mapbox stylesheet to Cesium and get a functional basemap.

Contributions to the project are welcome!

[ebogo1]

@davenquinn Thanks for the updates and work on the vector provider module! We started taking a look at your repo and were wondering if you had any ideas about how the code could be included in CesiumJS. The main concern is that maplibre-gl is ~14 MB unpacked, which could be a bit heavy for combined Cesium builds.

Just to throw a couple ideas out there, we could:

• Add a flag to the makeZipFile command that optionally includes maplibre-gl and the vector provider files (false by default)
• Let users manually import maplibre-gl from a path similarly to how TaskProcessor points to .wasm paths

[davenquinn]

Hi @ebogo1, and thanks for looking at this. I agree that the size of Maplibre GL is a bit of a problem here. Right now the cesium-vector-provider module references a full/compiled version of Maplibre, but that is because I haven't figured out the right strategy for referring to things directly from their source code (a large part of the problem here is replicating their wasm compilation pipeline). This is probably simple but the module just hasn't evolved to that point.

Thinking ahead, I suspect that having this component as a standalone module makes sense. Ideally, it would just be a custom layer that can be imported with all dependencies from an external node module (this is the role that cesium-vector-provider seeks to fill). This would allow glue code between Maplibre and Cesium to have a lifecycle independent of Cesium's internals, and would allow (the large majority of) people with no need for Mapbox-compatible vector rendering to omit this heavy dependency.

I don't know if keeping things outside of the Cesium core library is a preferred approach of the team or how it fits with your development workflow, but it's how I'd try to proceed, at least initially.