© MapTiler © OpenStreetMap contributors
``` 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([55.665957, 12.550343], 10); //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. Create a new marker using the L.marker function. Set Lat/Lng of the marker and finally added it to the current map using .addTo() function. ```js L.marker([55.665957, 12.550343]).addTo(map); ``` ### Complete source code ```html