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

Contents

1 はじめに
2 CSS を使ったマーカーの描画
3 実装例

はじめに

　Leaflet ではデフォルトでマーカーの画像が登録されていますが、CSS を使って描画をすることも可能です。そこで今回は、CSS を使ったマーカーの描画方法についてまとめたいと思います。

DrawTrail

図1. CSS を使ったマーカーの描画

　なお、この記事は「【Leaflet】マップ上にマーカーを配置する」の続きです。

CSS を使ったマーカーの描画

　CSS を使ってマーカーを描画するためには、divIcon を使います。

L.marker([緯度,経度], {
            icon: L.divIcon({
                html: '',
                className:'color_palette solid_icon',
                iconSize: [0, 0]}),
        }).addTo(map);

　このとき、２つのクラス color_palette と solid_icon を使ってマーカーを描画するよう、あらかじめ CSS を定義しておきます。

/*マーカーのCSS*/
.solid_icon{
    position:absolute;
}
.solid_icon:before{
    content:'';
    position:absolute;
    width:18px;
    height:18px;
    left:-9px;
    top:-22px;
    border:solid 1px;
    background:currentColor;
    border-radius:10px 10px 10px 0;
    -webkit-transform:rotate(-45deg);
        -ms-transform:rotate(-45deg);
            transform:rotate(-45deg);
    box-sizing:content-box;
}
.solid_icon:after{
    content:'';
    position:absolute;
    left:-3px;
    top:-16px;
    width:8px;
    height:8px;
    background-color:rgba(255, 255, 255, 0.7); 
    border-radius:4px;
}
/*マーカーの色のCSS*/
.color_palette{
    background-color:#333333;
    color:#333333;
    border-color:#333333;
}

　なお、あえて iconSize をゼロにしていますが、このようにすることで疑似要素（before や after）で指示した範囲のみをマーカーとして機能させることができます。

実装例

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

<!DOCTYPE html>
<html>
<head>
<title>htmlMap</title>
<meta http-equiv='content-type' charset='utf-8'>
<meta name='viewport' content='width=device-width'>
<style>
/*マーカーのCSS*/
.solid_icon{
    position:absolute;
}
.solid_icon:before{
    content:'';
    position:absolute;
    width:18px;
    height:18px;
    left:-9px;
    top:-22px;
    border:solid 1px;
    background:currentColor;
    border-radius:10px 10px 10px 0;
    -webkit-transform:rotate(-45deg);
        -ms-transform:rotate(-45deg);
            transform:rotate(-45deg);
    box-sizing:content-box;
}
.solid_icon:after{
    content:'';
    position:absolute;
    left:-3px;
    top:-16px;
    width:8px;
    height:8px;
    background-color:rgba(255, 255, 255, 0.7); 
    border-radius:4px;
}
/*マーカーの色のCSS*/
.color_palette{
    background-color:#333333;
    color:#333333;
    border-color:#333333;
}
</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>

<script>
function init_map() {

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

    //マップタイルを読み込み、引用元を記載する
    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.6807,139.7671], {
                icon: L.divIcon({
                    html: '',
                    className:'color_palette solid_icon',
                    iconSize: [0, 0]}),
            }).on('contextmenu', function(e){
                /*右クリック（もしくは長押し）で Google Maps を起動する*/
                window.open( "https://www.google.co.jp/maps/place/"+e.latlng.lat+","+e.latlng.lng+"/@"+e.latlng.lat+","+e.latlng.lng+",15z/data");
            }).addTo(map);
}
    //ダウンロード時に初期化する
    window.addEventListener('DOMContentLoaded', init_map());

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

　実装例