勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

Leafletで「leaflet-locatecontrol」プラグインを導入して現在地表示機能を追加する方法

  JavaScript

LeafletとOpenStreetMapでマップ表示させ、特定のアイコンをクリックすると現在地を表示し尚且つマーカーを設置したい。「leaflet-locatecontrol」プラグインを導入することで実装できた。尚、デフォルトのアイコンは微妙だったのでFont Awesomeのアイコンに変更する方法もあわせてメモ。

 

leaflet-locatecontrol

GitHub

https://github.com/domoritz/leaflet-locatecontrol

デモページ

https://domoritz.github.io/leaflet-locatecontrol/demo/

CDN

CDNで使う場合は以下を記述する。

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-locatecontrol/0.79.0/L.Control.Locate.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet-locatecontrol/0.79.0/L.Control.Locate.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-locatecontrol/0.79.0/L.Control.Locate.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet-locatecontrol/0.79.0/L.Control.Locate.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-locatecontrol/0.79.0/L.Control.Locate.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet-locatecontrol/0.79.0/L.Control.Locate.css">

 

Font Awesome

公式サイト

https://fontawesome.com/

アイコンページ

https://fontawesome.com/icons

CDN

CDNで使う場合は以下を記述する。

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

 

サンプル

https://taitan916.info/sample/leaflet.js/plugin/leaflet-locatecontrol/

マップ左上の「+」「-」ボタン下のアイコンをクリックすると現在地が表示される筈。

 

実装方法

ソースコード

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Leafletで「leaflet-locatecontrol」プラグインを導入して現在地表示機能を追加するサンプル</title>
<style>
html, body, #map {
height: 100%;
margin: 0;
padding: 0;
}
.leaflet-control-locate a.leaflet-bar-part span {
font-size: 1rem;
line-height: unset;
}
</style>
</head>
<body>
<div id="map"></div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-locatecontrol/0.79.0/L.Control.Locate.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet-locatecontrol/0.79.0/L.Control.Locate.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<script>
let map;
map = L.map('map');
//中心の経度緯度
const center = ['35.681236', '139.767125'];
//ズームレベル
const zoom = 12;
//マップの中心地とズームレベルを指定
map.setView(center, zoom);
const tileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
maxZoom: 19
});
tileLayer.addTo(map);
//現在地表示
const option = {
position: 'topleft',
icon: 'fa-solid fa-location-dot',
strings: {
title: "現在地を表示",
popup: "現在地"
},
locateOptions: {
maxZoom: 16
}
}
const lc = L.control.locate(option).addTo(map);
</script>
</body>
</html>
<html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Leafletで「leaflet-locatecontrol」プラグインを導入して現在地表示機能を追加するサンプル</title> <style> html, body, #map { height: 100%; margin: 0; padding: 0; } .leaflet-control-locate a.leaflet-bar-part span { font-size: 1rem; line-height: unset; } </style> </head> <body> <div id="map"></div> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.css"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-locatecontrol/0.79.0/L.Control.Locate.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet-locatecontrol/0.79.0/L.Control.Locate.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"> <script> let map; map = L.map('map'); //中心の経度緯度 const center = ['35.681236', '139.767125']; //ズームレベル const zoom = 12; //マップの中心地とズームレベルを指定 map.setView(center, zoom); const tileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{ attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors', maxZoom: 19 }); tileLayer.addTo(map); //現在地表示 const option = { position: 'topleft', icon: 'fa-solid fa-location-dot', strings: { title: "現在地を表示", popup: "現在地" }, locateOptions: { maxZoom: 16 } } const lc = L.control.locate(option).addTo(map); </script> </body> </html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Leafletで「leaflet-locatecontrol」プラグインを導入して現在地表示機能を追加するサンプル</title>
<style>
html, body, #map {
    height: 100%;
    margin: 0;
    padding: 0;
}
.leaflet-control-locate a.leaflet-bar-part span {
    font-size: 1rem;
    line-height: unset;
}
</style>
</head>
<body>
    <div id="map"></div>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-locatecontrol/0.79.0/L.Control.Locate.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet-locatecontrol/0.79.0/L.Control.Locate.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <script>
    let map;
    map = L.map('map');

    //中心の経度緯度
    const center = ['35.681236', '139.767125'];

    //ズームレベル
    const zoom = 12;

    //マップの中心地とズームレベルを指定
    map.setView(center, zoom);

    const tileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
        attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
        maxZoom: 19
    });
    tileLayer.addTo(map);

    //現在地表示
    const option = {
        position: 'topleft',
        icon: 'fa-solid fa-location-dot',
        strings: {
            title: "現在地を表示",
            popup: "現在地"
        },
        locateOptions: {
            maxZoom: 16
        }
    }
    const lc = L.control.locate(option).addTo(map);
    </script>
</body>
</html>

 - JavaScript

  関連記事

Leafletにて操作内容を履歴に残し「進む」「戻る」ボタンで履歴を実行できる「Leaflet.NavBar」の利用方法

Leafletにてマップ移動やズーム等、ユーザーの操作内容を履歴に残して、「進む ...

架空の地図画像をLeafletを用いてWeb上でマップ表示する方法

ゲーム攻略サイト等でゲーム内の地図をWeb上で表示し、マーカーを立てたりマウスホ ...

leaflet.jsとOSMでマーカーの画像をそれぞれ指定する

leaflet.jsとOpenStreetMapでマップ上にマーカーを複数設置し ...

Leafletにてマップ移動時にURLに座標を自動付与する「leaflet-view-meta」プラグインの利用方法

Googleマップだとマップを移動した際、URLに座標(経度緯度)が付与されるた ...

Leafletで「leaflet-control-geocoder」プラグインを導入して住所検索機能を追加する方法

LeafletとOpenStreetMapでマップを表示させ、テキストボックスに ...

S