Maplat Core에서 마커를 정적으로 표시

Maplat Advent Calendar 6일째는 Maplat Core에서 마커를 정적으로 표시하는 방법입니다.
오늘 움직이는 것은 여기에서 확인할 수 있습니다. => CodeSandBox Maplat Advent Calendar day 6

오늘의 구현은 특히 버튼등 필요 없기 때문에, 4일째 코드 를 베이스로 개조합시다.

먼저 POI를 정의하는 파일을 외출로 준비합시다.

pois/poi.json

{
  "main": {
    "pois": [
      {
        "id": "castle",
        "lat": 36.243881,
        "lng": 139.543517,
        "name": "館林城"
      }
    ]
  }
}

이 의미입니다만, main 라는 ID 의 레이어의 아래에 POI-ID 가 castle, 위도 경도 36.243881,139.543517 , POI 이름이 館林城 의 POI 1개가 배치되게 됩니다.
레이어 ID main는 첫 번째 POI 레이어의 기본값이며 여러 레이어를 사용하지 않는 경우 다음과 같이 생략 할 수 있습니다.

pois/poi.json(레이어 설정 생략판)

[
  {
    "id": "castle",
    "lat": 36.243881,
    "lng": 139.543517,
    "name": "館林城"
  }
]

어쨌든 위와 같이 pois/poi.json를 설치 한 후 앱 설정 파일을 다음과 같이 다시 씁니다.

apps/maplat_ac_day6.json

{
  "home_position": [139.5321, 36.249302],
  "default_zoom": 17,
  "start_from": "tatebayashi_ojozu",
  "sources": [
    {
      "mapID": "tatebayashi_ojozu",
      "setting_file": "https://s.maplat.jp/r/tatebayashimap/maps/tatebayashi_ojozu.json"
    },
    "osm"
  ],
  "pois": "pois/pois.json"
}

변경 사항은 pois 에서 외부 POI 정의 파일을 지정하고 있습니다만, 이 POI 정의, 외부 정의 파일로 하지 않아도, 앱 설정 파일안에서 직접 정의하는 것도 가능합니다.

apps/maplat_ac_day6.json (POI 설정 직접 지정 버전)

{
  "home_position": [139.5321, 36.249302],
  "default_zoom": 17,
  "start_from": "tatebayashi_ojozu",
  "sources": [
    {
      "mapID": "tatebayashi_ojozu",
      "setting_file": "https://s.maplat.jp/r/tatebayashimap/maps/tatebayashi_ojozu.json"
    },
    "osm"
  ],
  "pois": {
    "main": {
      "pois": [
        {
          "id": "castle",
          "lat": 36.243881,
          "lng": 139.543517,
          "name": "館林城"
        }
      ]
    }
  }
}

어느 쪽이든 작동하기 때문에 어느 쪽이든 상관 없습니다.

이러한 설정으로 POI 핀은 표시됩니다만, 어차피라면 POI 핀을 클릭했을 때의 이벤트 취득등도 추가해 봅시다.app.js 을 이렇게 합니다.

app.js

import "@maplat/core/dist/maplat_core.css";
import { MaplatApp } from "@maplat/core";

var option = {
  appid: "maplat_ac_day6"
};

var app = new MaplatApp(option);
app.waitReady.then(function() {
  app.addEventListener('clickMarker', function(evt) {
    app.selectMarker(evt.detail.namespace_id);
    console.log(evt.detail);
  });
  app.addEventListener('clickMap', function (evt) {
    app.unselectMarker();
    console.log(evt.detail);
  });
});

app에 clickMarker 이벤트 리스너를 추가하고 app.selectMarker를 사용하여 클릭 된 POI 핀을 선택 상태 (핀 이미지가 선택 상태 이미지가되고 핀이지도 중심으로 이동) 있습니다.
추가로 클릭된 POI 정보도 console.log에 표시됩니다.
이것만으로는 클릭된 핀은 선택 상태로부터 돌아갈 수 없기 때문에, app에 clickMap의 이벤트 청취자를 더해, POI 이외의 지도면이 클릭되었을 때에는, app.unselectMarker 를 사용해, 모든 POI 선택 상태를 지우고 있습니다.
또한 클릭 한지도의 위치 정보도 console.log에 표시됩니다.

이것을 실행해 보면, 이런 느낌이 됩니다.



내일은 POI를 동적으로 추가하는 방법을 기사에 씁니다.