2022/01/28 3

leaflet - #6 커스텀 마커 추가하기

leaflet에서 마커를 생성하면 파란색 핀모양의 마커가 지도에 표시됩니다. 이 파란색 마커도 괜찮지만 내가 원하는 이미지로 마커를 생성하고 싶으면 아래 방법으로 하시면 됩니다. 기본 파란색 마커를 자세히 보시면 파란색 핀모양의 이미지와 그림자가 함께 표시되는 것을 확인 할 수 있습니다. 물론 커스텀 이미지를 만들 때, 그림자 이미지 없이 마커 이미지만으로 만들어도 됩니다. 하지만 그림자가 없으면 입체감이 조금 떨어질 수 있습니다. 디테일을 중요시 하는 분이라면 그림자까지 만들어 주시면 됩니다. 올해가 임인년 호랑이 해를 맞이하여 예제 마커를 호랑이 아이콘으로 해보겠습니다. tiger와 tiger_shadow라는 2개의 png 파일을 만들어줬습니다. See the Pen leaflet tutorial #..

leaflet - #5 내 위치 찾기

이번 글에서는 지도에서 내 위치를 표시하는 기능을 만들어 보겠습니다. leaflet은 모바일 친화적인 지도 라이브러리라고 소개되어 있는데, 정말 손쉽게 내 위치를 확인하고 지도에 표시할 수 있게 만들어 놨습니다. 물론 PC에서도 내 위치 표시는 됩니다. 웹 표준이 계속해서 발전하면서 Location에 대한 표준도 정리되었습니다. leaflet은 이러한 웹표준 API를 몰라도 손쉽게 지도상에 위치를 표시할 수 있습니다. See the Pen leaflet tutorial #5 by yogin (@yogin) on CodePen. 이 코드를 실행하면 아래와 같이 표시됩니다. 자바스크립트 코드는 아래와 같습니다. var hanRiverPos = [37.5118, 126.9745]; var map = L.map..

leaflet - #4 WFS 활용하기

이번 글에서는 WFS를 활용하는 방법에 대해서 설명드리겠습니다. WFS는 Web Feature Service의 약자로 웹에서 지도에 표현하는 객체의 정보를 서비스하는 표준 스펙입니다. 역시 OGC(개방형 공간정보 컨소시엄)에서 만든 것이고, WMS(Web Map Service)와 함께 ArcGIS Server, Geoserver, Mapserver 등 대부분의 웹 서버 엔진에 구현되어있습니다. WMS 서비스와 WFS 서비스의 가장 큰 차이점은 응답 형태에 있습니다. WMS는 웹 요청에 대한 응답으로 이미지(png, jpeg 등)를 제공하고, WFS는 응답으로 텍스트 파일(gml, kml, geojson 등)을 제공합니다. WFS에서 응답으로 보내주는 텍스트 파일에는 요청한 지도 위치에 있는 객체의 기하(..