Closed8

react-leaflet使ってみる

ピン留めされたアイテム
ruudreiruudrei

/publicなどにアイコン持ってきてここにアイコンパスをベタ打ちした方が、流石に良さそう...

ruudreiruudrei

インストール

yarn add leaflet react-leaflet @types/leaflet
ruudreiruudrei

コンポーネント作成

Map.tsx
import { MapContainer, Marker, Popup, TileLayer } from "react-leaflet";
import "leaflet/dist/leaflet.css";

import L from "leaflet";
import markerIcon2x from "leaflet/dist/images/marker-icon-2x.png";
import markerIcon from "leaflet/dist/images/marker-icon.png";
import markerShadow from "leaflet/dist/images/marker-shadow.png";

delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.mergeOptions({
  iconUrl: markerIcon.src,
  iconRetinaUrl: markerIcon2x.src,
  shadowUrl: markerShadow.src,
});

export const Map = () => {
  return (
    <MapContainer
      center={[51.505, -0.09]}
      zoom={13}
      scrollWheelZoom={false}
      style={{ height: "100vh", width: "100%" }}
    >
      <TileLayer
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <Marker position={[51.505, -0.09]}>
        <Popup>
          A pretty CSS3 popup. <br /> Easily customizable.
        </Popup>
      </Marker>
    </MapContainer>
  );
};
ruudreiruudrei

これっぽいが、delete L.Icon.Default.prototype._getIconUrl;の_getIconUrlでエラーが発生する

ruudreiruudrei

これを見ると、@types/leafletを入れろとのことだが、既に入れている

ruudreiruudrei

leaflet.tsxを作成して、ダイナミックインポートを行うことで解決

leaflet.tsx
import dynamic from "next/dynamic";

// Dynamic importを行うことで、leafletライブラリ内の「window is not defined」エラーを回避
const Map = dynamic(
  () => import("~/components/map").then((modules) => modules.Map),
  { ssr: false }
);
export default function Home() {
  return (
    <>
      <Map />
    </>
  );
}
このスクラップは2022/12/27にクローズされました