MapLibre – Popup – TauStation

概要

クリック位置に地物(Feature)があれば、その属性をポップアップで表示する。ここでは地理院ベクトルタイルを表示させた地図に地物を表示させ、これらをクリックしたときにその属性を表示させている。

実装例

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Test - Popup</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <script src="https://unpkg.com/maplibre-gl@1.15.2/dist/maplibre-gl.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/maplibre-gl@1.15.2/dist/maplibre-gl.css">
    <style>
      <!-- Popup内のスタイル -->
      .popup span {
        display: inline-block;
        width: 4.5em;
      }
    </style>
  </head>
  <body>
    <div id="map" style="width: 800px; height: 600px"></div>
    <script>
      // 地理院ベクトルタイルを表示
      let map = new maplibregl.Map({
        container: 'map',
        style: 'https://gsi-cyberjapan.github.io/gsivectortile-mapbox-gl-js/std.json',
        center: [135.0, 35.0],
        zoom: 13,
        minZoom: 4,
        maxZoom: 17,
      });

      map.on('load', () => {
        // 2つのPointを描く
        map.addSource('source_points', {
          type: 'geojson',
          data: {
            'type': 'FeatureCollection',
            'features': [
              {
                'type': 'Feature',
                'geometry': { 'type': 'Point', 'coordinates': [135.0, 35.0],},
                'properties': {
                  'id': 'point001',
                  'name': 'Bellybutton',
                }
              },
              {
                'type': 'Feature',
                'geometry': { 'type': 'Point', 'coordinates': [134.99, 35.012],},
                'properties': {
                  'id': 'point002',
                  'name': 'Route 175',
                }
              },
            ]
          }
        });

        // Pointを描くレイヤーでスタイルを指定
        map.addLayer({
          'id': 'layer_points',
          'type': 'circle',
          'source': 'source_points',
          'layout': {},
          'paint': {
            'circle-color': '#0000FF',
            'circle-radius': 20
          }
        });
      });

      // 地図上でクリックしたときの処理
      map.on('click', (evt) => {
        // クリック位置の経緯度
        let lng = evt.lngLat.lng;
        let lat = evt.lngLat.lat;

        // クリック位置のFeature群を取得／レイヤーを限定している
        let features = map.queryRenderedFeatures(evt.point, {layers: ['layer_points']});
        // 取得したFeature群の属性等をコンソールに表示する
        features.forEach((feature) => {
          if (typeof feature !== 'undefined') {
            let property = '<span>ID</span>' + ':' + feature.properties.id + '<br>'+
                           '<span>Name</span>' + ':' + feature.properties.name + '<br>' +
                           '<span>Type</span>' + ':' + feature.geometry.type + '<br>' +
                           '<span>Location</span>' + ':' + feature.geometry.coordinates;
            let popup = new maplibregl.Popup({
              closeOnClick: false,
              className: 'popup'
            })
              .setLngLat([lng, lat])
              .setHTML(property)
              .addTo(map);
          }
        });
      });
    </script>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Test - Popup</title>

<style>

.popup span {

display: inline-block;

width: 4.5em;

}

</style>

</head>

<body>

// 地理院ベクトルタイルを表示

let map = new maplibregl.Map({

container: 'map',

style: 'https://gsi-cyberjapan.github.io/gsivectortile-mapbox-gl-js/std.json',

center: [135.0, 35.0],

zoom: 13,

minZoom: 4,

maxZoom: 17,

});

map.on('load', () => {

// 2つのPointを描く

map.addSource('source_points', {

type: 'geojson',

data: {

'type': 'FeatureCollection',

'features': [

{

'type': 'Feature',

'geometry': { 'type': 'Point', 'coordinates': [135.0, 35.0],},

'properties': {

'id': 'point001',

'name': 'Bellybutton',

}

{

'type': 'Feature',

'geometry': { 'type': 'Point', 'coordinates': [134.99, 35.012],},

'properties': {

'id': 'point002',

'name': 'Route 175',

}

]

}

});

// Pointを描くレイヤーでスタイルを指定

map.addLayer({

'id': 'layer_points',

'type': 'circle',

'source': 'source_points',

'layout': {},

'paint': {

'circle-color': '#0000FF',

'circle-radius': 20

}

});

// 地図上でクリックしたときの処理

map.on('click', (evt) => {

// クリック位置の経緯度

let lng = evt.lngLat.lng;

let lat = evt.lngLat.lat;

// クリック位置のFeature群を取得／レイヤーを限定している

let features = map.queryRenderedFeatures(evt.point, {layers: ['layer_points']});

// 取得したFeature群の属性等をコンソールに表示する

features.forEach((feature) => {

if (typeof feature !== 'undefined') {

let property = '<span>ID</span>' + ':' + feature.properties.id + '<br>'+

'<span>Name</span>' + ':' + feature.properties.name + '<br>' +

'<span>Type</span>' + ':' + feature.geometry.type + '<br>' +

'<span>Location</span>' + ':' + feature.geometry.coordinates;

let popup = new maplibregl.Popup({

closeOnClick: false,

className: 'popup'

})

.setLngLat([lng, lat])

.setHTML(property)

.addTo(map);

}

});

</script>

</body>

</html>

内容

Popupには任意のHTMLを書けるが、ここではqueryRenderedFeaturesで取得した地物の属性を出力している。複数の地物が捕捉された場合、その分だけのポップアップが表示される。Popupは内容に合わせて幅や高さが調整される。

let popup = new maplibregl.Popup({
  closeOnClick: false,
  className: 'popup'
})
  .setLngLat([lng, lat])
  .setHTML(property)
  .addTo(map);