react-openlayers7

React Openlayers7

React components for Openlayers7 maps.

Documentation

• Getting Started
• Guide

Installation

npm install react-openlayers7 ol

로컬 개발을 위한 npm link 사용

로컬에서 개발 중인 react-openlayers7를 외부 프로젝트에서 사용하려면 npm link를 사용할 수 있습니다.

1단계: react-openlayers7 프로젝트에서

# 라이브러리 빌드
npm run prepare

# 전역 심볼릭 링크 생성
npm link

2단계: 외부 프로젝트에서

# react-openlayers7에 링크 생성
npm link react-openlayers7

⚠️ Peer Dependency 충돌 오류가 발생하는 경우

외부 프로젝트에서 storybook 등 다른 패키지의 peer dependency 충돌로 오류가 발생하는 경우, 다음 옵션 중 하나를 사용하세요:

# 방법 1: legacy-peer-deps 플래그 사용 (권장)
npm link react-openlayers7 --legacy-peer-deps

# 방법 2: .npmrc 파일에 설정 추가
echo "legacy-peer-deps=true" >> .npmrc
npm link react-openlayers7

3단계: 외부 프로젝트에서 사용

import { MapContainer } from "react-openlayers7";

링크 해제

외부 프로젝트에서 링크를 해제하려면:

# 방법 1: npm unlink 사용
npm unlink react-openlayers7

# 방법 2: 오류가 발생하는 경우 .npmrc 파일 설정 후 재시도
# 외부 프로젝트 루트에 .npmrc 파일 생성/수정:
# legacy-peer-deps=true

⚠️ npm unlink에서 peer dependency 오류가 발생하는 경우:

.npmrc 파일에 legacy-peer-deps=true를 설정하거나, 수동으로 심볼릭 링크를 제거할 수 있습니다:

# .npmrc 파일에 설정 추가
echo "legacy-peer-deps=true" >> .npmrc

# 그 다음 unlink 실행
npm unlink react-openlayers7

# 또는 수동으로 node_modules에서 제거
rm -rf node_modules/react-openlayers7

참고사항

• 라이브러리 코드를 변경한 후에는 npm run prepare를 다시 실행해야 합니다.
• TypeScript를 사용하는 경우, 타입 정의 파일(dist/index.d.ts)도 함께 링크됩니다.
• 외부 프로젝트의 .npmrc 파일에 legacy-peer-deps=true를 설정하면 모든 npm 명령에 적용됩니다.

Usage

CSS Import

이 라이브러리는 OpenLayers CSS를 자동으로 import합니다. 하지만 Next.js를 사용하는 경우 추가 설정이 필요할 수 있습니다.

Next.js 사용자를 위한 해결책

Next.js에서 다음과 같은 오류가 발생하는 경우:

Global CSS cannot be imported from within node_modules.

다음과 같이 해결할 수 있습니다:

방법 1: next.config.js 설정 (권장)

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ["react-openlayers7"],
  webpack: (config) => {
    config.module.rules.push({
      test: /\.css$/,
      use: ["style-loader", "css-loader"],
    });
    return config;
  },
};

module.exports = nextConfig;

방법 2: CSS를 직접 import

// _app.js 또는 layout.js에서
import "ol/ol.css";

방법 3: CSS 모듈 사용

// next.config.js에서
const nextConfig = {
  experimental: {
    esmExternals: "loose",
  },
};

Next.js 설정

Next.js를 사용하는 경우, next.config.js에서 CSS import를 허용하도록 설정할 수 있습니다:

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ["react-openlayers7"],
  webpack: (config) => {
    config.module.rules.push({
      test: /\.css$/,
      use: ["style-loader", "css-loader"],
    });
    return config;
  },
};

module.exports = nextConfig;

License

MIT