Leaflet marker with a custom icon

This tutorial shows how to define your custom icons for markers using Leaflet JS.

Introducing custom images and shadows to your markers can significantly enhance the visual appeal of your map. By adding a personal touch to your Leaflet icons, you can create a unique and engaging experience for your users.


npm install --save @maptiler/leaflet-maptilersdk leaflet

main.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.OUTDOOR, // optional
}).addTo(map);

const LeafIcon = L.Icon.extend({
    options: {
      shadowUrl: "https://docs.maptiler.com/leaflet/assets/leaf_shadow.png",
      iconSize:     [38, 95],
      shadowSize:   [50, 64],
      iconAnchor:   [22, 94],
      shadowAnchor: [4, 62],
      popupAnchor:  [-3, -76]
    }
  });

const leafIcon = new LeafIcon({iconUrl: "https://docs.maptiler.com/leaflet/assets/leaf_marker.png"});

L.marker([45.9767521, 7.6569418], {icon: leafIcon})
  .addTo(map)
  .openPopup();

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="robots" content="noindex">
  <title>Leaflet marker with a custom icon | NPM example</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div id="map"></div>
  <script type="module" src="./main.js"></script>
</body>
</html>

style.css

#map {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Marker with custom icon</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <script src="https://cdn.maptiler.com/maptiler-sdk-js/v4.1.0/maptiler-sdk.umd.min.js"></script>
    <link href="https://cdn.maptiler.com/maptiler-sdk-js/v4.1.0/maptiler-sdk.css" rel="stylesheet" />
    <script src="https://cdn.maptiler.com/leaflet-maptilersdk/v4.1.0/leaflet-maptilersdk.umd.min.js"></script>
    <style>
      #map {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      const key = 'YOUR_MAPTILER_API_KEY_HERE';
      const map = L.map('map').setView([45.9767521, 7.6569418], 12);
      const mtLayer = L.maptiler.maptilerLayer({
        apiKey: key,
        style: L.maptiler.MapStyle.OUTDOOR, // optional
      }).addTo(map);

      const LeafIcon = L.Icon.extend({
          options: {
            shadowUrl: "https://docs.maptiler.com/leaflet/assets/leaf_shadow.png",
            iconSize:     [38, 95],
            shadowSize:   [50, 64],
            iconAnchor:   [22, 94],
            shadowAnchor: [4, 62],
            popupAnchor:  [-3, -76]
          }
        });

      const leafIcon = new LeafIcon({iconUrl: "https://docs.maptiler.com/leaflet/assets/leaf_marker.png"});

      L.marker([45.9767521, 7.6569418], {icon: leafIcon})
        .addTo(map)
        .openPopup();

    </script>
  </body>
</html>

Replace YOUR_MAPTILER_API_KEY_HERE with your own API key. Make sure to secure the key before you publish it.