IT初学者部

プログラミングに関することを中心に、備忘録として残していきます。

Reactプロジェクトにleafletでも導入してみる

はじめに

c-mappアプリケーションプロジェクトをとりあえずreactで作成してみることにしました。

ということで、reactにleafletを導入する手順について簡単に備忘録を残します。

そもそもなんで?

もともとはVue.jsでマップアプリケーションを作成していたんですが、一度Vue.jsでアプリケーションを作成してしまった、というのが理由になります。

せっかく別にマップアプリケーションを作るのなら、別のライブラリを使って作成したい!というのと、Angular, Vue.jsで1つずつアプリケーションを作成しているので、次はReactの版だ!という思いになりました。

ということで、新生c-mappの作成です。

今回の手順としては、leafletを導入して見るところから始まります。

手順

Reactプロジェクトのディレクトリで、以下のコマンドを実行します。

npm install react-leaflet

React Leaflet | React Leaflet

Leaflet自体はjavascriptで動くもので、それをインストールしてきて使うのでも十分なのですが、より最適化され、使いやすくなっているReact-Leafletを利用していきます。

Installation | React Leaflet

ここにいくつか書いてありますが、単純にReact-Leafletを導入したいのであれば上記のコマンドで十分です。

インストール後、以下のような記載を実施すれば地図を表示させること自体は可能となります。

(一部抜粋した状態です。より詳しく知りたい方は公式HPなどを参照ください。)

import { MapContainer, TileLayer } from 'react-leaflet';

export const Sample = () => {

 return (
  <>
    <MapContainer
        center={35, 139}
        zoom={13}
        style={ height: "75vh"}
    >
        <TileLayer
            attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" 
        />
    </MapContainer>
  </>
 )
};

こんな感じの書き方をし、npm startなどでローカル起動すると地図が表示されます。

この辺については、c-mappの作成の中で記事にしていこうと思います。

今日はここまで。

おわりに

React, Angular, Vue.jsとありますが日本国内だと特にReactが強い用に思います。(Googleトレンドの件数など) Reactできるようになって損することは当分なさそうですね。