How to display your custom map on the web page.
This example demonstrates how to display a custom map on the web page using MapTiler Cloud.
To create your first custom map, check out the How to create a custom map tutorial.
-
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. -
The next is up to you. You can start the map in a different place by modifying the
starting position
, and you can change the look of the map to any of our styles, or yours, by updating thestyle URL
. See what’s available here. -
Replace the tileLayer URL with your custom map style. Check the Publish the map section to get the URL of your custom style.
const map = L.map('map').setView([46.948652944430734, 10.989249486220501], 12); const layer = L.tileLayer(`https://api.maptiler.com/maps/YOUR_CUSTOM_MAP_ID/{z}/{x}/{y}.png?key=${key}`,{ 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);
View complete source code on GitHub
Learn more
Check out this tutorial How to create a custom map to learn how to create the map of the ski slopes of the online demo.
Leaflet
Examples
- 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