勉強したことのメモ

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で使う場合は以下を記述する。

<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で使う場合は以下を記述する。

<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/

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

 

実装方法

ソースコード

<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でマーカーを動的に変更し、変更状況をCookieに保存する方法

Leafletでポップアップ(フキダシ)内のボタンをクリックするとマーカーを動的 ...

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

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

Leafletにアイコン(ボタン)を設置できる「Leaflet.EasyButton」プラグインの利用方法

先日「leaflet-tag-filter-button」プラグインのCDN呼び ...

leaflet.jsとOSMでマップ表示及びマーカー設置方法

GoogleMapAPIを用いたマップ及びマーカー表示にクレジットカード登録が必 ...

Leafletでマップ上に通知(トースト)機能を追加する方法(Leaflet.Notifications)

Leafletでマーカー内のボタンクリック時等、ユーザーが何らかのアクションを行 ...