【React】maplibre-glでosmを表示する【react-map-glなし】

はじめに

Reactとmaplibre-glでOSM（オープンストリートマップ）を表示する一番初歩的な記述を掲載した記事が意外にもなかったので、自分の備忘のためにもまとめました。

解決方法

import maplibregl from "maplibre-gl";
import "maplibre-gl/dist/maplibre-gl.css";
import { useEffect, useRef } from "react";

export default function FreeMap() {
  const mapContainerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const container = mapContainerRef.current;
    if (!container) return;

    const map = new maplibregl.Map({
      container,
      style: "https://tile.openstreetmap.jp/styles/osm-bright-ja/style.json",
      center: [139.68786, 35.68355],
      zoom: 13,
    });

    return () => {
      map.remove();
    };
  }, []);

  return <div ref={mapContainerRef} className="h-full w-full"></div>;
}

おわりに

バニラjsやmaplibre-glをReactで使いやすくしてくれるラッパーのreact-map-glの記事があったのですが、意外とReactとmaplibre-glだけを使った記事がなかったので残しました。

参考

JISOUのメンバー募集中！

プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてください！
▼▼▼