Leaflet 기초 정리 01


앞으로 몇 번의 포스팅을 통해 Leaflet에 대한 기초 내용을 정리해두려고 합니다. 


참고)

Leaflet과 유사하고 많은 기능이 있는 Mapping Library로는 OpenLayers가 있습니다.

OpenLayers에 대한 내용도 가끔 포스팅한 적이 있구요. 


Leaflet과 OpenLayers를 비교한 슬라이드는 아래에 있습니다. 

2015 FOSS4G에서 발표된 내용이네요. 


Leaflet vs OpenLayers : http://ivansanchez.github.io/leaflet-vs-openlayers-slides/#/




1. Leaflet은 가볍습니다. OpenLayers에 비해서 말이죠. 

   저도 OpenLayers만 써왔지만 Leaflet이 여러 프로젝트나 서비스에 적용되는 것을 보면서 관심이 생겼고

   요번에 정리해보면서 조금 사용해보려고 합니다. 


2. Leaflet 홈페이지 : http://leafletjs.com/

   홈페이지에 보면 tutorial 이라고 해서 나와 있는게 있어요. 저도 이걸 따라해보는 정도로 정리할꺼고

   약간 부족한 부분이 있으면 보충해보려고 합니다 :)

   프레임워크는 장고(django)를 사용할꺼구요. 무슨 Leaflet을 사용하면서 프레임워크까지 쓰냐라고 하실 수 있는데요.

   이제 장고가 아니면 웹 개발하기가 매우 귀찮아졌어요. 그리고 Leaflet 단독으로 사용하는 서비스가 있을까요? 여러 라이브러리나

   소스가 사용되어야 하니깐 암튼 장고를 기반으로 합니다.  그래서 아래 나오는 내용은 장고를 아시면 더 쉽게 파악하실 수 있구요.

   모르셔도 파악은 가능합니다.  :)


3. django로 새로운 프로젝트 + 새로운 앱을 만들었고 http://localhost:8000/leaflet/ 로 접속하면 leaflet을 활용한 페이지가 뜨도록

   사전에 작업해뒀습니다. 


   일단 html의 head에 leaflet 라이브러리를 불러와야 합니다.

   아래 사진에 나온 핑크색 박스를 참고하세요 :)

   


  다음은 실제 map을 띄우는 과정입니다. 

  * 맵(map)을 띄울 div가 하나 있어야하고 아래 그림에서는 mapid라는 id를 가지는 div 하나를 생성했습니다. 

    그 다음 script에 있는 녀석들은 Leaflet tutorial에서 나온 내용을 그대로 가져온 것입니다.  

    실제로 map을 띄우기 위해서는 mapbox라는 서비스에 가입하고 AccessToken과 id를 가져와야 합니다. 

   


4. mapbox 홈페이지는 https://www.mapbox.com/ 이고요. 

   회원가입한 이후에 https://www.mapbox.com/studio/ 에 접속하면 아래와 같은 그림이 나옵니다. 


   오른쪽 핑크색 박스에 Access Token이 존재하고요. 이것을 위 javascript의 AccessToken에 입력하면 됩니다. 


   하나 더 복사해야 하는 것이 있는데요. id입니다. 이것은 아래 그림에 나타낸 것과 같이 Tilesets 탭을 선택하고 

   원하는 지도 오른쪽에 있는(아래 그림에서 화살표로 표시한) 버튼을 클릭하면 id가 나타납니다.


   아래 그림에 나온 것이 map의 id가 되겠습니다. :)





  정상적으로 구현되면 아래와 같은 그림을 볼 수 있습니다. :)


+ Recent posts