How to create a map with the Leaflet JavaScript library
Copy & paste sample source code
Creating a map with the Leaflet JavaScript library is straightforward on MapTiler Cloud. Go to MapTiler Cloud Maps, create a free account, select the map you like, go to the Raster tiles section and click on the Leaflet. Here just copy the sample source code and paste it into your HTML file (your key is included).
Or just copy the code below and replace YOUR_MAPTILER_API_KEY_HERE
with your actual MapTiler API key.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js"></script>
<style>
#map {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</style>
</head>
<body>
<div id="map">
<a href="https://www.maptiler.com" style="position:absolute;left:10px;bottom:10px;z-index:999;"><img
src="https://api.maptiler.com/resources/logo.svg" alt="MapTiler logo"></a>
</div>
<p><a href="https://www.maptiler.com/copyright/" target="_blank">© MapTiler</a> <a
href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap contributors</a></p>
<script>
var map = L.map('map').setView([0, 0], 1);
L.tileLayer('https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key=YOUR_MAPTILER_API_KEY_HERE', {
tileSize: 512,
zoomOffset: -1,
minZoom: 1,
attribution: "\u003ca href=\"https://www.maptiler.com/copyright/\" target=\"_blank\"\u003e\u0026copy; MapTiler\u003c/a\u003e \u003ca href=\"https://www.openstreetmap.org/copyright\" target=\"_blank\"\u003e\u0026copy; OpenStreetMap contributors\u003c/a\u003e",
crossOrigin: true
}).addTo(map);
</script>
</body>
</html>
Write your code from scratch
You can also write your code from scratch. The following video will teach you how:
Create Circles, Polygons, and PopUps
The map can be further manipulated. You can, for instance, add the position of your shop or mark a trail of a race:
Change Marker Icon, and Add Shadow
Multiple Icon Definition Using JavaScript
Add GeoJSON
Add scale and watermark
Related guides
- Automatically created API key
- Check if MapLibre GL JS is supported
- Dataset upload - formats and limits
- Difference between 256x256, 512x512, and HiDPI/Retina rasterized tiles
- Disputed borders on your maps
- Exported Tiles Multiplier
- Generalization in maps
- How are maps used in NFT tokens
- How are the tile requests cached in web browser?
- How MapTiler map tiles are Generated and Delivered
On this page