【MapLibre GL JS】地図の下に三角マークがあるけど、なんだこれは？

•MapLibre GL JS
Back

cover image from Unsplash

Photo by Nick Seagrave on Unsplash

本記事について

これです。

地図の下、左端に三角地図の下、左端に三角がいます。

開発者ツールで選択した様子開発者ツールで選択するとこんな感じ。

開発者ツールで選択すると、maplibregl-ctrl-attrib-button と書いてある。

三角マークを非表示にする

attributionControl: falseで非表示にすることができます。

https://maplibre.org/maplibre-gl-js/docs/API/classes/maplibregl.AttributionControl/

  import maplibregl from 'maplibre-gl';
 
  const map = new maplibregl.Map({
+   attributionControl: false,
    container: 'map',
    style: 'https://demotiles.maplibre.org/style.json',
    center: [-74.5, 40],
    zoom: 9
});

出典を表示する

OpenStreetMap 等マップタイルを使用している場合は、AttributionControlにより出典を表示することができます。

  import maplibregl from 'maplibre-gl';
 
  const map = new maplibregl.Map({
      attributionControl: false,
      container: 'map',
      style: 'https://demotiles.maplibre.org/style.json',
      center: [-74.5, 40],
      zoom: 9
});
+ map.addControl(
+    new maplibregl.AttributionControl({
+        compact: true,
+        customAttribution:
+            '&copy; <a href="https://www.openstreetmap.org/copyright/ja" target="_blank">OpenStreetMap</a> contributors</p>',
+    }),
+    "bottom-left"
+  );