본문 바로가기

코딩 강좌35

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.. 2022. 1. 28.
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에서 응답으로 보내주는 텍스트 파일에는 요청한 지도 위치에 있는 객체의 기하(.. 2022. 1. 28.
leaflet - #3 WMS 레이어 추가하기 이번 글에서는 WMS 레이어를 지도에 추가해 보겠습니다. WMS는 Web Map Service의 약자로 웹에서 지도를 표시하는 표준 서비스 스펙입니다. OGC(개방형 공간정보 컨소시엄) 라는 기구에서 만든 기준입니다. WMS와 비슷한 서비스 표준으로는 WFS, WCS, WPS, WMTS 등이 있습니다. 이런 서비스들을 OWS(OGC Web Services)라고 부릅니다. 이런 표준이 있으면 좋은 점은 특정 제품이나 회사에 지도 프로그램을 쓰다가 다른 프로그램으로 교체가 가능하다는 것이겠죠. 물론 표준이란 것이 필수적인 항목에 대해서만 통일되서 구현되어 있고 벤더마다 특별한 기능들이 추가로 구현되어 있어, 1:1로 교체가 되지는 않습니다. 그래도 없는것보다 낫다는 것이겠죠. 이번에도 서두가 길었는데, 아래.. 2022. 1. 27.
leaflet - #2 레이어 컨트롤 추가하기 지난 글에서 처음으로 leaflet을 이용한 지도를 만들어봤습니다. 이번에는 지난 번에 만들었던 지도에 여러 개의 레이어를 추가하고, 레이어를 보이거나 감추는 컨트롤을 추가해 보겠습니다. Leaflet은 맵에 추가된 레이어의 목록을 확인하고 on/off 할 수있는 컨트롤을 제공합니다. 아래 실행화면 오른편에 보이는 아이콘이 바로 레이어 컨트롤입니다. See the Pen leaflet tutorial #2 by yogin (@yogin) on CodePen. 자바스크립트 코드 부분을 설명 드리면 var hanRiverPos = [37.5118, 126.9745]; var map = L.map('map').setView(hanRiverPos, 12); var osmLayer = L.tileLayer('ht.. 2022. 1. 24.
leaflet - #1 가벼운 웹 지도 만들기 leaflet은 오픈소스 지도 라이브러리 중에 모바일 친화적이고, openlayers와 더불어 오래된 Javascript 라이브러리입니다. 홈페이지에는 이렇게 소개 되어 있습니다. 그리고, 위키백과에는 이렇게 소개되어 있습니다. 리플릿(Leaflet)은 웹 매핑 애플리케이션을 빌드하기 위해 사용되는 오픈 소스 자바스크립트 라이브러리이다. 2011년 처음 출시되었으며,[2] HTML5와 CSS3를 지원하고 대부분의 모바일 및 데스크톱 플랫폼을 지원한다. 사용 고객으로는 포스퀘어, 핀터레스트, 플리커가 있다. Lealfet이 지원하는 데스크톱, 모바일 웹 브라우저는 아래와 같습니다. Desktop: Chrome, Firefox, Safari 5+, Opera 12+, IE 7–11, Edge 등 Mobile.. 2022. 1. 22.

티스토리툴바