MapLibre – Popup

2022-08-26 / tau / コメントする

概要

クリック位置に地物(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);

let popup = new maplibregl.Popup({

closeOnClick: false,

className: 'popup'

})

.setLngLat([lng, lat])

.setHTML(property)

.addTo(map);

Popup生成時の引数で、クリック時の消去をfalseにして、スタイル設定用のHTMLクラス名を設定している。

その後、生成したPopupインスタンスの位置と表示内容をセットして、地図に貼り付けている。

ポップアップ内で桁を揃えるためのスタイルは、head要素内で定義している。

    <style>
      <!-- Popup内のスタイル -->
      .popup span {
        display: inline-block;
        width: 4.5em;
      }
    </style>

<style>

.popup span {

display: inline-block;

width: 4.5em;

}

</style>

MapLibre – ソースの地物を捕捉する

2022-08-25 / tau / コメントする

概要

地図上でマウスクリックしてaddSourceとaddLayerで表示した地物（Feature)を捕捉する。

FeatureCollectionの個々のFeatureに'properties'で属性を設定
map.on('click', ...)でマウスクリックを捕捉
クリック位置で地物を表示したレイヤ上の地物があれば、その属性等をコンソールに表示

実装例

<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) => {
    // クリック位置のFeature群を取得／レイヤーを限定している
    let features = map.queryRenderedFeatures(evt.point, {layers: ['layer_points']});
    // 取得したFeature群の属性等をコンソールに表示する
    features.forEach((feature) => {
      if (typeof feature !== 'undefined') {
        console.log('ID      :' + feature.properties.id);
        console.log('Name    :' + feature.properties.name);
        console.log('Type    :' + feature.geometry.type);
        console.log('Location:' + feature.geometry.coordinates);
      }
    });
  });
</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) => {

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

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

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

features.forEach((feature) => {

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

console.log('ID :' + feature.properties.id);

console.log('Name :' + feature.properties.name);

console.log('Type :' + feature.geometry.type);

console.log('Location:' + feature.geometry.coordinates);

}

});

</script>

内容

FeatureCollectionで2つのPointを定義し、それぞれのidとnameを属性として設定している
Pointのレンダリングは青い丸としている
クリック時のリスナーをmap.on('click', ...)で登録している
クリック位置のFeature群をqueryRenceredFeaturesで取得している
- 第2引数で取得対象のソースがあるレイヤーを限定している
取得したFeature群をforEachで1つずつ取り出して表示
- このとき取り出した1つのfeatureがundefinedでない場合だけ表示させている

MapLibre – GeoJSONのソースを描画する

2022-08-25 / tau / コメントする

基本形

Mapオブジェクトのonメソッドで、マップのロード後処理として記述する
MapオブジェクトのaddSourceメソッドで図形を定義し、addLayerメソッドでレンダリング方法などを記述する
addLayerでソースIDを指定する

let map = new maplibregl.Map({...});

