Display a custom map

--- title: "How to display a custom map on a web with Leaflet | Leaflet" description: "Display custom MapTiler maps on web pages with Leaflet JS." --- > For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL. # How to display a custom map on a web with Leaflet This example demonstrates how to display a custom map from MapTiler on a web page using Leaflet JS. To create your first custom map, check out the [How to create a custom map](https://docs.maptiler.com/guides/general/how-to-create-custom-map/) tutorial. 1. Copy the following code, paste it into your favorite text editor, and save it as a `.html` file. ```html Display a custom map

``` 1. Install the npm package. ```bash npm install --save leaflet ``` 2. Include the CSS file. If you have a bundler that can handle CSS, you can [`import`](#) the CSS or include it with a [``](#) in the head of the document via the CDN ```js import "leaflet/dist/leaflet.css"; ``` ```html ``` 3. Include the following code in your JavaScript file (Example: main.js). ```js import L from 'leaflet'; const key = 'YOUR_MAPTILER_API_KEY_HERE'; const map = L.map('map').setView([46.948652944430734, 10.989249486220501], 12); //starting position L.tileLayer(`https://api.maptiler.com/maps/streets-v4/{z}/{x}/{y}.png?key=${key}`,{ //style URL 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); ``` 1. Replace `YOUR_MAPTILER_API_KEY_HERE` with [your own API key](https://cloud.maptiler.com/account/keys/). Make sure to [secure the key](https://docs.maptiler.com/guides/credentials/api-key/#secure-key) before you publish it. 2. The next is up to you. You can center your map wherever you desire (modifying the `starting position`) and set an appropriate zoom level (modifying the `starting zoom`) to match your users’ needs. Additionally, you can change the map’s look (by updating the `source URL`); choose from a range of visually appealing map styles from our extensive [MapTiler standard maps](https://cloud.maptiler.com/maps/), or create your own to truly differentiate your application. 1. Replace the tileLayer URL with your custom map style. Check the [Publish the map](https://docs.maptiler.com/guides/general/how-to-create-custom-map/#publish-the-map) section to get the URL of your custom style. ```js 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); ``` ### Complete source code ```html Display a map

``` ## Learn more Check out this tutorial [How to create a custom map](https://docs.maptiler.com/guides/general/how-to-create-custom-map/) to learn how to create the map of the ski slopes of the online demo. ## Related examples ### [Multi-lingual map](https://docs.maptiler.com/leaflet/examples/map-language/) Examples Change the default map label language in Leaflet JS. ### [Built-in basemap styles](https://docs.maptiler.com/leaflet/examples/map-style/) Examples Change MapTiler basemap styles easily using Leaflet JS maps.