Leaflet JS with MapTiler maps

Leaflet is a lightweight open-source library for online maps. It works efficiently across all major desktop and mobile platforms and can be extended with lots of plugins.

You can use your MapTiler maps in Leaflet as vector tiles or the more traditional raster tiles. You can also add a geocoding control to your map with one line of code.

Get started

This is the way to use your MapTiler maps in Leaflet JS. Simply use the code below the map.

  1. Copy the following code, paste it into your favorite text editor, and save it as a .html file.

  1. Install the npm package.

  2. 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

  3. Include the following code in your JavaScript file (Example: main.js).

  1. Replace YOUR_MAPTILER_API_KEY_HERE with your actual MapTiler API key.

Vector Tiles and Geocoding with MapTiler Leaflet plugins

Leaflet is meant to be as lightweight as possible and focuses on a core set of features. An easy way to extend its functionality is to use plugins.

Maptiler SDK layer (Vector Tiles layer)

The L.maptiler.maptilerLayer() plugin is how you display vector tiles in Leaflet JS.

Using the L.maptiler.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.

Geocoding control

The L.control.maptilerGeocoding() plugin for Leaflet utilizes MapTiler Geocoding API. With this control, users of your application can find any place on Earth (States, Cities, Streets, …) down to the address level, restrict the search area to a specific country, highlight search results on the map, autocomplete words while typing, and much more.

Learn more

If you want to learn how to initialize a map and load the style see the Learn the basics - How to use Leaflet JS tutorial.

Unlock your Leaflet mapping potential now! Look at the Leaflet JS examples we have prepared, from a quick start with Leaflet to advanced examples of how to load millions of points or use vector tiles with Leaflet JS.