Zenn
Closed18

「Amplify Geo で React アプリに地図を表示してみよう」をなぞる

AWS
#
map
Amplify
#
locationservice
KumaoKumao

大方チュートリアル通りに現在もできるが、１点だけ変えないとエラーになる。

import { useEffect } from 'react';
import { createMap } from "maplibre-gl-js-amplify";
// 以下だけ変える必要がある。Amplify -> {Amplify}
import { Amplify } from 'aws-amplify';
import awsconfig from './aws-exports';
import "maplibre-gl/dist/maplibre-gl.css";

// Amplify の設定を読み込み
Amplify.configure(awsconfig);

function App() {
  useEffect(() => {
    createMap({
      container: "map", // An HTML Element or HTML element ID to render the map in https://maplibre.org/maplibre-gl-js-docs/api/map/
      center: [139.7674681227469, 35.68111419325676], // 東京駅
      zoom: 14,
  })
  }, []);
  return (
    <div id="map" style={{height: '100vh'}}/>
  );
}

export default App;
KumaoKumao

チュートリアル通りだと地図を変える方法が無かったり、シンプルすぎるのでもう少しやってみる。

KumaoKumao

Amplify geoのチュートリアルでnpmを使ってるので、そのままnpmで。
このスターターは使用しません。

KumaoKumao

ライブラリのインストールがありますが、ここで@maplibre/maplibre-gl-leafletをインストールしようとするとエラーに。どうやらmaplibre-glのバージョンを上げろと怒られる。

npm install aws-amplify
npm install maplibre-gl-js-amplify
npm install maplibre-gl@
npm install @maplibre/maplibre-gl-leaflet

2.4.0を入れろと言われるので、言われるがままバージョンアップ。

npm i maplibre-gl@2.4.0

installできました。

  "dependencies": {
    "@geoblocks/ol-maplibre-layer": "^0.1.1",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "aws-amplify": "^5.3.5",
    "maplibre-gl": "^2.4.0",
    "maplibre-gl-js-amplify": "^3.1.0",
}
KumaoKumao

検索窓をつけて検索できるようにしてみる
以下の @aws-amplify/ui-react ライブラリがあるので、その中でgeoのものを使ってみる。
https://ui.docs.amplify.aws/

npm i @aws-amplify/ui-react-geo
App.js
import { useState } from 'react';
import { Amplify } from 'aws-amplify'
import { MapView, LocationSearch } from '@aws-amplify/ui-react-geo';
import awsconfig from './aws-exports';
import '@aws-amplify/ui-react-geo/styles.css';
import 'maplibre-gl/dist/maplibre-gl.css'
import '@maplibre/maplibre-gl-geocoder/dist/maplibre-gl-geocoder.css'
import 'maplibre-gl-js-amplify/dist/public/amplify-geocoder.css'

// setting Amplify
Amplify.configure(awsconfig);

function App() {

  const [{ latitude, longitude }] = useState({
    latitude: 40,
    longitude: -100,
  });

  return (
    <div>
      <MapView
        initialViewState={{
          latitude: 37.8,
          longitude: -122.4,
          zoom: 14,
        }}
      >
        <LocationSearch />
      </MapView>
    </div>
  );
}

export default App;
このスクラップは2023/07/23にクローズされました