Written by django-style
on 2021-08-11

Django Leaflet.js 지도 라이브러리 불러오기

1. Leaflet.js 라이브러리 호출하기

먼저 head 부분에

leaflat.js css와 js 링크를 추가해, leaflet 라이브러리 사용할 수 있도록 합니다.

2. Map 설정

1) 크기 설정

div의 크기를 설정해준다.

#map{ height: 500px;}

2) map 생성하고 타일레이어에 추가하기

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 © OpenStreetMap contributors, Imagery © Mapbox', maxZoom: 18, id: 'mapbox/streets-v11', tileSize: 512, zoomOffset: -1, accessToken: 'pk.eyJ1IjoibWFjOTk5IiwiYSI6ImNrNzdyOXc5cjBhdWozbG9kajlwNDk3NGwifQ.2Z3kIeNZbwtVaKVl5NldaA' }).addTo(map);

leaflet map의 타일레이어 형식은 일반적으로 URL템플릿의 세팅을 포함하고 있다.

이 URL템플릿 세팅이란 우리도 'Mapbox'에서 얻을 수 있다. 이 글에서는 예제에서 사용된 URL템플릿을 그대로 적용하기로하자. 이 URL템플릿에는 속성값이 부여된 텍스트, 최대 줌 레벨 등과 같은 옵션들이 포함되어 있다.

결과

● 참고

d3.js 튜토리얼 티스토리 : https://visualize.tistory.com/360

Leaflet.js 공식문서 : https://leafletjs.com/examples/quick-start/

728x90

반응형

LIST

from http://thalals.tistory.com/103 by ccl(A) rewrite - 2021-08-11 17:26:33

Top