---
title: "How to make a map with pins using Leaflet | Leaflet"
description: "Create maps with custom pins and markers in 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 make a map with pins using Leaflet
This example shows how to make a map with pins using Leaflet JS. Load a geoJSON of points in Leaflet JS and add your custom pins or icons.
### NPM module setup
```bash
npm install --save @maptiler/leaflet-maptilersdk leaflet
```
#### main.js
```js
import { MaptilerLayer, MapStyle } from '@maptiler/leaflet-maptilersdk';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
const key = 'YOUR_MAPTILER_API_KEY_HERE';
const map = L.map('map').setView([45.9767521, 7.6569418], 12);
const mtLayer = new MaptilerLayer({
apiKey: key,
style: MapStyle.BASE, // optional
}).addTo(map);
const leafIcon = new L.icon({
iconUrl: "https://docs.maptiler.com/sdk-js/examples/custom-points-icon-png/underground.png", //your custom pin
iconSize: [24, 26],
});
async function loadGeoJSON() {
const response = await fetch(`https://api.maptiler.com/data/YOUR_MAPTILER_DATASET_ID_HERE/features.json?key=${key}`);
const geoJSON = await response.json();
L.geoJSON(geoJSON, {
pointToLayer: function (geoJsonPoint, latlng) {
return L.marker(latlng, {icon: leafIcon});
}
}).addTo(map);
}
loadGeoJSON();
```
#### index.html
```html
How to make a map with pins using Leaflet | NPM example
```
#### style.css
```css
#map {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
```
### Basic JavaScript setup
```html
Marker with custom icon
```
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/developer/credentials/api-key/#secure-key) before you publish it.
## Learn more
Check out the [Leaflet marker with a custom icon](https://docs.maptiler.com/leaflet/examples/custom-marker/) to learn How to customize Leaflet icons.