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 it’s up to you. You can start the map in a different place by modifying the
starting position
andstarting zoom
, and you can change the look of the map to any of our styles, or yours, by updating thestyle
. See what’s available here. -
Install the npm package.
-
Include the CSS file.
If you have a bundler that can handle CSS, you can
import
the CSS or include it with a<link>
in the head of the document via the CDN -
Include the following code in your JavaScript file (Example: app.js).
-
Replace the style with your custom map style. Check the Publish the map section to get the URL of your custom style.
var map = new maplibregl.Map({ container: 'map', // container id style: `YOUR_CUSTOM_MAP_ID`, center: [10.989249486220501, 46.948652944430734], // starting position [lng, lat] zoom: 11 // starting zoom });
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.