マイマップにホバー効果を追加

前回作ったMaplibre GL JSのマイマップにホバー効果を追加しました．少し難しかったため，ブログ上でやり方を整理しました．触ってみたい方は

マイマップ

githubのリンクに飛んでください．

ホバー効果 (hover effect) とは？

ホバー効果は，マウスを線・面の上に重ねたときに，線と面の範囲を分かりやすく表示する機能です．次の例では，中央線の上にカーソルを乗せたときにホバー効果です．中央線は，長野どころか名古屋まで延びているんですね．

ホバー効果の例（マイマップ）

面の場合はこんな感じ（https://maplibre.org/maplibre-gl-js/docs/examples/hover-styles/）．

データの用意

次のようなGeoJSONデータを用意します．重要なのは"id"です．これは整数でなくてはいけません．今回は，路線名が同じ線に対して同じidを振りました．このidをMaplibre GL JSが確認し，同じidを持った線が太くなります．

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "id": "361",
      "properties": {
        "鉄道区分": "23",
        "事業者種別": "5",
        "路線名": "沖縄都市モノレール線",
        "運営会社": "沖縄都市モノレール"
      },
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [
            127.67948,
            26.21454
          ],
          [
            127.6797,
            26.21474
          ],
          [
            127.67975,
            26.2148
          ],
          [
            127.68217,
            26.21728
          ],
          [
            127.68357,
            26.21862
          ],
          [
            127.68394,
            26.21891
          ],
          [
            127.68419,
            26.21905
          ]
        ]
      }
    },
  },
},

ホバー効果の部分のソースコードです．'rail'は追加したソース名です．

let hoveredStateId = null;
// 鉄道のhovor効果
map.on('mousemove', 'rail', (e) => {
  if (e.features.length > 0) {
    if (hoveredStateId) {
        map.setFeatureState(
            {source: 'rail', id: hoveredStateId},
            {hover: false}
        );
    }
    hoveredStateId = e.features[0].id;
    map.setFeatureState(
        {source: 'rail', id: hoveredStateId},
        {hover: true}
    );
  }
});


map.on('mouseleave', 'rail', () => {
  if (hoveredStateId) {
    map.setFeatureState(
        {source: 'rail', id: hoveredStateId},
        {hover: false}
    );
  }
  hoveredStateId = null;
});

リンク先

• マイマップ

マイマップ

• ソースコード

Create a hover effect

Create a hover effect - MapLibre GL JS