Use Leaflet JS with Vector Tiles

Leaflet doesn’t support vector tiles by default. You can use one of the available plugins to display vector tiles, but the best and easiest way is by using the leaflet-maptilersdk plugin. Simply use the code below the map.

Use your MapTiler vector tiles basemaps in Leaflet using the L.maptilerLayer. For basemaps, you can also use traditional raster tiles without the need to use any plugins.

Using the L.maptilerLayer you have:

• All the power of MapTiler SDK JS to use vector tile layers (for data overlays) in your applications without any kind of limitation (show millions of geometries, choropleth maps, etc).
• Multi-lingual vector tiles basemaps for Leaflet using the MapTiler SDK.
• Use any of the many professional looking basemaps created by MapTiler or use a map with your own custom basemap.
• Easily change the language of your map without having to create a new basemap.
• Locate the user and center the map accordingly.

Replace YOUR_MAPTILER_API_KEY_HERE with your actual MapTiler API key.

Learn more

Vector maps are made of mathematical interpretations of geometric features such as points, curves or polygons. Vector tiles are rendered on the client’s side with a style, which is a small text file that defines how certain map elements look and how they are displayed. Read more about Vector tiles in this article What are vector tiles and why you should care?

If you do not know the difference between Raster and Vector or you have doubts about which format is better for you, consult the article Raster vs Vector Map Tiles: What Is the Difference Between the Two Data Types?