지도 4

광역지하철 역, 노선도 지도에 올려보기

1. 데이터 구하기한국의 지하철 역사 정보는 공공데이터 포털에서 받을 수 있다. 좌표까지 포함된 데이터를 받은 뒤 geojson형태로 직접 가공해준다. Point 형태의 geojson예시는 아래와 같다.{ "type": "Feature", "geometry": { "type": "Point", "coordinates": [126.807969, 37.319791] }, "properties": { "name": "초지", "name:ko": "초지", "name:en": "Choji", "name:ja": "チョジ", "name:zh": "草芝", "public_trans..

frontend 2025.04.20

한국 지도에 지하철 역,노선도를 추가해서 지도 UX 개선하기

위 이미지는 OSM에서 제공하는 한국 지리 정보를 기반으로 렌더시킨 지도의 수도권 이미지이다. 당장 사용하기에는 불편해보이니 이 지도 위에 철도, 지하철 노선, 역사 데이터를 추가하려고 한다.  아래 파일은 공공 데이터 혹은 서칭을 통해 직접 만든 한국 철도, 지하철 노선, 역사 데이터이다.  https://github.com/onthegomap/planetiler GitHub - onthegomap/planetiler: Flexible tool to build planet-scale vector tilesets from OpenStreetMap data fastFlexible tool to build planet-scale vector tilesets from OpenStreetMap data fast..

frontend 2025.03.29

여러개의 PMTiles 파일을 병합하여 스토리지에 올리기

준비먼저 최신 맥이라고 하더라도 노트북의 성능으로는 지도 타일을 만드는데 시간이 매우 오래 걸리기에 지도 타일을 만들기 위한 ec2인스턴스를 잠깐 빌려준다.  64vcpu, 128기가 이상의 메모리, 500기가 ssd 이상 성능을 가진 인스턴스를 빌리는게 가장 좋지만  백그라운드에서 돌아가게 할거이기에 시간이 좀 걸려도 상관 없으니 32vcpu, 128기가 메모리, 500기가 ssd정도로 타협한 m5.8xlarge 인스턴스를 사용한다 만약 이래도 메모리가 부족 문제가 발생한다면 더 높은 메모리의 인스턴스를 사용한다. 타일 다운로드이후 해당 인스턴스에 ssh를 통해 접속 후 아래 명령어를 실행하여 전세계 PMTiles 파일을 다운받아준다. wget https://build.protomaps.com/2025..

frontend 2025.03.15

지도 타일과 PMTiles

지도 타일우리가 흔히 보는 지도는, 사용자가 어떤 줌 레벨에서 지도를 보고 있느냐에 따라 표시해야 하는 정보의 양이 달라진다. 예를 들어,줌 레벨 0에서는 전 세계 지도를 단 1×1, 즉 한 개의 타일로 표현한다.줌 레벨 1에서는 2×2, 즉 4개의 타일로 표현한다.줌 레벨 15인 경우에는 2^15 × 2^15라는 방대한 수의 타일을 갖게 된다. 또한 줌 레벨에 따라 동일한 좌표의 타일이라 하더라도, 실제로 표시해야 하는 정보의 종류나 양이 달라질 수 있다. 예를 들어, 줌 레벨 5에서는 지하철 노선도를 표시하지 않다가, 줌 레벨 6부터는 해당 지하철 정보를 포함하도록 구성할 수 있다. 이는 지도 타일을 어떻게 제작하느냐에 따라 각각 달라진다. 지도 라이브러리의 동작 방식 사용자가 특정 지역을 보고 있을..

frontend 2025.03.04