Mapbox사용법(5) - Mouse Event

이전 블로그에 이어서 지도에 마우스 클릭으로 해당 위치의 좌표값을 취득하는 방법에 대해 알아 보고자 합니다.

geocoding 으로 주소지 또는 POI 정보로 지도 경위도 좌표값을 얻을 수 있는데 Mapbox에서 모든 정보를 가지고 있지 않기 때문에 정확한 위치로 매칭되지 않을 수 있습니다.

2023.12.11 - [개발활용툴] - Mapbox사용법(4) - geocoding

Mapbox사용법(4) - geocoding

정확한 위치 값을 얻기 위해 검색창으로 대략적인 위치로 이동한 후 지도를 확인하고 정확한 위치를 마우스로 클릭하여 좌표값을 얻어오는 방법에 대해 아래와 같이 예시를 통해 설명하겠습니다.

 

1.  지도에 검색창 추가하기

지도에 geocoding 기능을 addControl 로 아래와 같이 추가합니다.

// Add the control to the map.
map.addControl(
new MapboxGeocoder({
accessToken: mapboxgl.accessToken,
mapboxgl: mapboxgl
})
);

 

2.  마우스 이벤트 설정하기

map.on 함수에 'click' 이벤트 발생시 지도의 속성 데이터를 가져옵니다.

// Example of a MapMouseEvent of type "click"
map.on('click', (e) => {
console.log(e);
// {
//     lngLat: {
//         lng: 40.203,
//         lat: -74.451
//     },
//     originalEvent: {...},
//     point: {
//         x: 266,
//         y: 464
//     },
//      target: {...},
//      type: "click"
// }
});

 

3.  데이터 입력창으로 좌표값 불러오기

상기 기능을 이용해서 아래와 같이 실제 예시로 GPS좌표를 html form tag의 input tag 로 데이터를 넘겨서 데이터베이스에 저장합니다.

new.ejs 파일

<div id="map" class="mb-3"></div>
<div class="mb-3">
    <label class="form-label" for="geocoord">위치(선택)</label>
    <input
      class="form-control"
      type="text"
      name="campground[geocoord]"
      id="geocoord"
      readonly
    />
</div>
        
<script>
  const mapToken = "<%- process.env.MAPBOX_TOKEN %>";
</script>
<script src="/javascripts/newPageMap.js"></script>

 

newPageMap.js 파일

mapboxgl.accessToken = mapToken;
const map = new mapboxgl.Map({
  container: "map", // container ID
  style: "mapbox://styles/mapbox/streets-v12", // style URL
  center: [126.978433, 37.56669], // starting position [lng, lat]
  zoom: 10, // starting zoom
});

// Add the control to the map.
map.addControl(
  new MapboxGeocoder({
    accessToken: mapboxgl.accessToken,
    mapboxgl: mapboxgl,
  })
);

// Add Zomm In/Out Control to the map.
map.addControl(new mapboxgl.NavigationControl()); 

map.on("click", (e) => {
  console.log("e", e);
  const coord = JSON.stringify(e.lngLat);
  const geometryData = JSON.parse(coord);
  // console.log("lng", geometryData.lng);
  console.log("coord", coord);
  new mapboxgl.Marker()
    .setLngLat([geometryData.lng, geometryData.lat])
    .addTo(map);
  document.getElementById("geocoord").value = [
    geometryData.lng,
    geometryData.lat,
  ];
});

mapboxgl.setRTLTextPlugin(
  "https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js"
);
map.addControl(
  new MapboxLanguage({
    defaultLanguage: "ko",
  })
);

 

• map.on('click'). 이벤트로 취득한 데이터 (e) 값은 다음과 같이 다양합니다.

• 이 데이터중에서 GPS 좌표에 해당되는 lngLat 값을 JSON 포맷으로 변경하고 parsing 하여 geometryData 로 저장합니다.
• 해당 좌표값을 지도에 표출하기 위해 Marker에 좌표 값을 지정합니다.

• 검색창에서 강남역 을 검색하고 여러 데이터중 첫번째 리스트를 선택합니다.

geocoding 검색창

• 검색한 데이터는 파란색 아이콘 위치로 이동합니다.  마우스로 분당선 강남역 위치를 클릭하면 그린색 아이콘이 추가되고 해당 좌표값을 가져 옵니다. 
• 좌표값은 document.getElementById("geocoord").value 를 통해 input tag의 id 가 geocoord 인 입력필드로 보냅니다.

마우스로 위치 지정

• 해당 위치값을 데이터베이스에 저장하도록 합니다.
• [참고] input tag로 입력한 좌표값은 string type이어서 number type으로 변경이 필요
  • 텍스트로 넘겨 받은 데이터를 배열로 바꾸고, 좌표 소숫점 자리를 6자리로 조정하고, 숫자 타입으로 변경

    const geoCoord = req.body.campground.geocoord
      .split(",")
      .map((i) => Number(i).toFixed(6));
    const newGeoCoord = geoCoord.map((i) => Number(i));