leaflet入門｜プラグインでマーカーのアイコンを変更する（vector-markers）

Leafletのプラグイン「vector-markers」使用して、マーカーのアイコンを変更します。

今回は、「Font Awesome」「Bootstrap」のアイコンを使用します。

実装すると以下のようになります。

１．全体のコード

<!DOCTYPE html>
<html>
  <head>
    <title>Leaflet Plugin vector-markers</title>
  	<meta charset="utf-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="">
    <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
<!-- plugin -->
    <link rel="stylesheet" href="css/leaflet-vector-markers.css" />
    <script src="js/leaflet-vector-markers.min.js"></script>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- plugin -->

    <style type="text/css">
     <!--
      #mapid { height: 400px; width: 600px}

      i.glyphicons-custom {
        margin-left: 1px;
      }
    -->
    </style>
  </head>
  <body>
    <div id="mapid"></div>

    <script>
        // Mapの基本設定
        var map = L.map('mapid').setView([35.7102, 139.8132], 15);

        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
      		maxZoom: 18,
      		attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, '
      	}).addTo(map);

        // Font Awesome
        options = {
            prefix: 'fa'
           ,icon: 'utensils'
           ,markerColor: 'blue'
        };
        L.marker([35.7101,139.8107], {icon: L.VectorMarkers.icon(options)}).addTo(map).bindPopup("Font Awesome");

        // Font Awesome
        options = {
            prefix: 'fa'
           ,icon: 'fa-utensils'
           ,markerColor: '#d8c148'
        };
        L.marker([35.7101,139.8127], {icon: L.VectorMarkers.icon(options)}).addTo(map).bindPopup("Font Awesome makerColor Hex(#d8c148)");

        // Font Awesome
        options = {
            prefix: 'fa'
           ,icon: 'fa-utensils'
           ,markerColor: 'white'
           ,iconColor: '#48afd8'
        };
        L.marker([35.7101,139.8147], {icon: L.VectorMarkers.icon(options)}).addTo(map).bindPopup("Font Awesome iconColor Hex(#48afd8)");

        // Font Awesome
        options = {
            prefix: 'fa'
           ,icon: 'fa-utensils'
           ,markerColor: 'red'
           ,spin: true
        };
        L.marker([35.7101,139.8167], {icon: L.VectorMarkers.icon(options)}).addTo(map).bindPopup("Font Awesome spin true");

        // Bootstrap circle
        options = {
            prefix: 'glyphicon'
           ,icon: 'lock'
           ,markerColor: 'green'
           ,extraClasses: 'glyphicons-custom'
        };
        L.marker([35.7081,139.8107], {icon: L.VectorMarkers.icon(options)}).addTo(map).bindPopup("Bootstrap extraClasses");

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

<!DOCTYPE html>

<html>

<head>

<title>Leaflet Plugin vector-markers</title>

<!--

#mapid { height: 400px; width: 600px}

i.glyphicons-custom {

margin-left: 1px;

}

-->

</style>

</head>

<body>

// Mapの基本設定

var map = L.map('mapid').setView([35.7102, 139.8132], 15);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {

maxZoom: 18,

attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, '

}).addTo(map);

// Font Awesome

options = {

prefix: 'fa'

,icon: 'utensils'

,markerColor: 'blue'

};

L.marker([35.7101,139.8107], {icon: L.VectorMarkers.icon(options)}).addTo(map).bindPopup("Font Awesome");

// Font Awesome

options = {

prefix: 'fa'

,icon: 'fa-utensils'

,markerColor: '#d8c148'

};

L.marker([35.7101,139.8127], {icon: L.VectorMarkers.icon(options)}).addTo(map).bindPopup("Font Awesome makerColor Hex(#d8c148)");

// Font Awesome

options = {

prefix: 'fa'

,icon: 'fa-utensils'

,markerColor: 'white'

,iconColor: '#48afd8'

};

L.marker([35.7101,139.8147], {icon: L.VectorMarkers.icon(options)}).addTo(map).bindPopup("Font Awesome iconColor Hex(#48afd8)");

// Font Awesome

options = {

prefix: 'fa'

,icon: 'fa-utensils'

,markerColor: 'red'

,spin: true

};