map.on('load', {
  map.addSource('ソースID', {
    type: 'geojson',
    data: {
      ここで図形（群）を定義
    }
  });

  map.addLayer({
    'id': 'レイヤーID',
    'type': '描画タイプ',
    'source': 'ソースID',
    'layout': {レイアウト},
    '図形タイプ': {
  });
});

let map = new maplibregl.Map({...});

map.on('load', {

map.addSource('ソースID', {

type: 'geojson',

data: {

ここで図形（群）を定義

}

});

map.addLayer({

'id': 'レイヤーID',

'type': '描画タイプ',

'source': 'ソースID',

'layout': {レイアウト},

'図形タイプ': {

});

addSource

第1引数でソースIDを設定し、第2引数に図形のGeoJSONを記述する

addLayer

詳細はMapLibreのLayerのドキュメントを参照。

id：一意なレイヤーID
type：形状タイプ
- 'fill', 'line', 'symbol', 'circle', 'heatmap', 'fill-extrusion', 'raster', 'hillshade', 'background'
- 形状タイプごとの描画仕様は、その内容によってlayoutかpaintで指定する
source：このレイヤーに描かれるソースのIDを指定
layout：形状タイプごとの描画スタイルを設定
- たとえば'line'の場合、'line-width', 'line-cap', 'line-join'など
paint：図形を描く色などを指定
- たとえば'circle'の場合、'circle-color', 'circle-radius'など

図形の描画例

MapLibre – 多角形を描く

2022-08-25 / tau / コメントする

1つの多角形を描く

多角形(’Polygon')は'coordinates'を多角形の頂点の3次元配列で与え、始点と終点で同じ座標とする。レイアウトの'type'は'fill'。

以下の例では、ベクトルタイルの地理院地図上に3つの頂点を持つ三角形を描いている。'paint'で外枠の線を青、塗りつぶしの色を緑、塗りつぶしの不透明度を0.4としている。

let map = new maplibregl.Map({
  container: 'map',
  style: 'https://gsi-cyberjapan.github.io/gsivectortile-mapbox-gl-js/std.json',
  center: [139.747, 35.677],
  zoom: 14,
  minZoom: 4,
  maxZoom: 17,
});

map.on('load', () => {
  // 1つのPolygonを描く
  map.addSource('source_polygon', {
    type: 'geojson',
    data: {
      'type': 'Feature',
      'geometry': {
        'type': 'Polygon',
        'coordinates': [
          [
            [139.747, 35.682],
            [139.742, 35.672],
            [139.752, 35.672],
            [139.747, 35.682],
          ]
        ]
      },
    }
  });

  // Polygonのスタイルを設定
  map.addLayer({
    'id': 'layer_polygon',
    'type': 'fill',
    'source': 'source_polygon',
    'layout': {},
    'paint': {
      'fill-outline-color': '#0000FF',
      'fill-color': '#00FF00',
      'fill-opacity': 0.4,
    }
  });
});

let map = new maplibregl.Map({

container: 'map',

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

center: [139.747, 35.677],

zoom: 14,

minZoom: 4,

maxZoom: 17,

});

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

// 1つのPolygonを描く

map.addSource('source_polygon', {

type: 'geojson',

data: {

'type': 'Feature',

'geometry': {

'type': 'Polygon',

'coordinates': [

[

[139.747, 35.682],

[139.742, 35.672],

[139.752, 35.672],

[139.747, 35.682],

]

}

});

// Polygonのスタイルを設定

map.addLayer({

'id': 'layer_polygon',

'type': 'fill',

'source': 'source_polygon',

'layout': {},

'paint': {

'fill-outline-color': '#0000FF',

'fill-color': '#00FF00',

'fill-opacity': 0.4,

}

});

dataで直接Polygonを指定できる。

    data: {
      'type': 'Polygon',
      'coordinates': [
        [
          [139.747, 35.682],
          [139.742, 35.672],
          [139.752, 35.672],
          [139.747, 35.682],
        ]
      ]
    }

data: {

'type': 'Polygon',

'coordinates': [

[

[139.747, 35.682],

[139.742, 35.672],

[139.752, 35.672],

[139.747, 35.682],

]

}

複数の多角形を描く

以下の例ではaddSourceで2つのPolygonを描いている。addLayoutは上と同じものを使っており、addSourceとaddLayerをmap.onメソッド内で実行させる。

  // 複数のPolygonを描く
  map.addSource('source_polygon', {
    type: 'geojson',
    data: {
      'type': 'FeatureCollection',
      'features': [
        {
          'type': 'Feature',
          'geometry': {
            'type': 'Polygon',
            'coordinates': [
              [
                [139.747, 35.682],
                [139.742, 35.672],
                [139.752, 35.672],
                [139.747, 35.682],
              ]
            ]
          },
        },
        {
          'type': 'Feature',
          'geometry': {
            'type': 'Polygon',
            'coordinates': [
              [
                [139.742, 35.677],
                [139.752, 35.677],
                [139.747, 35.667],
                [139.742, 35.677],
              ]
            ]
          }
        }
      ]
    }
  });

// 複数のPolygonを描く

map.addSource('source_polygon', {

type: 'geojson',

data: {

'type': 'FeatureCollection',

'features': [

{

'type': 'Feature',

'geometry': {

'type': 'Polygon',

'coordinates': [

[

[139.747, 35.682],

[139.742, 35.672],

[139.752, 35.672],

[139.747, 35.682],

]

{

'type': 'Feature',

'geometry': {

'type': 'Polygon',

'coordinates': [

[

[139.742, 35.677],

[139.752, 35.677],

[139.747, 35.667],

[139.742, 35.677],

]

}

]

}

});

'FeatureCollection'の代わりに直接'MultiPolygon'で書くと以下の通り。Polygonの場合は頂点の経緯度配列の3次元配列だったが、MultiPolygonの場合はさらにそれらの配列、4次元配列になる。

これは折れ線の時と比べるとおかしく思えるが、後述のように1つの図形で複数の閉曲線を持つ場合があるためと考えられる。

    data: {
      'type': 'MultiPolygon',
      'coordinates': [
        [[
          [139.747, 35.682],
          [139.742, 35.672],
          [139.752, 35.672],
          [139.747, 35.682],
        ]],
        [[
          [139.742, 35.677],
          [139.752, 35.677],
          [139.747, 35.667],
          [139.742, 35.677],
        ]]
      ]
    }

data: {

'type': 'MultiPolygon',

'coordinates': [

[[

[139.747, 35.682],

[139.742, 35.672],

[139.752, 35.672],

[139.747, 35.682],

]],

[[

[139.742, 35.677],

[139.752, 35.677],

[139.747, 35.667],

[139.742, 35.677],

]]

]

}

捩じれたポリゴンは描けない

以下のように捩じれたポリゴンは描かれない。

    // Zig-zag
    map.addSource('source_polygon', {
      type: 'geojson',
      data: {
        'type': 'Feature',
        'geometry': {
          'type': 'Polygon',
          'coordinates': [
            [
              [139.747, 35.682],
              [139.752, 35.682],
              [139.747, 35.677],
              [139.752, 35.677],
              [139.747, 35.682],
            ]
          ]
        },
      }
    });

// Zig-zag

map.addSource('source_polygon', {

type: 'geojson',

data: {

'type': 'Feature',

'geometry': {

'type': 'Polygon',

'coordinates': [

[

[139.747, 35.682],

[139.752, 35.682],

[139.747, 35.677],

[139.752, 35.677],

[139.747, 35.682],

]

}

});

ドーナッツは描ける

1つのフィーチャーで外側のポリゴンに内側のポリゴンが収まっていれば、描画方向に関わらずドーナッツのようなポリゴンになる。ただしドーナッツの穴の中にポリゴンを置くとうまく描かれない。

    // Doughnut
    map.addSource('source_polygon', {
      type: 'geojson',
      data: {
        'type': 'Polygon',
        'coordinates': [
          [
            [139.742, 35.682],
            [139.752, 35.682],
            [139.752, 35.672],
            [139.742, 35.672],
            [139.742, 35.682],
          ],
          [
            [139.743, 35.681],
            [139.751, 35.681],
            [139.751, 35.678],
            [139.743, 35.678],
            [139.743, 35.681],
          ],
          [
            [139.751, 35.673],
            [139.743, 35.673],
            [139.743, 35.676],
            [139.751, 35.676],
            [139.751, 35.673],
          ],
        ]
      }
    });

// Doughnut

map.addSource('source_polygon', {

type: 'geojson',

data: {

'type': 'Polygon',

'coordinates': [

[

[139.742, 35.682],

[139.752, 35.682],

[139.752, 35.672],

[139.742, 35.672],

[139.742, 35.682],

[

[139.743, 35.681],

[139.751, 35.681],

[139.751, 35.678],

[139.743, 35.678],

[139.743, 35.681],

[

[139.751, 35.673],

[139.743, 35.673],

[139.743, 35.676],

[139.751, 35.676],

[139.751, 35.673],

]

}

});

MapLibre – 折れ線を描く

2022-08-25 / tau / コメントする

1つの折れ線を描く

折れ線(LineString)は'coordinates'を折れ線の各点の2次元配列として与える。以下の例では、ベクトルタイルの地理院地図上に3つの点を結ぶ折れ線を描いている。レイアウトの'type'は'line'。線の色と太さは'paint'で設定し、'layout'では線の端部を丸く、折れ線の角を尖らせている。

let map = new maplibregl.Map({
  container: 'map',
  style: 'https://gsi-cyberjapan.github.io/gsivectortile-mapbox-gl-js/std.json',
  center: [139.747, 35.677],
  zoom: 14,
  minZoom: 4,
  maxZoom: 17,
});

map.on('load', () => {
  // 1つのLineStringを描く
  map.addSource('source_line_string', {
    type: 'geojson',
    data: {
      'type': 'Feature',
      'geometry': {
        'type': 'LineString',
        'coordinates': [
          [139.747, 35.682],
          [139.742, 35.672],
          [139.752, 35.672],
        ]
      },
    }
  });

  // LineStringのスタイルを設定
  map.addLayer({
    'id': 'layer_line_string',
    'type': 'line',
    'source': 'source_line_string',
    'layout': {
      'line-cap': 'round',
      'line-join': 'miter'
    },
    'paint': {
      'line-color': '#0000FF',
      'line-width': 10
    }
  });
});

let map = new maplibregl.Map({

container: 'map',

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

center: [139.747, 35.677],

zoom: 14,

minZoom: 4,

maxZoom: 17,

});

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

// 1つのLineStringを描く

map.addSource('source_line_string', {

type: 'geojson',

data: {

'type': 'Feature',

'geometry': {

'type': 'LineString',

'coordinates': [

[139.747, 35.682],

[139.742, 35.672],

[139.752, 35.672],

]

}

});

// LineStringのスタイルを設定

map.addLayer({

'id': 'layer_line_string',

'type': 'line',

'source': 'source_line_string',

'layout': {

'line-cap': 'round',

'line-join': 'miter'

'paint': {

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

'line-width': 10

}

});

dataで直接'LineString'を指定できる。

    data: {
      'type': 'LineString',
      'coordinates': [
        [139.747, 35.682],
        [139.742, 35.672],
        [139.752, 35.672],
      ]
    }

data: {

'type': 'LineString',

'coordinates': [

[139.747, 35.682],

[139.742, 35.672],

[139.752, 35.672],

]

}

複数の折れ線を描く

以下の例ではaddSourceで2つのLineStringを描いている。addLayoutは上と同じものを使っており、addSourceとaddLayerをmap.onメソッド内で実行させる。

  // 複数のLineStringを描く
  map.addSource('source_line_string', {
    type: 'geojson',
    data: {
      'type': 'FeatureCollection',
      'features': [
        {
          'type': 'Feature',
          'geometry': {
            'type': 'LineString',
            'coordinates': [
              [139.747, 35.682],
              [139.742, 35.672],
              [139.752, 35.672],
            ]
          },
        },
        {
          'type': 'Feature',
          'geometry': {
            'type': 'LineString',
            'coordinates': [
              [139.742, 35.680],
              [139.752, 35.680],
              [139.747, 35.670],
            ]
          }
        }
      ]
    }
  });

// 複数のLineStringを描く

map.addSource('source_line_string', {

type: 'geojson',

data: {

'type': 'FeatureCollection',

'features': [

{

'type': 'Feature',

'geometry': {

'type': 'LineString',

'coordinates': [

[139.747, 35.682],

[139.742, 35.672],

[139.752, 35.672],

]

{

'type': 'Feature',

'geometry': {

'type': 'LineString',

'coordinates': [

[139.742, 35.680],

[139.752, 35.680],

[139.747, 35.670],

]

}

]

}

});

'FeatureCollection'の代わりに直接'MultiLineString'で書くと以下の通り。LineStringの場合は通過点の経緯度の配列の2次元配列だったが、MultiLineStringの場合はさらにそれらの配列、3次元配列になっている。

    data: {
      'type': 'MultiLineString',
      'coordinates': [
        [
          [139.747, 35.682],
          [139.742, 35.672],
          [139.752, 35.672],
        ],
        [
          [139.742, 35.680],
          [139.752, 35.680],
          [139.747, 35.670],
        ]
      ]
    }

data: {

'type': 'MultiLineString',

'coordinates': [

[

[139.747, 35.682],

[139.742, 35.672],

[139.752, 35.672],

[

[139.742, 35.680],

[139.752, 35.680],

[139.747, 35.670],

]

}

MapLibre – 点を描く

2022-08-25 / tau / コメントする

1つの点を描く

以下の例では、ベクトルタイルの地理院地図の中央に1つの点を描き、そのスタイルを半径20の青い丸と設定している。

let map = new maplibregl.Map({
  container: 'map', // 地図を表示するコンテナーのIDを指定
  style: 'https://gsi-cyberjapan.github.io/gsivectortile-mapbox-gl-js/std.json',
  center: [139.747, 35.677],
  zoom: 14,
  minZoom: 4,
  maxZoom: 17,
});

map.on('load', () => {
  // 1つのPointを描く
  map.addSource('source_point', {
    type: 'geojson',
    data: {
      'type': 'Feature',
      'geometry': {
        'type': 'Point',
        'coordinates': [139.747, 35.677],
      },
    }
  });

  // Pointのスタイルを半径20の青い丸とする
  map.addLayer({
    'id': 'layer_point',
    'type': 'circle',
    'source': 'source_point',
    'layout': {},
    'paint': {
      'circle-color': '#0000FF',
      'circle-radius': 20
    }
  });
});

let map = new maplibregl.Map({

container: 'map', // 地図を表示するコンテナーのIDを指定

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

center: [139.747, 35.677],

zoom: 14,

minZoom: 4,

maxZoom: 17,

});

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

// 1つのPointを描く

map.addSource('source_point', {

type: 'geojson',

data: {

'type': 'Feature',

'geometry': {

'type': 'Point',

'coordinates': [139.747, 35.677],

}

});

// Pointのスタイルを半径20の青い丸とする

map.addLayer({

'id': 'layer_point',

'type': 'circle',

'source': 'source_point',

'layout': {},

'paint': {

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

'circle-radius': 20

}

});

dataで直接'Point'を指定できる。

    data: {
      'type': 'Point',
      'coordinates': [139.747, 35.677],
    }

data: {

'type': 'Point',

'coordinates': [139.747, 35.677],

}

複数の点を描く

以下の例ではdataの'type'を'FeatureCollection'として2つの点を描いている。点を青い丸で描くレイアウトは上と同じ。

map.on('load', () => {
  // 複数のPointを描く
  map.addSource('source_point', {
    type: 'geojson',
    data: {
      'type': 'FeatureCollection',
      'features': [
        {
          'type': 'Feature',
          'geometry': { 'type': 'Point', 'coordinates': [139.754, 35.684] },
        },
        {
          'type': 'Feature',
          'geometry': { 'type': 'Point', 'coordinates': [139.742, 35.672] }
        }
      ]
    }
  });

  // Pointのスタイルを半径20の青い丸とする
  map.addLayer({
    'id': 'layer_point',
    'type': 'circle',
    'source': 'source_point',
    'layout': {},
    'paint': {
      'circle-color': '#0000FF',
      'circle-radius': 20
    }
  });
});

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

// 複数のPointを描く

map.addSource('source_point', {

type: 'geojson',

data: {

'type': 'FeatureCollection',

'features': [

{

'type': 'Feature',

'geometry': { 'type': 'Point', 'coordinates': [139.754, 35.684] },

{

'type': 'Feature',

'geometry': { 'type': 'Point', 'coordinates': [139.742, 35.672] }

}

]

}

});

// Pointのスタイルを半径20の青い丸とする

map.addLayer({

'id': 'layer_point',

'type': 'circle',

'source': 'source_point',

'layout': {},

'paint': {

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

'circle-radius': 20

}

});

'FeatureCollection'の代わりに直接'MultiPoint'で描くと以下の通り。Pointのときは経度・緯度を要素とする配列だったが、MultiPointの場合はそれらの2次元配列になっている。

    data: {
      'type': 'MultiPoint',
      'coordinates': [[139.754, 35.684], [139.742, 35.672]]
    }

data: {

'type': 'MultiPoint',

'coordinates': [[139.754, 35.684], [139.742, 35.672]]

}

MapLibre – MapBoxDrawによる描画機能

2022-08-23 / tau / コメントする

実装例

<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
  <meta charset="utf-8" />
  <title>MapLibre and MapBoxDraw</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <!-- MapLibreのライブラリーをロード -->
  <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">
  <!-- MapBoxDrawの描画機能をロード -->
  <script src="https://api.tiles.mapbox.com/mapbox.js/plugins/turf/v3.0.11/turf.min.js"></script>
  <script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.2.0/mapbox-gl-draw.js"></script>
  <link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.2.0/mapbox-gl-draw.css">
</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,
      });

      // MapBoxによる描画機能
      let draw = new MapboxDraw({
        displayControlsDefault: false,
        controls: {
          point: true,
          line_string: true,
          polygon: true,
          trash: true,
        }
      });

      // 右上にカスタムコントロールとして追加
      map.addControl(draw, 'top-right');
    </script>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>MapLibre and MapBoxDraw</title>

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

});

// MapBoxによる描画機能

let draw = new MapboxDraw({

displayControlsDefault: false,

controls: {

point: true,

line_string: true,

polygon: true,

trash: true,

}

});

// 右上にカスタムコントロールとして追加

map.addControl(draw, 'top-right');

</script>

</body>

</html>

手順

head要素内で以下を読み込む
- turf.js：空間演算用のライブラリー(Turf.js)
- mapbox-gl-draw.js
- mapbox-gl-draw.css
Mapオブジェクトを生成する
MapboxDrawオブジェクトを生成する
生成したMapboxDrawオブジェクトをMapオブジェクトのコントロールとして追加する

MapBoxDrawコンストラクターのパラメーター

パラメーターなしの場合

パラメーターなしの場合、Line、Polygon、Point、trashとCombine、Uncombineのボタンが準備される。

パラメーターありの場合

表示されるボタンを選ぶことができる。

displayControlsDefaultをfalseにセット
controlsの連想配列で必要なボタンをtrueにセット
- line_string, polygon, point, trash, combine_features, uncombine_features

MapLibre – コントロールの追加と表示オプション

2022-08-23 / tau / コメントする

実装例

MapLibreの組込みコントロール追加方法。地理院地図ベクトルタイルでの表示例。

<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
  <meta charset="utf-8" />
  <title>MapLibre - Controls</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">
</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: 17,
        minZoom: 4,
        maxZoom: 17,
      });

      // コントロールの追加
      map.addControl(new maplibregl.NavigationControl(), 'bottom-right');
      map.addControl(new maplibregl.ScaleControl(), 'bottom-left');
      //map.addControl(new maplibregl.GeolocateControl(
      //  {positionOptions: {enableHighAccuracy: true}, trackUserLocation: true}), 'top-right');

      // 表示オプション
      map.showTileBoundaries = true;
      // map.showCollisionBoxes = true;
    </script>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>MapLibre - Controls</title>

</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: 17,

minZoom: 4,

maxZoom: 17,

});

// コントロールの追加

map.addControl(new maplibregl.NavigationControl(), 'bottom-right');

map.addControl(new maplibregl.ScaleControl(), 'bottom-left');

//map.addControl(new maplibregl.GeolocateControl(

// {positionOptions: {enableHighAccuracy: true}, trackUserLocation: true}), 'top-right');

// 表示オプション

map.showTileBoundaries = true;

// map.showCollisionBoxes = true;

</script>

</body>

</html>

記述方法

mapがMapインスタンスを参照しているとき、以下の形式で記述。

map.addControl(new maplibregl.[コンストラクター], '[位置指定]');

1	map.addControl(new maplibregl.[コンストラクター], '[位置指定]');

[コンストラクター]はコントロールのコンストラクターで、[位置指定]はtop-left、bottom-rightなど

コントロールの種類

NavigationControl: ズーム(+/−)とローテーションのボタン。ローテーションはボタン位置でドラッグすると地図が回転し、ダブルクリックで北が上の位置に戻る。
ScaleControl: スケールを表示する。スケール表示はズームレベルに合わせて変化する。
GeolocateControl: 携帯端末などでユーザーの位置を扱う。

表示オプション

showTileBoundaries: trueにセットするとタイル境界を表示させる
showCollisionBoxes: trueにセットすると衝突によりラベルが表示されない場合も境界ボックスを描画する。

MapLibre – 表示の基本 – 地理院地図の例

2022-08-22 / tau / コメントする

基本形

有償となったMapBoxの代わりにオープンソースのMapLibreで地理院地図ベクトルタイルを表示する例。

<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
  <meta charset="utf-8" />
  <title>MapLibre - GSI Vector Tile</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <!-- MapLibreのライブラリーをロード -->
  <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">
</head>
  <body>
    <!-- マップを表示するコンテナー -->
    <div id="map" style="width: 800px; height: 600px"></div>
    <script>
      // Mapオブジェクトを生成
      let map = new maplibregl.Map({
        container: 'map', // 地図を表示するコンテナーのIDを指定
        // 地理院ベクトルタイルのスタイル
        style: 'https://gsi-cyberjapan.github.io/gsivectortile-mapbox-gl-js/std.json',
        center: [135.0, 35.0], // 位置指定は経度,緯度の順番なので注意
        zoom: 17,     // 初期ズームレベル
        minZoom: 4,   // 最小ズームレベル
        maxZoom: 17,  // 最大ズームレベル
      });
    </script>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>MapLibre - GSI Vector Tile</title>

</head>

<body>

// Mapオブジェクトを生成

let map = new maplibregl.Map({

container: 'map', // 地図を表示するコンテナーのIDを指定

// 地理院ベクトルタイルのスタイル

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

center: [135.0, 35.0], // 位置指定は経度,緯度の順番なので注意

zoom: 17, // 初期ズームレベル

minZoom: 4, // 最小ズームレベル

maxZoom: 17, // 最大ズームレベル

});

</script>

</body>

</html>

要点は以下の通り。

冒頭でサイトからライブラリーとスタイルを読み込むか、あらかじめダウンロードしておいたライブラリーを指定する
マップを表示するコンテナー要素を準備する
スクリプトでmaplibregl.Mapクラスのインスタンスを生成する
- コンテナーに準備した要素のidを指定
- 地理院地図のスタイルを指定
- 地図表示の中心経緯度を指定～経度・緯度の順番なので注意
- ズーム関係のパラメーターを指定

デフォルトでのマウス／キー操作

デフォルト設定では、以下のマウス操作が可能になっている。

ドラッグによる地図の移動
SHIFT＋ドラッグによるボックスズームイン
CTRL＋ドラッグによる回転と傾斜
ダブルクリックによるズームイン
SHIFT＋ダブルクリックによるズームアウト

また、地図コンテナーにフォーカスがある状態で以下のキー操作が可能

カーソルキーによる地図の移動
SHIFT＋←／→キーによる地図の回転
SHIFT＋↑／↓キーによる傾斜

スタイルでソースを指定している

上記コードでは、表示させるターゲットの地理院地図ベクトルタイルが明示されていないが、実はターゲットとなるデータはstyleで示されるJSON中で指定されている。

sourceのIDは"gsibv-vectortile-source-1-4-16"
layerのIDは"gsibv-vectortile-layer-761"
sourceで指定するtilesは、地理院サイトで示されているURL

{
  "version":8,
  "glyphs": "https://maps.gsi.go.jp/xyz/noto-jp/{fontstack}/{range}.pbf",
  "sources": {
    "gsibv-vectortile-source-1-4-16": {
      "type": "vector",
      "tiles": ["https://cyberjapandata.gsi.go.jp/xyz/experimental_bvmap/{z}/{x}/{y}.pbf"],
      "minzoom": 4,
      "maxzoom": 16,
      "attribution": "<a href=\"https://maps.gsi.go.jp/vector/\" target=\"_blank\">地理院地図Vector（仮称）</a>"
    }
  },
  "layers": [
    {
      "id": "gsibv-vectortile-layer-761",
      "type": "line",
      "source": "gsibv-vectortile-source-1-4-16",
      "source-layer": "structurel",
      "metadata": {
        "layer-id": "layer-577",
        "title":"坑口",
        "path":"構造物-坑口",
        "added": 1
    },
    "minzoom": 14,"maxzoom": 17,
    "filter": ["all", ["in", "ftCode", 4202]],
    "layout": {"line-cap": "square", "visibility": "visible"},
    "paint": {"line-color":"rgba(100,100,100,1)","line-width":1.5}
    ・・・・・

{

"version":8,

"glyphs": "https://maps.gsi.go.jp/xyz/noto-jp/{fontstack}/{range}.pbf",

"sources": {

"gsibv-vectortile-source-1-4-16": {

"type": "vector",

"tiles": ["https://cyberjapandata.gsi.go.jp/xyz/experimental_bvmap/{z}/{x}/{y}.pbf"],

"minzoom": 4,

"maxzoom": 16,

"attribution": "<a href=\"https://maps.gsi.go.jp/vector/\" target=\"_blank\">地理院地図Vector（仮称）</a>"

}

"layers": [

{

"id": "gsibv-vectortile-layer-761",

"type": "line",

"source": "gsibv-vectortile-source-1-4-16",

"source-layer": "structurel",

"metadata": {

"layer-id": "layer-577",

"title":"坑口",

"path":"構造物-坑口",

"added": 1

"minzoom": 14,"maxzoom": 17,

"filter": ["all", ["in", "ftCode", 4202]],

"layout": {"line-cap": "square", "visibility": "visible"},

"paint": {"line-color":"rgba(100,100,100,1)","line-width":1.5}

・・・・・

タイル画像のズームについて

2022-08-21 / tau / コメントする

概要

地理院タイルの画像を並べて表示し、ズームイン／ズームアウトの機能を実装したときの整理。マウスカーソルを置いた位置を固定して、そこを中心にズームイン／ズームアウトをするのにちょっと手間取った。

基本の考え方

共通する考え方は以下の通り。

マウスクリック位置を記録する
拡大／縮小対象のタイルを拡大／縮小し、マウス位置もそれに合わせて変換
変換後の位置がマウス位置に重なるよう、タイルを平行移動

なお地理院タイルではタイルそのものを表す「タイル座標」を定義しているが、ピクセルの座標との区別を明確にするため、ここでは「タイルアドレス」と表現し、ピクセル単位の座標を「ピクセル座標」と表現する。

ズームインの場合

ズームインの場合、マウス位置がタイルの左側か右側か、上側か下側かによって拡大するタイルやスライドの方向・量が異なる。以下ではxとyがともに左・上、右・下のケースで整理しているが、xとyは独立に判定してよい。

マウス位置がタイルの幅／高さの半分未満の時

下図の緑色のタイルが現在表示されているタイルでタイルの幅をw、高さをhとする。また黒い点(x, y)をマウス位置とする。位置(x, y)はタイル左上の点からのオフセットで表しているが、タイルを表示するcanvasなどの座標に相当する。

タイルアドレスをr/cとして、マウス位置がタイルの幅／高さの半分より左／上の場合を考える。拡大するタイルはr/cに対して青いタイル2r/2cで、拡大前の幅w/2、高さh/2が2倍になり、元のタイルと同じサイズになる。

拡大後のタイルでは、マウス位置(x, y)にあった地上の位置はタイルの拡大につれて(2x, 2y)となる。マウス位置(x, y)は拡大後のタイル上でも同じ。

拡大後の地上の位置を元の位置に合わせるためタイルをスライドさせる。スライド量は(2x, 2y)と(x, y)の差(x, y)で、スライド方向は左上の方向。

マウス位置がタイルの幅／高さの半分以上の時

元のタイルr/cに対して拡大するタイルは2r+1/2c+1となる。また、拡大するタイル内での地上位置のオフセットは(x – w/2, y – h/2)となる。

タイルを拡大すると、地上の位置のオフセットは(2x – w, 2y – h)となる。マウス位置は(x, y)のまま。

地上の位置をマウス位置に合わせるためタイルをスライドさせる。スライド量は(x, y)と(2x – w, 2y – h)の差で(w – x, h – y)。スライド方向は右下の方向。

ズームアウトの場合

ズームインの場合、タイルアドレスが偶数か奇数かによって縮小するタイルやスライドの方向・量が異なる。以下ではxとyがともに偶数／基数のケースで整理しているが、xとyは独立に判定してよい。

タイルアドレスが偶数の場合

緑色のタイルが現在表示されているタイルで、アドレスが偶数の場合、縮小するタイルは右／下方向に広がった青いタイルr/c。その幅・高さは2w、2cから半分のw、cとなる。サイズが半分になる前の地上位置のオフセットは、(x, y)。

ここではタイルのサイズを上の図の2倍のサイズで描いている。タイル縮小後の元の位置は、タイル幅／高さが1/2になるのに伴って(x/2, y/2)となる。マウス位置(x, y)は元のまま。

地上の位置をマウス位置に合わせるためタイルをスライドさせる。スライド量は(x, y)と(x/2, y/2)の差で(x/2, y/2)。スライド方向は右下の方向。

タイルアドレスが奇数の場合

緑色のタイルが現在表示されているタイルで、アドレスが奇数の場合縮小するタイルは左／上方向に広がった青いタイルr/c。縮小するタイル上での縮小前の地上位置のオフセットは(x + w, y +ｈ）

ここではタイルのサイズを上の図の2倍のサイズで描いている。タイル縮小後の元の位置は、タイル幅／高さが1/2になるのに伴って((x + w)/2, (y + h)/2)となる。マウス位置(x, y)は元のまま。

地上の位置をマウス位置に合わせるためタイルをスライドさせる。スライド量は((x + w)/2, (y + h)/2と(x/2, y/2)の差で((w – x)/2, (h – y)/2)。スライド方向は左上の方向。