Vector tiles in Leaflet JS

Leaflet doesn’t support vector tiles by default. For basemaps, it is recommended to use it with traditional raster tiles. To display vector tiles it is necessary to use one of the available plugins.

Next we will explain how to create a map in Leaflet using your MapTiler maps with the help of the maplibre-gl-leaflet plugin. Simply use the code below the map.

Replace YOUR_MAPTILER_API_KEY_HERE with your actual MapTiler API key.

Leaflet has also the ability to load and render the vector tiles 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 (eg for data overlays).

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?