Ember.js는 웹 애플리케이션 개발을 위한 프레임워크로서, 지도 표시 기능을 구현하는 데도 사용할 수 있습니다. 지도 표시를 위해 다양한 서드파티 라이브러리를 활용할 수 있으며, 이 중에 대표적인 예로는 Leaflet.js가 있습니다. 이번 예시에서는 Ember.js와 Leaflet.js를 활용하여 지도를 표시하는 방법을 다루겠습니다.

1. 프로젝트 설정

먼저 Ember.js 프로젝트를 생성하고 의존성을 설치합니다. Ember CLI를 사용하여 새로운 프로젝트를 생성합니다.

ember new map-app
cd map-app

그리고 Leaflet.js와 관련된 의존성을 설치합니다.

npm install leaflet --save

2. 앱 구성

Ember.js에서는 컴포넌트를 사용하여 UI 요소를 관리합니다. 따라서 지도를 표시하기 위한 컴포넌트를 생성합니다.

ember generate component map-container

3. 컴포넌트 구현

생성된 map-container 컴포넌트의 템플릿 파일(map-container.hbs)을 열고 다음과 같이 코드를 작성합니다.

<div id="map"></div>

4. 컴포넌트 초기화

map-container.js 파일을 열고 다음과 같이 코드를 작성합니다.

import Component from '@ember/component';
import { on } from '@ember/object/evented';

export default Component.extend({
  map: null,

  didInsertElement() {
    this._super(...arguments);
    this.initMap();
  },

  initMap: on('didInsertElement', function() {
    this.set('map', L.map('map').setView([51.505, -0.09], 13)); // 중심 좌표와 줌 레벨 설정
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(this.map); // 타일 레이어 추가
  })
});

5. 컴포넌트 사용

app/templates/application.hbs 파일을 열고 다음과 같이 코드를 작성합니다.

<MapContainer />

6. 앱 실행

이제 앱을 실행하여 지도가 표시되는지 확인해보세요.

ember serve

위와 같이 코드를 작성하면 Ember.js 앱에서 Leaflet.js를 사용하여 지도를 표시할 수 있습니다. 이를 응용하여 추가적인 기능을 구현하고 스타일링을 적용할 수 있습니다. 더 자세한 내용은 Ember.js 공식 문서를 참고하시기 바랍니다.