튜토리얼: React ⚛ + 전단지 🗺

안녕하세요, 👋 오늘 저는 Leaflet을 React와 함께 사용하는 방법에 대한 작은 튜토리얼을 여러분과 공유하고 싶습니다.

이를 위해 우리는 파리의 관광지를 찾을 수 있는 웹 앱을 만들 것입니다! 🇫🇷 🥖.

https://react-leaflet-example.netlify.app/에서 데모를 확인할 수 있습니다. 🚀

전단지란?

Leaflet은 대화형 지도를 위한 가장 인기 있는 오픈 소스 라이브러리입니다. 지도에 마커를 추가하고 원, 사각형, 선 및 훨씬 더 흥미로운 것들을 만들 수 있습니다. 자세한 내용은 설명서를 확인하십시오. https://leafletjs.com/

우리가 할 일 : 📝

프로젝트 생성 및 모든 종속성 설치

파리

를 중심으로 지도 표시

지도에 마커 표시

지도에 새 마커 추가

마커 사이에 선 그리기

For a sake of visibility, I will put only some part of the code in this article, but feel free to check the source code on Github repo

설치 ⚙️

먼저 이 프로젝트에 대한 종속성을 만들고 설치해 보겠습니다.

create-react-app으로 프로젝트를 생성해 보겠습니다.

npx create-react-app react-leaflet-example --template typescript

leaflet 및 react-leaflet 설치

npm i -S leaflet react-leaflet

설치 유형(TypeScript를 사용하지 않는 경우 선택 사항):

npm i -D @types/leaflet

지도 보기 🗺

이제 필요한 모든 것을 설치했으므로 Map이라는 새 구성 요소를 만들어 보겠습니다. 그리고 설명서에서 시작 코드를 추가합니다.
그것은 MapContainer를 사용하고 우리는 지도를 우리 도시의 중심에 놓기 위해 몇 가지 좌표를 전달합니다.

TileLayer is used to show copyright on the Map

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

const Map = () => {
  const defaultPosition: LatLngExpression = [48.864716, 2.349]; // Paris position

  return (
    <div className="map__container">
      <MapContainer
        center={defaultPosition}
        zoom={13}
      >
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
      </MapContainer>
    </div>
  );
};

지도에 마커 표시 📍

지도에는 아직 장소가 없습니다. 이제 몇 가지 기본 장소를 추가해 보겠습니다. 이를 위해 다음 속성을 사용하여 미리 장소 배열을 만들었습니다.

import { LatLngExpression } from "leaflet";

export interface Place {
  id: string;
  picture: string;
  title: string;
  description: string;
  seeMoreLink: string;
  position: LatLngExpression;
}

In my application, I use redux to handle state management of places, show preview modal, etc. I skip how to create/use a store with react-redux. You can check the code on githup repo

이제 장소 배열을 가져오고 각 장소에 대해 Marker 구성 요소를 사용하겠습니다. 마커는 우리 장소의 위치를 ​​소품으로 필요로 합니다. 클릭하여 장소 설명을 표시하는 것과 같은 이벤트도 처리할 수 있습니다.
Marker's options에 대해 자세히 확인

import { MapContainer, TileLayer, Marker, Tooltip } from "react-leaflet";
import { LatLngExpression } from "leaflet";

const Map = ({places}) => {
  const defaultPosition: LatLngExpression = [48.864716, 2.349]; // Paris position

  const showPreview = (place) => {
    // show place's description
  }

  return (
    <div className="map__container">
      <MapContainer
        center={defaultPosition}
        zoom={13}
      >
        {places.map((place: Place) => (
          <Marker
            key={place.id}
            position={place.position} // 👈
            eventHandlers={{ click: () => showPreview(place) }}
          >
            {/* show place's title on hover the marker */}
            <Tooltip>{place.title}</Tooltip> 
          </Marker>
        ))}

        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
      </MapContainer>
    </div>
  );
};

지도에 새 마커 추가 ➕📍

시원한! 이제 지도에 마커가 있지만 새 장소를 동적으로 추가하는 방법은 무엇입니까? 지도를 클릭할 때 새 장소를 추가하고 싶다고 가정해 보겠습니다.

클릭 시 새 위치를 표시하기 위해 이를 처리하고 상점을 업데이트할 AddMarker라는 새 구성 요소를 만들 것입니다.
이 구성 요소에서는 useMapEvents 후크를 사용합니다.

import { MapContainer, TileLayer, Marker, Tooltip, useMapEvents } from "react-leaflet";

const AddMarker = () => {
  const [position, setPosition] = useState(null);

  useMapEvents({
    click: (e) => {
      setPosition(e.latlng); // 👈 add marker

      /* CODE TO ADD NEW PLACE TO STORE (check the source code) */
    },
  });

  return position === null ? null : (
    <Marker position={position}></Marker>
  );
};
const Map = ({places}) => {
  /* ... */

  return (
    <div className="map__container">
      <MapContainer
        center={defaultPosition}
        zoom={13}
      >
        {/* ... */}
        <AddMarker/>
        {/* ... */}
      </MapContainer>
    </div>
  );
};

파리를 방문할 때 파리 생제르맹 경기장을 추가합시다 ⚽️
따라서 클릭하면 새 장소를 추가하는 양식이 표시됩니다.


저장하면 새 장소가 지도에 추가됩니다 🎉.

선 그리기 ✏️

지도에 마커를 추가하는 방법을 배웠으므로 이제 각 마커 사이에 선을 그려 보겠습니다.

이를 위해 Polyline 구성 요소를 사용합니다.
이 구성 요소에는 선을 그리기 위한 위치 목록이 필요합니다. 이제 장소로 위치 배열을 만들어 봅시다.

I'll use useEffect to create this array only when places change.

const Map = ({ places }) => {

  const [polyLineProps, setPolyLineProps] = useState([]);

  useEffect(() => {
      setPolyLineProps(places.reduce((prev: LatLngExpression[], curr: Place) => {
        prev.push(curr.position);
        return prev
        ;
      }, []))
    }, [places]);

  return (
    <MapContainer
          center={defaultPosition}
          zoom={13}
          scrollWheelZoom={false}
          style={{ height: "100vh" }}
          zoomControl={false}
        >
    {/* ... */}
      <Polyline positions={polyLineProps} /> {/* 👈 */}
    {/* ... */}

    </ MapContainer>
  )
}

결론

이 기사에서는 동적으로 마커를 추가하고 선을 그리는 것과 같이 지도를 표시하고 지도와 상호 작용하는 데 성공했습니다. 더 나아가려면 circle 또는 rectangle 을 그릴 수 있습니다.

그것이 당신 중 일부를 도왔기를 바랍니다.
읽어 주셔서 감사합니다. 😇

Github 👈에서 사용 가능한 소스 코드

출처

React-Leaflet

Leaflet