MapLibre 기반으로 커스텀 타일을 기존 타일에 오버라이드 하기

 

개요

PMTiles 병합 과정이 워낙 오랜 시간이 걸리다보니 데이터를 수정할 때 마다 매 번 병합을 하기에는 쉽지 않다. 또한 괜찮은 데이터셋이 없다면 데이터 타입을 일일히 맞춰주는 작업도 그리 쉬운 작업은 아니다. 

 

따라서 데이터를 수정할 일이 잦으며 굳이 전역 맵 타일 데이터에 포함되지 않아도 되는 경우라면 타일 데이터를 오버라이드 하는식으로 보여주는 것도 나쁘지 않은 방안중 하나일 수 있다. 

 

이러한 방식이  정말 옳은지에 대해서는 100% 맞다라고 말할 수 없지만 적어도 내가 생각하기에는 한국의 지하철 역 데이터 정도는 오버라이드하여 보여주는것이 관리도 쉽고 개발적인 코스트도 적게 들수도 있다는 생각이 들었다.

 

 글로벌 맵 데이터에서는 한국 지하철 노선도에 대한 정보가 많이 들어있지 않다. 하지만 한국 특히 수도권에 사는 사람들은 지하철 노선도가 지도에 보이지 않으면 위치를 찾는데에 불편함을 느끼기에 지하철 역사, 선로 정보를 추가하고 싶은 경우가 있을 수 있다. 이러한 지하철 정보는 전 세계 데이터로 보았을 때 그리 크지 않으며 자주 바뀌는 데이터라고 말할 수 있다. 따라서 오버라이드 하는 방식으로 구현해보았다.

 

개발

지도는 Maplibre기반으로 구현하였다. Maplibre는 지도의 타일을 가져와 원하는 레이어를 스타일링하기 위해 하나의 json 파일을 사용한다. 

 

기존 json파일은 아래와 같다.

{
  "version": 8,
  "metadata": { "maputnik:renderer": "mlgljs" },
  "sources": {
    "protomaps": {
      "type": "vector",
      "url": "https://BBB.cloudfront.net/protomaps/v4/20250303.json"
    }}
  },
  "sprite": [
    {
      "id": "custom",
      "url": "/sprite/custom_icon"
    },
    {
      "id": "default",
      "url": "/sprite/sprite_faded_hsb"
    }
  ],
  "glyphs": "/fonts/{fontstack}/{range}.pbf",
  "layers": [...]
  }

 

위 json으로 보여지는 서울 지도는 아래와 같다.

 

서울 지도를 보는것에 익숙한 사람이 아닌이상 한 눈에 어느쪽에 무슨 지하철이 지나가는지 파악하기는 힘들다고 말할 수 있다.

 

이제 이러한 문제를 해결하기 위해 지하철 노선 정보를 추가해보겠다.

 

지하철 노선 정보는 테스트용으로 서울 공공 데이터 맵에서 다운 받아 적당히 가공하여 Geojson -> PMTiles의 형태로 변경하였다.

 

"sources": {
    "protomaps": {
      "type": "vector",
      "url": "https://BBB.cloudfront.net/protomaps/v4/20250303.json"
    },
    // 아래 코드 추가
    "korea_subway": {
      "type": "vector",
      "url": "https://AAA.cloudfront.net/protomaps/v4/korea-subway.json",
      "minzoom": 5,
      "maxzoom": 15
    }
  }

 

기존 json 파일에 korea_subway key value를 추가하였다. 이로인해 지도 로드시 지하철 타일 정보를 추가로 가져오며 줌 레벨 5~15 사이에서는 노선도가 지도에 보여지게 된다.

물론 이 작업 이전에 PMTiles를 s3에 올리고 배포하는 작업이 선행되어야 한다. 아래 링크를 따라 배포하면 된다.

 

https://docs.protomaps.com/deploy/aws

AWS Integration | Protomaps Docs

 

이후 layer에 아래와 같은 코드를 추가해준다.

{
...,
"layers":[
	...,
    {
      "id": "subway",
      "type": "line",
      "source": "korea_subway",
      "source-layer": "subway",
      "paint": {
        "line-color": [
          "match",
          ["get", "name"],
          "서울 지하철 2호선",
          "#FF0000",
          "#888888"
        ],
        "line-width": 2
      }
    }
]
}

 

이는 korea_subway의 라인 정보를 레이어에 보여주며 서울 2호선은 빨간색, 나머지는 #888888 색으로 보여주라는 스타일링 정보이다.

 

이후 지도를 확인하면 아래와 같이 지하철 노선도가 보여지는 것을 확인할 수 있다.

 

아까보다는 지도가 좀 더 눈에 띄는 것을 확인할 수 있을 것이다. 

 

이번에는 지하철 역을 추가해보자.

{
...,
"layers":[
	...,
    {
      "id": "subway",
      "type": "line",
      "source": "korea_subway",
      "source-layer": "subway",
      "paint": {
        "line-color": [
          "match",
          ["get", "name"],
          "서울 지하철 2호선",
          "#FF0000",
          "#888888"
        ],
        "line-width": 2
      },
      {
      "id": "subway-stations",
      "type": "symbol",
      "source": "korea_subway",
      "source-layer": "subway",
      "filter": ["==", ["get", "railway"], "station"],
      "minzoom": 5,
      "layout": {
        "text-field": ["get", "name"],
        "text-font": ["Open Sans Regular", "Arial Unicode MS Regular"],
        "text-size": 20,
        "text-anchor": "top",
        "icon-size": 0.8
      },
      "paint": {
        "text-color": "#000000"
      }
    }
    }
]
}

 

 

위 코드를 추가하면 이미지에서 보이는 것 처럼 역 이름 정보가 출력되는 것을 확인할 수 있다. 가독성을 높이기 위해 직접 만든 역 아이콘, 레이어를 추가한다면 더욱 이쁘게 보일것이다.

 

이걸로 이 글의 제목대로 기존 타일에 커스텀 타일 데이터를 성공적으로 오버라이딩 하는 것을 완료하였다.

 

 

결론

완성도를 높이기 위해 더 나은 데이터 셋을 구해 사용하는 방법, 누락된 데이터, 오래된 데이터, 앞으로 바뀔 데이터에 대한 업데이트 등 커스텀 데이터를 많이 수정하는 방법, 레이어 스타일을 변경하는 방법 등이 있을 것이다. 하지만 타일 정보가 업데이트 될 때마다 매 번 전체 타일에 새로운 타일을 추가하여 주며 새로운 전체 타일 파일을 만드는것은 너무 많은 리소스를 사용해야 하기에 오버라이딩 하는 방안이 더 나을 수도 있을 것 같아서 이 글을 작성하였다.

 

마지막으로 아래는 데이터를 검증, 수정하기 위해 도움이 되는 링크들이다. 

 

Geojson에 대한 수정 확인

https://geojson.io/#map=2/0/20

geojson.io | powered by Mapbox

 

 

PMTiles에 대한 수정, 확인

https://pmtiles.io/

PMTiles Viewer