【Leaflet】Font Awesome でマーカーを描画する

Contents

1 はじめに
2 Font Awesome を使ったマーカー
3 実装例

はじめに

　CSS を使ったアイコンの中でも、Font Awesome というウェブフォントは、数千個ものアイコンが登録してあり、特に有名なウェブフォントになります。今回はそんな Font Awesome を使って、 Leaflet のアイコンを描画する方法についてまとめたいと思います。

DrawTrail

図1. Font Awesome を使ったマーカー

　なお、この記事は「【Leaflet】 CSS でマーカーを描画する」の続きです。

Font Awesome を使ったマーカー

　Font Awesome を使ってマーカーを描画するには、プラグイン「Awesome-Markers」を使う方法も有りますが、単純に divIcon を使って描画することもできます。

L.marker([緯度, 経度], {
    icon: L.divIcon({
        /*Font Awesomeの埋め込みコード*/
        html:'<i class="fas fa-plane-departure fa-2x"></i>', 
        /*アイコンの色と位置を設定するためのCSS*/
        className:'color_palette solid_icon', 
        iconSize: [0, 0]}),
    }).addTo(map);

　html の部分に Font Awesome の埋め込みコードを記述しており、また２つのクラス color_palette と solid_icon を使って、マーカーの色と位置を設定できるように、CSS を定義しておきます。

.color_palette{
    background-color:#333333;
    color:#333333;
    border-color:#333333;
}
.solid_icon{
    position:absolute;
    background-color:none;
    color:none;
}
.solid_icon > i{
    position:absolute;
    top:-0.5em;
    left:-0.5em;
}

　サイト内では Font Awesome を使えるように、あらかじめダウンロードをしておきます。
（「Font Awesomeの使い方が初心者でもわかる!ダウンロードから設定方法まで」）

実装例

　全体のソースコードと実装例は次のようになります。

<!DOCTYPE html>
<html>
<head>
<title>htmlMap</title>
<meta http-equiv='content-type' charset='utf-8'>
<meta name='viewport' content='width=device-width'>
<style>
.color_palette{
    background-color:#333333;
    color:#333333;
    border-color:#333333;
}
.solid_icon{
    position:absolute;
    background-color:none;
    color:none;
}
.solid_icon > i{
    position:absolute;
    top:-0.5em;
    left:-0.5em;
}
</style>
</head>
<body>
<!-- 埋め込みマップのdivタグ。マップサイズはwidth（幅）とheight（高さ）で決まる -->
<div id='mapcontainer' style='width:100%; height:300px; z-index:0;'></div>

<!-- 以下LeafletのJavaScriptとCSS -->
<link rel='stylesheet' href='https://unpkg.com/leaflet@1.3.0/dist/leaflet.css' />
<script src='https://unpkg.com/leaflet@1.3.0/dist/leaflet.js'></script>
<!-- ダウンロードしたFont Awesomeへのファイルパス -->
<link href="css/font-awesome.min.css" rel="stylesheet">

<script>
function init_map() {

    var map = L.map('mapcontainer');
    map.setView([39.198, 138.603], 3); //初期の中心位置とズームレベルを設定

    //マップタイルを読み込み、引用元を記載する
    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', 
        {attribution: "<a href='http://osm.org/copyright'> ©OpenStreetMap </a>"}).addTo(map);
    
    //マーカーの配置
　　L.marker([35.301, 136.138], {
        icon: L.divIcon({
            /*Font Awesomeの埋め込みコード*/
            html:'<i class="fas fa-plane-departure fa-2x"></i>', 
            /*アイコンの色と位置を設定するためのCSS*/
            className:'color_palette solid_icon', 
            iconSize: [0, 0]}),
        }).addTo(map);
}
    //ダウンロード時に初期化する
    window.addEventListener('DOMContentLoaded', init_map());

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

　実装例