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:
Comments
0 comments
Please sign in to leave a comment.