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.
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.
YOUR_MAPTILER_API_KEY_HERE with your actual MapTiler API key.
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?
- Get started
- Learn the basics
- Vector Tiles in Leaflet
- Display Marker
- GeoJSON Layer
- Raster Layer
- Custom Map
- Choropleth GeoJSON
- Raster tiles
- Geocoding control
- Leaflet with NPM
- Leaflet with TypeScript
- Geolocate control
- Map events
- Multi-lingual map
- Built-in basemap styles
- Points as cluster
- Marker with custom icon