【Leaflet入門】Markerのアイコンをオリジナルの画像に変える方法

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、LeafletでMarkerのアイコンをオリジナルの画像に変える方法について解説していきます。

1 Markerのアイコンをオリジナルの画像に変える
2 SampleCode全文 & HTML実行イメージ
3 JavaScript書籍 Ver. 中級-上級者向け
4 JavaScript書籍 Ver. 初級者向け
5 Twitterやってます！Follow Me！
6 参考・引用
7 最近の投稿

Markerのアイコンをオリジナルの画像に変える

LeafletでMarkerを作成すると、次のようなピンのアイコンが立つのがDefaultです。

このピンのアイコンをオリジナルの画像に変えていきます。

Markerのアイコンを変更したい場合は、次のように icon({iconUrl: [ ‘画像ファイルパス’ ]}) といった形で、

iconインスタンスを作成して、それをMarkerインスタンスにセットする必要があります。

// [ MarkerのIconをオリジナルの画像に変える方法 ]

// 1. Original-Icon-Instance
const robotamaIcon = L.icon({
    iconUrl: ['./robotama-icon.png'], // 画像ファイルパス
    iconSize: [80, 50]  // アイコンサイズ
});

// [ Markerのアイコンを変更したい場合 ]

    // iconUrl: 画像ファイルパス
    // iconRetinaUrl: モバイル用画像ファイルパス
    // iconSize: アイコンのサイズ
    // iconAnchor: 画像のオフセット位置
    // popupAnchor: ポップアップの表示位置


// 2. Marker-Instance に Original-Icon-Instance をセットする！
L.marker(
    [51.5, -0.09], 
    { icon: robotamaIcon }  // ここで、OriginalアイコンをSetする🔥
    )
.addTo(map)

SampleCode全文 & HTML実行イメージ

SampleCodeを実行すると、次のようにIconがこのブログのマスコットキャラクター『ロボ玉』になっています。

<html style="height: 100%; margin: 0;">
<head>
    <title>Leaflet</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./node_modules/leaflet/dist/leaflet.css" />
    <script src="./node_modules/leaflet/dist/leaflet.js"></script>
</head>

<body style="height: 100%; margin: 0; overflow: hidden;">
    <div id="map" style="height: 100%; width: 100%;"></div>
</body>

<script>

    // MarkerのIconをオリジナルの画像に変える方法

    const map = L.map('map',{
        worldCopyJump: true, // 世界地図を移動してもMarkerが自動生成される
    })
    .setView([51.5, -0.09], 3);


    L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/english/{z}/{x}/{y}.png',
    {
        attribution: 'Map data <a href="https://maps.gsi.go.jp/development/ichiran.html" target="_blank">国土地理院</a>',
        minZoom:2,
        maxZoom: 6,    
    }).addTo(map);


    // 1. Original-Icon-Instance
    const robotamaIcon = L.icon({
        iconUrl: ['./robotama-icon.png'], // 画像ファイルパス
        iconSize: [80, 50]  // アイコンサイズ
    });

    // [ 表示させるアイコンを変更したい場合 ]

        // iconUrl: 画像ファイルパス
        // iconRetinaUrl: モバイル用画像ファイルパス
        // iconSize: アイコンのサイズ
        // iconAnchor: 画像のオフセット位置
        // popupAnchor: ポップアップの表示位置

    // 2. Marker-Instance に Original-Icon-Instance をセットする！
    L.marker(
        [51.5, -0.09], 
        { icon: robotamaIcon }  // ここで、OriginalアイコンをSetする🔥
        )
    .addTo(map)
    .bindPopup('ロボ玉万歳！！！.<br> 神聖グンマー帝国、万歳！！.');

    L.marker([38.9, -77.01], {icon: robotamaIcon}).addTo(map).bindPopup('アメリカ合衆国-Robotama');


    // openPopup() をすると、Clickしなくても Popupが出現した状態(Open-状態)になる！ => 1つだけ
    L.marker([35.68, 139.69], {icon: robotamaIcon}).addTo(map).bindPopup('日本-Robotama').openPopup();

    L.marker([-41.289, 174.7], {icon: robotamaIcon}).addTo(map).bindPopup('ニュージーランド-Robotama');


    // [ 参考・引用 ]
    // 【JavaScript】LeafLetのマーカーを任意の画像に変換する方法 => https://cpoint-lab.co.jp/article/201905/9485/

    // Leaflet #010 – マーカーのアイコンを変更 => https://day-journal.com/memo/leaflet-010/

</script>
</html>