728x90
1. Leaflet.js 라이브러리 호출하기
먼저 head 부분에
leaflat.js css와 js 링크를 추가해, leaflet 라이브러리 사용할 수 있도록 합니다.
<!--Leaflet-->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
2. Map 설정
1) 크기 설정
div의 크기를 설정해준다.
<style>
#map{ height: 500px;}
</style>2) map 생성하고 타일레이어에 추가하기
<body>
<!-- 전체 지도 -->
<div id='map'>
<!-- {{map}} -->
</div>
<script>
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
attribution: 'Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
maxZoom: 18,
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1,
accessToken: 'pk.eyJ1IjoibWFjOTk5IiwiYSI6ImNrNzdyOXc5cjBhdWozbG9kajlwNDk3NGwifQ.2Z3kIeNZbwtVaKVl5NldaA'
}).addTo(map);
</script>
</body>leaflet map의 타일레이어 형식은 일반적으로 URL템플릿의 세팅을 포함하고 있다.
이 URL템플릿 세팅이란 우리도 'Mapbox'에서 얻을 수 있다. 이 글에서는 예제에서 사용된 URL템플릿을 그대로 적용하기로하자. 이 URL템플릿에는 속성값이 부여된 텍스트, 최대 줌 레벨 등과 같은 옵션들이 포함되어 있다.
● 참고
d3.js 튜토리얼 티스토리 : https://visualize.tistory.com/360
Leaflet.js 공식문서 : https://leafletjs.com/examples/quick-start/
반응형
'Django > 개인 프로젝트1(안전한 보행길 지도)' 카테고리의 다른 글
| Django 지도 라이브러리 Folium Map 이용하기 (0) | 2021.08.12 |
|---|---|
| [Django] Python 지도라이브러리 Folium 과 leaflet 차이점(Folium VS Leaflet.js) (0) | 2021.08.11 |
| Django Templates 폴더 App 폴더 바깥쪽으로 빼서 한번에 관리하기 (0) | 2021.08.11 |
| 1. Django 프로젝트 생성 (0) | 2021.08.10 |
| [Django] Python hexagon grid (Map 공간 일정 간격으로 규격화 하기, hexgrid) (0) | 2021.05.14 |