[웹개발] 간단한 지도 Javascript 라이브러리 leafletjs

개백수 또르미

안녕하십니까 백수가 된 또르미입니다. 얼마전까지 그리 바쁘더니...

앞으로 뭐해먹고 살지 막막하네요... 이참에 쉬면서 해보고 싶었던 프로젝트나 해봐야겠습니다.

혼자서 프로젝트를 진행해보려니 웹 퍼블리싱, 디자인이 막막하지만...

남는게 시간이니 열심히 해서 개고수가 되어 보겠습니다. ㅎㅎ

 

오늘은 정말 간단하게 javascript 라이브러리를 이용하여 지도를 그리고, 원하는 위치에 핀을 꽂는 기능을 풀어보겠습니다

 

해당 지도 라이브러리는 leafletjs 입니다.

https://leafletjs.com/

Leaflet — an open-source JavaScript library for interactive maps

 

해당 라이브러리를 사용하기 위해 css와 js를 임폴트 해줍니다. 

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js" integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>

 

 

임포트 하였으면 이제 바로 지도를 그려보겠습니다. 

<!--지도가 그려질 DIV -->
<div id="map" style="width: 1200px; height: 600px;"></div>

<script>
	//지도 그리기, center는 초기 지도의 중앙값/zoom은 초기 확대값
	const map = L.map('map', {
		center: [35.8565, 128.565],
		zoom: 7
	});
	//tile 형태의 지도를 상단에 선언한 map에 append
	const tiles = L.tileLayer('http://mt0.google.com/vt/lyrs=m&hl=en&x={x}&y={y}&z={z}', {
		maxZoom: 19,
		attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
	}).addTo(map);
</script>

결과

 위와 같이 스크립트 몇 줄만으로 지도가 짠하고 나타 났습니다.

 

이제 위 지도에 마커를 찍어볼께요 

 

function getMarker(){
     $.ajax({
        method: 'GET',
        url: '/areaJson.json',
        dataType: 'json'
    }).done(function (data) { 

        $.each(data.datas, function (index, item) {  //each(매개변수, 함수)

            L.marker([item.lat, item.lang]).addTo(map).bindPopup(
            '<h2>'+item.title+'</h2><br>'+item.user_nick
            );
        });
    });

}
//function 실행    
getMarker();

당연히 DB에 연결하여 위도,경도 좌표를 가져와야 하나... 귀차니즘의 관계로 json파일로 대체 했습니다. 

테스트 json파일

{
  "datas": [
    {
      "key": 1,
      "title": "일본 오카야마 맛집 ㅋㅋㅋㅋㅋ",
      "lat": "34.650014",
      "lang": "133.830729",
      "user_nick": "글쓴이"
    },
    {
      "key": 2,
      "title": "일본 마끄노나르도",
      "lat": "34.674441",
      "lang": "133.970719",
      "user_nick": "글쓴이"
    },
    {
      "key": 3,
      "title": "포항 포항항항",
      "lat": "36.090517",
      "lang": "129.346419",
      "user_nick": "글쓴이"
    },
    {
      "key": 4,
      "title": "21사단의 추억",
      "lat": "38.226179",
      "lang": "127.964631",
      "user_nick": "글쓴이"
    },
    {
      "key": 5,
      "title": "구미구미 마이구미",
      "lat": "36.199955",
      "lang": "128.358769",
      "user_nick": "글쓴이"
    }
  ]
}

 

여기서 L.marker([lat, lang]) 부분을 통해 해당 지도의 marker를 위도 경도를 기준으로 생성하고, addTo(map)을 통해 직전에 그려왔던 지도에 표시를 해줍니다.

 

그리고 bindPopup을 통해 해당 html을 마커에 연결 해준다고 생각하면 됩니다.

너무...쉽죠???????

 

결과물은 다음과 같습니다.

최종 결과물