Maplat Core에서 마커의 이미지 변경(핀 단위)

Maplat Advent Calendar 8일째는 Maplat Core에서 마커의 이미지를 변경하는 방법입니다.
우선, 핀 단위로 마커 이미지를 대체하는 방법입니다.
오늘 움직이는 것은 여기에서 확인할 수 있습니다. => CodeSandBox Maplat Advent Calendar day 8

오늘의 베이스는 정적 POI 지정의 6일째 코드 를 베이스로 개조합니다만, 동적 정의에서도 같은 설정을 동적으로 추가하면 동작합니다.

먼저 대체 핀 이미지 인 parts/blue_marker.png와 parts/red_marker.png를 추가합시다.
계속해서, 오늘은 핀 단위로의 마커 지정 방법이라고 하는 것으로, 핀마다 마커가 바뀌고 있는 것을 알기 쉽게 하기 위해, POI를 하나 추가했습니다.

poi.json

{
  "main": {
    "pois": [
      {
        "id": "castle",
        "lat": 36.243881,
        "lng": 139.543517,
        "name": "館林城",
        "icon": "parts/blue_marker.png",
        "selected_icon": "parts/red_marker.png"
      },
      {
        "id": "shrine",
        "lat": 36.25163,
        "lng": 139.528562,
        "name": "愛宕神社"
      }
    ]
  }
}

보시다시피 알 수 있듯이 첫 번째 POI에 icon 속성 및 selected_icon 속성이 지정되어 있지만, 이로 인해 첫 번째 POI만 마커 이미지가 바뀝니다.



내일은 POI 레이어 전체에서 마커 이미지를 교체하는 방법을 설명합니다.