[React] OSM :MAP Tile Server

 

OSM : Open Street Map

https://planet.openstreetmap.org/

Planet OSM

 

 

구글 맵, 다음 지도, 네이버 맵등을 이용해서 지도 정보를 화면에 출력할 수도 있지만, OSM(Open Street Map)을 이용해보고자 합니다.

(뭔가 더 자유도가 있는 것 같음..)

 

 

OSM 은 우선 사용하는데에는 무료 입니다.

OSM는 어떻게 무료인가요?

• OpenStreetMap은 크라우드소싱으로 만들어진 오픈 데이터베이스

• ODbL(Open Database License) 하에 무료로 사용할 수 있습니다.

• 누구든지 상업/비상업 목적으로 자유롭게:

• 데이터를 보고,

• 복사하고,

• 수정하고,

• 앱/웹에서 사용할 수 있어요.

 

하지만 다음은 꼭 주의하세요

항목설명

🔌 타일 서버 (tile.openstreetmap.org)	OSM 데이터는 무료지만 기본 타일 서버는 “공공 기여 기반”이라 과도한 사용 금지
📈 상업적 서비스	웹사이트/앱에서 많은 트래픽이 예상되면 타일 서버를 직접 운영하거나 외부 제공업체(MapTiler 등)를 사용해야 함
📝 저작권 표시 필수	지도에 “© OpenStreetMap contributors” 표기 필요
💥 Rate Limit	기본 서버는 과도한 호출 시 차단당할 수 있음 (특히 앱에서 다수 사용자일 경우)

 

 

 대안 서비스 (타일 서버 대체용)

서비스설명

MapTiler	상업적 사용 OK, 다양한 스타일 제공
OpenMapTiles	자체 호스팅 가능, OSM 기반
Carto	지도 + 데이터 시각화 전문
Mapbox	고성능 상업용 지도 SDK (유료 요금제 있음)

 

 

 

 

실무 예시

• 작은 규모의 내부 대시보드나 개인 프로젝트 → tile.openstreetmap.org 사용 OK

• 상업 서비스, 앱 배포, 사용자 많은 시스템 → 별도 타일 서버나 상용 서비스 이용 권장

 

 

OSM 타일 서버 직접 구축하는 법

도구설명

TileServer GL	벡터/래스터 타일 서버, Docker로 간편 구축 가능
Tegola	Go 기반 고성능 벡터 타일 서버
openmaptiles.org	미리 생성된 벡터 타일 다운로드 or Docker 배포

 

 

타일 서버 구축

1. 프로젝트 디렉토리 구성

osm-tileserver/
├── docker-compose.yml
└── data/
    └── south-korea.mbtiles   ← 원하는 지역 타일 파일

 

2. docker-compose.yml

 

version: "3"

services:
  tileserver:
    image: klokantech/tileserver-gl
    ports:
      - "8080:80"
    volumes:
      - ./data:/data
    environment:
      - MAPBOX_STYLES=local

 

3. 실행 방법

# 프로젝트 폴더로 이동
cd osm-tileserver

# 실행
docker-compose up -d

 

 

 

4. 접속 확인

 

브라우저에서 접속: http://localhost:8080

 

제공 기능:

• 웹 기반 지도 뷰어

• 벡터 타일 (PBF)

• 래스터 PNG 타일 (/styles/basic/{z}/{x}/{y}.png)

• Leaflet/OpenLayers 연동용 URL 자동 제공

 

5. Leaflet 연동 예시

L.tileLayer('http://localhost:8080/styles/basic/{z}/{x}/{y}.png', {
  maxZoom: 18,
  attribution: '© OpenStreetMap contributors'
}).addTo(map);

 

 

.mbtiles 파일은 어디서 받나요?

• https://openmaptiles.org/downloads/

• 대한민국: south-korea.mbtiles 다운로드

• 용량 수백 MB ~ 수 GB

 

 

6. OSM file을 geojson 으로 변경하기

OSM 맵의 특정 부분을 geojson으로 변경해서 사용하고 싶을 때가 있습니다.

특정 영역의 색상을 표시한다거나 할때, 지도상에서 해당 영역을 찾아서 표시 하고 싶을 때가 있죠.

 

 

# 해피코딩 !!