Basic Vector Tile Rendering

Introduction

Please see here for the full documentation for renderTiles and here for the demo of vector tiles on a google map.

In this demo, this left hand pane has three text fields which expect JSON input. On the right, the top section shows the "imaginary canvas", with all its source tiles and the region which is going to be "copied" from. And the bottom section on the right shows the "real output canvas" that the renderTiles method is actually trying to write to. Here the output canvas size is fixed at 1024x1024, but the imaginary canvas will grow as needed, based on your json specifications below. Don't forget to hit the "apply changes" button to update things.

When testing locally, you can configure the defaults for the following text fields by modifying the defaults.js file (use the command git update-index --skip-worktree debug/basic/defaults.js to ensure git ignores any changes you make).

style

The renderer lets you update individual bits of the style without fully reloading, but in this demo you can only give the full style and press "Apply" to create a new instance of the renderer with this applied. You can use fairly standard mapbox style definitions, but with some caveats as described in the main documentation (linked to above).

tilesSpec

Here you need to specify an array of tiles that you want to render - see the documentation (linked to above) for details.

drawSpec

Here you need to specify which section of the imaginary infinite canvas you want to copy to the real canvas - see the documentation (linked to above) for details.