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

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

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.maptilerLayer() plugin is how you display vector tiles in Leaflet JS.

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.

Check out the Use Leaflet JS with Vector Tiles example.

Geocoding control

The L.control.maptilerGeocoding() plugin for Leaflet utilizes MapTiler Cloud 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.

Check out the Leaflet geocoding control how to search places example.

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.