Leaflet is a lightweight web mapping library.

If you haven’t worked with Leaflet before, have a look at its tutorials.

Raster tiles from server

Leaflet doesn’t support vector tiles by default. For basemaps it is recommended to use it with traditional raster tiles (Mercator XYZ). Such tiles can be geneated on demand for any of the GL styles with the open-source server software called TileServer GL.

A preview of the Leaflet viewer showing the raster tiles is visible at viewers example.

Vector tiles with a plugin

Leaflet can load and render the vector tiles also directly - with the help of the VectorGrid plugin.

The plugin is not yet ready for drawing the basemaps with fonts etc, but is very practical for other applications.

Load Leaflet and VectorGrid

Put this in the <head> of your HTML page:

<head>
  <link rel="stylesheet" href="https:[email protected]/dist/leaflet.css" />
  <script src="https:[email protected]/dist/leaflet.js"></script>
  <script src="https:[email protected]"></script>
</head>

Also notice which versions of Leaflet and VectorGrid you are loading, as there might be newer releases.

Define a style

VectorGrid cannot (yet) handle vector tile GL styles, so first you’ll have to define the styling for all the data layers with the Leaflet specific styling code:

var vectorStyles = {
  water: {	// Apply these options to the "water" layer...
    fill: true,
    weight: 1,
    fillColor: '#06cccc',
    color: '#06cccc',
    fillOpacity: 0.2,
    opacity: 0.4,
  },
  transportation: {	// Apply these options to the "transportation" layer...
    weight: 0.5,
    color: '#f2b648',
    fillOpacity: 0.2,
    opacity: 0.4,
  },

  // And so on, until every layer in https://openmaptiles.org/schema/ has a style

  // aeroway:
  // boundary:
  // building:
  // housenumber:
  // landcover:
  // landuse:
  // park:
  // place:
  // poi:
  // transportation:
  // transportation_name:
  // water:
  // water_name:
  // waterway:
};

If you have worked with Leaflet before, you’ll notice that those options are the same that are used for L.Polylines and L.Polygons.

That is a very basic styling for the data. Consult VectorGrid’s documentation for how to apply more complex styles.

Create your VectorGrid

Once you have your style, create an instance of L.VectorGrid.Protobuf like this:

var openMapTilesUrl = "https://free-{s}.tilehosting.com/data/v3/{z}/{x}/{y}.pbf.pict?key={key}"

var openMapTilesLayer = L.vectorGrid.protobuf(openMapTilesUrl, {
  vectorTileLayerStyles: vectorStyles,
  subdomains: '0123',
  attribution: '© OpenStreetMap contributors, © OpenMapTiles',
  key: 'abcdefghi01234567890' // Get yours at https://openmaptiles.com/hosting/
});

And add your layer to your Leaflet map:

openMapTilesLayer.addTo(map);
K

OpenMapTiles.org is an open-source project from Klokan Technologies GmbH and OSM community
Share this page on