Copyright (C) 2021 Toranoana Inc. All Rights Reserved.
フロントエンドで動く地図表示
18
● islandsでdynamic importした
import { useEffect, useRef, useState } from "preact/hooks";
export function MapContainer() {
const mapContainer = useRef(null);
const [map, setMap] = useState(null);
useEffect(() => {
if (typeof document === "object" && mapContainer && mapContainer.current) {
import("leaflet").then((L) => {
const m = L.map("map").setView([51.505, -0.09], 13);
L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
maxZoom: 19,
attribution:
'©
OpenStreetMap',
}).addTo(m);
setMap(map);
});
}
}, []);
return
;
}