데이터 레이어 예제

GeoJSON과 GPX 데이터를 로딩해서 지도 위에 표시하는 예제입니다.

라이브 예제

GeoJSON 코드

import { useState } from "react";
import { DataLayer, Map } from "@rousen/react-naver-maps";

function DataLayerExample() {
  const [useAltStyle, setUseAltStyle] = useState(false);
  const style = useAltStyle
    ? {
        fillColor: "#f97316",
        fillOpacity: 0.25,
        strokeColor: "#ea580c",
        strokeOpacity: 0.9,
        strokeWeight: 3,
      }
    : {
        fillColor: "#60a5fa",
        fillOpacity: 0.35,
        strokeColor: "#2563eb",
        strokeOpacity: 0.9,
        strokeWeight: 2,
      };

  return (
    <div>
      <button type="button" onClick={() => setUseAltStyle((prev) => !prev)}>
        GeoJSON 스타일 변경
      </button>
      <div style={{ width: "100%", height: "400px", marginTop: "10px" }}>
        <Map
          ncpKeyId="your-ncp-key-id"
          initialOptions={{ center: { x: 126.977, y: 37.568 }, zoom: 14 }}
        >
          <DataLayer
            type="geojson"
            data="/data/sample-geojson.json"
            style={style}
            onClick={(event) => {
              const name = event.feature.getProperty("name");
              console.log("선택된 영역:", name);
            }}
          />
        </Map>
      </div>
    </div>
  );
}

export default DataLayerExample;

GPX 라이브 예제

GPX 코드

import { useState } from "react";
import { DataLayer, Map } from "@rousen/react-naver-maps";

function DataLayerGpxExample() {
  const [useAltStyle, setUseAltStyle] = useState(false);
  const style = useAltStyle
    ? {
        strokeColor: "#ef4444",
        strokeOpacity: 0.9,
        strokeWeight: 5,
      }
    : {
        strokeColor: "#22c55e",
        strokeOpacity: 0.9,
        strokeWeight: 3,
      };

  return (
    <div>
      <button type="button" onClick={() => setUseAltStyle((prev) => !prev)}>
        GPX 스타일 변경
      </button>
      <div style={{ width: "100%", height: "400px", marginTop: "10px" }}>
        <Map
          ncpKeyId="your-ncp-key-id"
          initialOptions={{ center: { x: 126.977, y: 37.568 }, zoom: 11 }}
        >
          <DataLayer type="gpx" data="/data/sample-gpx.gpx" style={style} />
        </Map>
      </div>
    </div>
  );
}

export default DataLayerGpxExample;

설명

• DataLayer는 data를 fetch해서 geojson/gpx/kml을 로딩합니다
• style로 피처의 기본 스타일을 지정할 수 있습니다
• onClick 등 이벤트 콜백을 등록할 수 있습니다