タイトル : 駅別乗降人員の推移 MAP表示 その1 leafletを使ってみましょう
更新日 : 2024-04-14
カテゴリ : プログラミング
leafletを使ってみましょう
駅の場所を示してみましょう。とりあえずは最寄り駅で。
以前、leafletを使ったアプリをやったので leaflet を久しぶりに触ってみたいだけ... オープンデータとは関係なかったりする
まずは Next.jsプロジェクトでReact Leafletを使って地図を表示してみた をほぼそのまま。
今回のオープンデータの趣旨もあるけど、タイルは OpenStreetmap を当然使いますね。Googleさんと比べる必要はありません。オープンであることが素晴らしい。
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";
L.Icon.Default.mergeOptions({
iconUrl: markerIcon.src,
iconRetinaUrl: markerIcon2x.src,
shadowUrl: markerShadow.src,
});
const Map = () => {
return (
<MapContainer
center={[35.555994, 139.419189]}
zoom={12}
scrollWheelZoom={false}
style={{ height: "80vh", width: "100%" }}
>
<TileLayer
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<Marker position={[35.520515, 139.438901]}>
<Popup>
東林間駅
</Popup>
</Marker>
</MapContainer>
);
};
export default Map;