【MapLibre GL JS】ポイントデータを表示する #JavaScript

はじめに

この記事は#30DayMapChallenge2022 1日目の記事です。
テーマはPointです。
MapLibre GL JSを使ってPointデータを地図上に表示してみます。

Pointとは

ベクタデータの3要素（ポイント・ライン・ポリゴン）のうちの1つ。
地図上の1点を指します。

地図表示

上野駅周辺を表示してみます。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>サンプル</title>
    <meta name="description" content="サンプルです">
    <link href="style.css" rel="stylesheet">
    <!-- MapLibre -->
    <script src='https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.js'></script>
    <link href='https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css' rel='stylesheet' />
</head>
<body>
    <div id="map"></div>
    <script src="main.js"></script>
</body>
</html>

style.css

html, body{
    height: 100%;
 }
  
#map{
   height: 100%;
}

main.js

var map =  new maplibregl.Map({
    container: 'map',
    style: 'https://tile.openstreetmap.jp/styles/osm-bright-ja/style.json', // 地図のスタイル
    center: [139.7779244, 35.7122128], // 中心座標
    zoom: 15, // ズームレベル
    pitch: 0 // 傾き
})

ポイントデータ取得

今回はGeoJSONを使って表示してみます。
国土数値情報から東京都の文化施設データをダウンロードします。
https://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-P27.html
中身はシェープファイルだったので、QGISでGeoJSONに変換します。

これがポイントデータ！

ポイントデータ表示

ポイントデータが入ったGeoJSONを読み込んで、アイコンを表示してみます

var map =  new maplibregl.Map({
    container: 'map',
    style: 'https://tile.openstreetmap.jp/styles/osm-bright-ja/style.json', // 地図のスタイル
    center: [139.7779244, 35.7122128], // 中心座標
    zoom: 15, // ズームレベル
    pitch: 0 // 傾き
})

+map.on('load', function () {
+    map.loadImage(
+        './data/icon.png',
+        function (error, image) {
+            if (error) throw error;
+            map.addImage('facility_icon', image);
+        }
+    );
+    map.addSource('facility_point', {
+        type: 'geojson',
+        data: './data/tokyo_facility.geojson'
+    });
+    map.addLayer({
+        'id': 'facility_point',
+        'type': 'symbol',
+        'source': 'facility_point',
+        'layout': {
+            'icon-image': 'facility_icon',
+            'icon-size': 0.1
+        }
+    });
+});

ポイントデータをアイコン付きで表示できました～

ポップアップを表示

ポイントデータをクリックしたら施設名がポップアップで表示されるようにしてみます

var map =  new maplibregl.Map({
    container: 'map',
    style: 'https://tile.openstreetmap.jp/styles/osm-bright-ja/style.json', // 地図のスタイル
    center: [139.7779244, 35.7122128], // 中心座標
    zoom: 15, // ズームレベル
    pitch: 0 // 傾き
})

map.on('load', function () {
    map.loadImage(
        './data/icon.png',
        function (error, image) {
            if (error) throw error;
            map.addImage('facility_icon', image);
        }
    );
    map.addSource('facility_point', {
        type: 'geojson',
        data: './data/tokyo_facility.geojson'
    });
    map.addLayer({
        'id': 'facility_point',
        'type': 'symbol',
        'source': 'facility_point',
        'layout': {
            'icon-image': 'facility_icon',
            'icon-size': 0.1
        }
    });
+    map.on('click', 'facility_point', function (e) {
+        var coordinates = e.features[0].geometry.coordinates.slice();
+        var name = e.features[0].properties.P27_005;
+    
+        while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
+            coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
+        }
+        // ポップアップを表示する
+        new maplibregl.Popup({
+            offset: 10, // ポップアップの位置
+            closeButton: false, // 閉じるボタンの表示
+        })
+        .setLngLat(coordinates)
+        .setHTML(name)
+        .addTo(map);
+    });
+});

東京国立博物館の名前、ごついですね。

【MapLibre GL JS】ポイントデータを表示する