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.

Install the npm package.
Include the CSS file.

If you have a bundler that can handle CSS, you can import the CSS or include it with a <link> in the head of the document via the CDN
Finally, load the map with the style. Include the following code in your JavaScript.

If you would rather stick to more modern API design and do not feel like using the L object, we got you covered:

Replace YOUR_MAPTILER_API_KEY_HERE with your actual MapTiler API key.

Learn more

Check out the tutorial How to create a Vector Tiles map with Leaflet, NPM, MapTiler and Parcel.

Install bundler and build tools. This tutorial will use Parcel because it works out of the box without any additional configuration.
Update the package.json scripts. Create the dev and build scripts.
Install the Leaflet npm package.
Create a src folder and inside this forder create 3 files: index.html, app.js, and style.css.
Copy the following code, paste it into index.html file. The <div id="map"> will be the container where the map will be loaded.
Create the map container style. Add the map container style to you stylesheet style.css. The div must have non-zero height. In this case we are going to make a fullscreen map.
Include the following code in your app.ts file.
Replace YOUR_MAPTILER_API_KEY_HERE with your actual MapTiler API key.
Running the dev server. To see the map run the local server. Open a terminal and write.
Now you can see your application opening http://localhost:1234 in your browser.

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?