React入門から少し脱したい！無料地図サービスを使って遊ぶ

Reactでちょっといけたアプリをつくってみたい！

webアプリを作ってみたいけど何を作ればいいかわからない！

人の手助けに少しでもなればと思いこの記事を書きました。

この記事を読んで地図サービスがこんなけ簡単に使えるなら、他にもこういうのを実装してみるのはどうか？？と考えていくうちにアイデアが広がることでしょう。

今回はGoogleMapのような地図サービスであるOpenStreetMapを使用して画面に地図を描画してみようと思います。

環境
OpenStreetMapとは、Leafletとは
やっていく

環境

MacBook BigSur

Docker 4.5.0

OpenStreetMapとは、Leafletとは

OpenMapStreetは地図の情報が集まったデータ群です。

それ単体で使うのではなく、Leafletと呼ばれるJavacriptのモジュールを使用して画面側で地図を利用します。

流れ的にはOpenMapStreetから取得された地図情報をLeafletを用いて画面操作するイメージです。

やっていく

dockerは導入済みである前提です。下記を参照願います。

Install Docker Desktop on Mac

Install Docker for Mac to get started. This guide covers system requirements, where to download, and instructions on how to install and update.

dockerファイルの作成

コマンドプロンプトにて以下のコードを実行するか、「OMStest」というフォルダを作成しその中に「Dockerfile」というファイルを作成して下さい。

mkdir OMStest
cd OMStest
vi Dockerfile

Dockerfileの中身は以下の通りです。

# IMAGEを取得
FROM node:16-alpine
# この直下で動かす
WORKDIR /usr/src/app

docker-compose.yamlファイルを作成

コマンドプロンプトにて以下のコードを実行するか、「OMStest」というフォルダの中に「docker-compose.yaml」というファイルを作成して下さい。

vi docker-compose.yaml

docker-compose.yamlの中身は以下の通りです。

version: '3.8'
services:
  front:
    build:
      context: .
      dockerfile: Dockerfile
    restart: always
    volumes:
      - ./node:/usr/src/app:cached
    command: sh -c "cd front && yarn start"
    ports:
      - "3000:3000"

上記２つのファイルを保存したディレクトリにて以下のコマンドを実行してください。

docker-compose run --rm front sh -c "npm install -g create-react-app && create-react-app front"

上記コマンド実行時にネット回線が悪いとTimeoutエラーが出力されるため、何回か上記のコマンドを試してみるといいかもです。

それでも同じエラーが出力され続けるなら以下を実行して、再度docker-composeを実行してください。

npm set timeout=100000

上記の実行が終わり次第コンテナをバックグラウンドで起動させます。

docker-compose up -d front

OpenMapStreet利用の準備

次に作成した環境のCLIに入ります。

DockerのGUIまたはコマンドラインから入ることができます。

GUIの場合は赤枠をクリックするとCLI画面が開きます。

コマンドラインからは青マーカー部分を実行して入ります

ただし「docker container exec -it xxxxxx sh」のxxxxxx部分にはpsコマンドで確認したCONTAINER IDを入力してください。

docker container ps
CONTAINER ID   IMAGE           COMMAND                  CREATED       STATUS              PORTS                    NAMES
3e26031bf0eb   omstest_front   "docker-entrypoint.s…"   4 hours ago   Up About a minute   0.0.0.0:3000->3000/tcp   omstest-front-1
docker container exec -it 3e26031bf0eb sh
/usr/src/app #

Leafletを使用する準備をします。

以下のコマンドをCLIで実行し、React-leafletを使えるようにします。

npm install leaflet react-leaflet --save

次にコンテナ内にて３つのファイルの追加、修正を行います。

この作業は先ほどのCLI上でも出来ますが、VSCodeを開いて実行するといいでしょう。

【追加】/src/component/MapArea.js

import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet'

const MapArea = (props) => {
    const MapContainerStyle = {
        width: '600px',
        height: '300px',
        margin: '10px'
    }
    return (
        <MapContainer center={[35.680, 139.767]} zoom={13} style={MapContainerStyle}>
        <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={[35.680, 139.767]}>
            <Popup>
            ！！！東京です！！！
            </Popup>
        </Marker>
        </MapContainer>
    );
}

export default MapArea;

【修正】/public/index.html

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
   integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
   crossorigin=""/>

【修正】/src/App.js

import logo from './logo.svg';
import './App.css';
import MapArea from './component/MapArea';
function App() {
  return (
    <div className="App">
      <MapArea />
    </div>
  );
}

export default App;