소개

React에서지도를 표시하고 그 위에 마커를 표시합니다. React Leaflet 을 참고로 진행했다. React의 기본 지식은 알고 있다고 가정합니다.

React-Leaflet 설치

다음 명령으로 설치할 수 있습니다.

$ npm install react react-dom leaflet
$ npm install react-leaflet

leaflet 구성 요소 만들기

지정된 좌표를 중심으로 지도를 표시하고 마커를 추가하는 구성 요소를 만듭니다. 임의의 디렉토리에서 SimpleLeaflet.js 라는 파일을 작성해, 이하 코드를 쓴다. 여기에서는 components/Leaflet 디렉토리의 바로 아래에 놓았다. useState 를 사용하는 것으로 지정 위치나 줌을 변경하는 것을 볼 수 있어 position 이나 zoom 를 작성하고 있지만, 이 기사에서는 특히 사용하고 있지 않다.

SimpleLeaflet.js

import React, { useState } from "react";
import "leaflet/dist/leaflet.css";
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";

const SimpleLeaflet = () => {
  const [position, setPosition] = useState({
    lat: 51.505,
    lng: -0.09,
  });
  const [zoom, setZoom] = useState(13);

  return (
    <div>
      <MapContainer center={position} zoom={zoom} style={{ height: "50vh" }}>
        <TileLayer
          attribution='&amp;copy <a href="http://osm.org/copyright";>OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        <Marker position={position}>
          <Popup>
            A pretty CSS3 popup. <br /> Easily customizable.
          </Popup>
        </Marker>
      </MapContainer>
    </div>
  );
};

export default SimpleLeaflet;

상기 컴포넌트를 작성한 후 App.js 등에 import SimpleLeaflet from "components/Leaflet/SimpleLeaflet.js"; 로 컴포넌트를 읽어 출력하고 싶은 장소에서 <SimpleLeaflet /> 하면 다음과 같이 지도를 표시할 수 있다.


import "leaflet/dist/leaflet.css"; 에서 CSS 를 로드하거나 <MapContainer ... style={{ height: "50vh" }}> 에서 높이를 지정하지 않으면 지도가 제대로 표시되지 않으므로 주의.

위에서는 마커가 아직 표시되지 않았습니다. 조사한 결과, Marker not appearing for simple example #453 를 발견. 이것을 참고로 코드를 추가한 결과 마커를 표시할 수 있었다.

SimpleLeaflet.js

import React, { useState } from "react";
import "leaflet/dist/leaflet.css";
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
// add icons
import Leaflet from "leaflet";
import icon from "leaflet/dist/images/marker-icon.png";
import iconShadow from "leaflet/dist/images/marker-shadow.png";

// marker setting
let DefaultIcon = Leaflet.icon({
  iconUrl: icon,
  shadowUrl: iconShadow,
});
Leaflet.Marker.prototype.options.icon = DefaultIcon;

const SimpleLeaflet = () => {
  const [lat, setLat] = useState(51.505);
  const [lng, setLng] = useState(-0.09);
  const [zoom, setZoom] = useState(13);
  const [position, setPosition] = useState({
    lat: 51.505,
    lng: -0.09,
  });

  return (
    <div>
      <MapContainer center={position} zoom={zoom} style={{ height: "50vh" }}>
        <TileLayer
          attribution='&amp;copy <a href="http://osm.org/copyright";>OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        <Marker position={position}>
          <Popup>
            A pretty CSS3 popup. <br /> Easily customizable.
          </Popup>
        </Marker>
      </MapContainer>
    </div>
  );
};

export default SimpleLeaflet;

클릭하면 팝업이 표시되는 것도 확인할 수 있다.