L.marker([35.7101,139.8167], {icon: L.VectorMarkers.icon(options)}).addTo(map).bindPopup("Font Awesome spin true");

// Bootstrap circle

options = {

prefix: 'glyphicon'

,icon: 'lock'

,markerColor: 'green'

,extraClasses: 'glyphicons-custom'

};

L.marker([35.7081,139.8107], {icon: L.VectorMarkers.icon(options)}).addTo(map).bindPopup("Bootstrap extraClasses");

</script>

</body>

</html>

２．解説

地図を描画するまでの解説は、leaflet入門1に記載しています。

２−１．プラグインの読み込み

vector-markers の本体は GitHubからダウンロードできます。

また、今回使用する「Font Awesome」「Bootstrap」はCDNを使用してアイコンを読み込みますが、各サイトからダウンロードすることもできます。

GitHub-vector-markers

Font Awesome

Bootstrap

<!-- plugin -->
    <link rel="stylesheet" href="css/leaflet-vector-markers.css" />
    <script src="js/leaflet-vector-markers.min.js"></script>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- plugin -->

２−２．vector-markersの設定

L.markerのオプション「icon」に L.VectorMarkers.icon オブジェクトを指定します。

L.VectorMarkers.icon の引数に使用するアイコンを指定します。

// Font Awesome
options = {
    prefix: 'fa'
   ,icon: 'utensils'
   ,markerColor: 'blue'
};
L.marker([35.7101,139.8107], {icon: L.VectorMarkers.icon(options)}).addTo(map).bindPopup("Font Awesome");

// Font Awesome

options = {

prefix: 'fa'

,icon: 'utensils'

,markerColor: 'blue'

};

L.marker([35.7101,139.8107], {icon: L.VectorMarkers.icon(options)}).addTo(map).bindPopup("Font Awesome");

オプション
prefix：’fa’（Font Awesome）、’glyphicon’（bootstrap）
icon：使用するアイコン名（fa-utensilsの場合は、utensilsを指定）
markerColor：マーカー色。blueやredもしくは hexで指定可能（#d8c148 など）
iconColor：アイコン色。’white’や’black’またはcssのhexやrgbaなどで指定可能
spin：アイコンの回転（true/false）
extraClasses：アイコンに適用するクラス（アイコンのずれなどを調整できる）

２−３．スタイルの調整

アイコンによっては、マーカーの中央に表示されない（Bootstrap）場合があります。

その際は、オプション「extraClasses」でアイコンに独自スタイルを当てて調整することができます。

// Bootstrap circle
options = {
    prefix: 'glyphicon'
   ,icon: 'lock'
   ,markerColor: 'green'
   ,extraClasses: 'glyphicons-custom'
};
L.marker([35.7081,139.8107], {icon: L.VectorMarkers.icon(options)}).addTo(map).bindPopup("Bootstrap extraClasses");

// Bootstrap circle

options = {

prefix: 'glyphicon'

,icon: 'lock'

,markerColor: 'green'

,extraClasses: 'glyphicons-custom'

};

L.marker([35.7081,139.8107], {icon: L.VectorMarkers.icon(options)}).addTo(map).bindPopup("Bootstrap extraClasses");

i.glyphicons-custom {
  margin-left: 1px;
}

i.glyphicons-custom {

margin-left: 1px;

}

extraClasses オプションでClass「glyphicons-custom」を指定しています。

この場合、i.glyphicons-custom クラスがアイコンに適用されます。

３．まとめ

vector-markers でマーカーのアイコンを変更しました。
vector-markers の特徴としては、マーカーやアイコンの色を hex で指定できるところだと思います。マーカー系の多くのプラグインは、プラグインで用意している色にのみ変更できる場合が多いです。
なので、マーカーやアイコンの色を自由に指定したい場合は、vector-markers がオススメです。

その他のマーカー系のおすすめプラグインは、こちらに記載しています。
Leaflet入門｜おすすめプラグイン（マーカーのカスタマイズ）

マーカー系を含む全てのおすすめプラグインは、こちらに記載しています。
Leaflet入門｜おすすめプラグイン