タイトル : 駅別乗降人員の推移 MAP表示 その1 leafletを使ってみましょう
更新日 : 2024-04-14
カテゴリ : プログラミング
タグ :
opendata   
leaflet   
nextjs   

駅別乗降人員の推移 相模原市オープンデータ TOPページ

leafletを使ってみましょう

駅の場所を示してみましょう。とりあえずは最寄り駅で。

以前、leafletを使ったアプリをやったので leaflet を久しぶりに触ってみたいだけ... オープンデータとは関係なかったりする

MAP

まずは 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='&copy; <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;