한국어

AngularJS 튜토리얼

AngularJS 애플리케이션

AngularJS - Leaflet 애플리케이션: 초보자 가이드

안녕하세요, 미래의 코딩 슈퍼스타 여러분! 오늘 우리는 AngularJS와 Leaflet의 세계에 흥미로운 여정을 떠납니다. 이 용어들이 지금은 낯설게 느껴질 수 있지만, 이 튜토리얼이 끝나면 당신은 곧 "웹 맵"을 능숙하게 사용할 수 있을 것입니다!

AngularJS - Leaflet Application

AngularJS와 Leaflet은 무엇인가요?

코드에 들어가기 전에, 이 기술들이 무엇인지 간단히 설명해보겠습니다:

AngularJS

AngularJS는 동적인 웹 애플리케이션을 구축하는 데 도움을 주는 강력한 JavaScript 프레임워크입니다. 이를 슈퍼스마트 어시스턴트라고 생각하면 됩니다. 코드를 정리하고 웹사이트를 상호작용적으로 만들어줍니다.

Leaflet

Leaflet은 모바일 친화적인 상호작용 맵을 위한 오픈 소스 JavaScript 라이브러리입니다. Google Maps와 비슷하지만, 당신이 맵의 모양과 기능을 정확히 결정할 수 있습니다!

이제 소개를 마치고, 우리의 맵 애플리케이션을 직접 만들어보겠습니다!

프로젝트 설정

먼저, 프로젝트를 설정해야 합니다. 걱정 마세요, IKEA 가구 조립보다 쉬워요!

단계 1: HTML 파일 생성

index.html이라는 새 파일을 만들고 다음 코드를 붙여넣으세요:

<!DOCTYPE html>
<html ng-app="leafletApp">
<head>
<title>My Awesome Map App</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<style>
#map { height: 400px; }
</style>
</head>
<body ng-controller="MapController">
<div id="map"></div>
<script src="app.js"></script>
</body>
</html>

이 HTML 파일은 우리 애플리케이션의 골격입니다. 필요한 모든 라이브러리(angularJS와 Leaflet)를 포함하고 있으며, 맵이 들어갈 div를 설정합니다.

단계 2: JavaScript 파일 생성

이제 app.js 파일을 만들어 보겠습니다. 이 파일에서 마법이 일어납니다!

var app = angular.module('leafletApp', []);

app.controller('MapController', function($scope) {
var map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);

L.marker([51.5, -0.09]).addTo(map)
.bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
.openPopup();
});

이렇게 코드를 설명해보겠습니다:

  1. Angular 모듈 'leafletApp'을 생성합니다.
  2. 'MapController'라는 컨트롤러를 정의합니다.
  3. 컨트롤러 내부에서 Leaflet 맵을 초기화하고, 런던을 중심으로 설정하고, OpenStreetMap 타일 레이어를 추가합니다.
  4. 마지막으로, 맵에 마커를 추가하고 팝업을 연결하고 열립니다.

코드 이해

이제 기본 맵이 작동하고 있으므로, 코드의 각 부분이 무엇을 하는지 더 깊이 이해해보겠습니다.

HTML 파일

<html ng-app="leafletApp">

이 줄은 AngularJS에게 이 HTML 요소가 애플리케이션의 루트 요소임을 알립니다. 이 요소 내부의 모든 것은 AngularJS에 의해 관리됩니다.

<body ng-controller="MapController">

이 줄은 'MapController'를 HTML의 body와 연결합니다. 이는 'MapController' 내부에서 정의된 모든 로직이 body 내에서 사용될 수 있음을 의미합니다.

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

이 div는 맵이 렌더링될 곳입니다. Leaflet는 이 div를 사용하여 맵을 생성합니다.

JavaScript 파일

var app = angular.module('leafletApp', []);

이 줄은 새로운 AngularJS 모듈을 생성합니다. 모듈은 애플리케이션의 다른 부분들을 담는 컨테이너라고 생각하면 됩니다.

app.controller('MapController', function($scope) {
// 컨트롤러 로직 여기에
});

이곳에서 'MapController'를 정의합니다. $scope는 컨트롤러와 뷰(HTML) 사이의 교량 역할을 합니다.

var map = L.map('map').setView([51.505, -0.09], 13);

이 줄은 Leaflet 맵을 초기화하고, 런던을 중심으로 설정하고, 13의 줌 레벨로 설정합니다.

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);

이 줄은 OpenStreetMap 타일 레이어를 맵에 추가합니다.

L.marker([51.5, -0.09]).addTo(map)
.bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
.openPopup();

이 줄은 지정된 좌표에 마커를 추가하고, 팝업을 연결하고 열립니다.

상호작용 추가

이제 기본 맵을 만들었으므로, 더 상호작용적인 기능을 추가해보겠습니다. 사용자가 맵을 클릭하여 새로운 마커를 추가할 수 있는 기능을 추가하겠습니다.

app.js 파일을 다음과 같이 업데이트하세요:

var app = angular.module('leafletApp', []);

app.controller('MapController', function($scope) {
var map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);

$scope.markers = [];

map.on('click', function(e) {
var marker = L.marker(e.latlng).addTo(map);
$scope.markers.push(marker);
$scope.$apply();
});

$scope.removeMarkers = function() {
$scope.markers.forEach(function(marker) {
map.removeLayer(marker);
});
$scope.markers = [];
};
});

이제 index.html에 마커 제거 버튼을 추가하세요:

<body ng-controller="MapController">
<div id="map"></div>
<button ng-click="removeMarkers()">모든 마커 제거</button>
<script src="app.js"></script>
</body>

이제 추가한 기능을 설명해보겠습니다:

  1. $scope.markers 배열을 생성하여 모든 마커를 추적합니다.
  2. 맵에 클릭 이벤트 리스너를 추가하여 사용자가 클릭한 곳에 새로운 마커를 추가합니다.
  3. removeMarkers 함수를 생성하여 모든 마커를 제거하고 마커 배열을 비웁니다.
  4. HTML에 버튼을 추가하여 removeMarkers 함수를 호출합니다.

결론

축하합니다! AngularJS와 Leaflet을 사용하여 첫 번째 상호작용 맵 애플리케이션을 만들었습니다. 기본 맵을 설정하고 마커를 추가하며 사용자 상호작용을 구현하는 방법을 배웠습니다.

이것이 시작에 불과합니다. 웹 맵의 세계는 방대하고 흥미롭며, 무한한 커스터마이징과 기능 추가의 가능성을 제공합니다. 계속 탐구하고, 계속 코딩하고, 가장 중요한 것은 즐겁게 만들어가세요!

이 표는 우리가 사용한 주요 메서드를 요약합니다:

메서드 설명
L.map() 지정된 HTML 요소에 맵을 생성합니다
setView() 맵의 중심과 줌 레벨을 설정합니다
L.tileLayer() 맵에 타일 레이어를 추가합니다
L.marker() 맵에 마커를 추가합니다
bindPopup() 마커에 팝업을 연결합니다
openPopup() 마커의 팝업을 엽니다
on() 맵에 이벤트 리스너를 추가합니다
addTo() 오브젝트를 맵에 추가합니다
removeLayer() 맵에서 레이어를 제거합니다

미래의 지도 제작자 여러분, 즐거운 맵 제작을 기원합니다!

Credits: Image by storyset

이전 튜토리얼:
AngularJS - 타이머 애플리케이션
다음 튜토리얼:
AngularJS - Last.fm 애플리케이션