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.
-
Copy the following code, paste it into your favorite text editor, and save it as a
.html
file.
Check out the step-by-step tutorial How to use Leaflet with NPM
- 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.
- Check out the Use Leaflet JS with Vector Tiles example.
- Check out the Leaflet geocoding control how to search places example.
Maptiler SDK layer (Vector Tiles layer)
Leaflet Vector Tiles basemap plugin
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.