본문 바로가기

전체 글138

leaflet - #10 통계지도 만들기 2편 지난 글에서는 통계용 서울시 행정경계 데이터를 로딩하는 방법을 설명했습니다. 이번에는 이 행정경계에 0에서 100사이의 무작위 값(value)을 부여하고, 값의 범위에 따라 색상을 지정하는 방법을 설명드리겠습니다. 결과는 아래와 같습니다. 주요 코드를 설명 드리면, for (var i in data.features) { var start = 0; var end = 100; var feature = data.features[i]; if (!feature.properties) continue; feature.properties.value = Math.floor((Math.random() * (end - start + 1)) + start); } geojson = L.geoJson(data, { style: .. 2022. 2. 2.
leaflet - #9 통계지도 만들기 1편 통계지도 형태 중 하나인 단계구분도(등치맵, choropleth Map)를 이번 예제에서 만들어 보겠습니다. 서울시 구별 데이터를 가지고 지도에 통계지도를 만들어 보도록 하겠습니다. 우선 통계 데이터를 표시할 지도가 필요한데, 통계청이나 공공데이터 포털에서 행정경계 자료를 다운로드 받을 수 있습니다. 이 자료를 적당히 가공(QGIS 또는 Map Shaper)하면 서울시 경계 데이터를 만들 수 있습니다. 만들기 귀찮으신 분은 아래 첨부자료를 참고해 보시기 바랍니다. 이번 글에서는 통계 데이터용 서울시 경계를 지도에 로딩하는 것까지 설명드리겠습니다. 입니다. var hanRiverPos = [37.5118, 126.9745]; var map = L.map('map').setView(hanRiverPos, 1.. 2022. 2. 1.
leaflet - #8 거리와 면적 측정하기 2편 지난 글에서 소개해 드린 거리와 면적 측정 기능에 평을 추가하는 방법을 알려드리겠습니다. 어느 때부터인가 평을 공식적으로 쓰지 못하게(?) 되어서 네이버나 카카오 맵에서 평을 확인하려면 번거로운데 여전히 평을 많이 사용하는 환경에서 굳이 기능을 숨겨야 하는지 잘 모르겠습니다. 아래처럼 옵션을 주시면 기존 제곱미터(평방미터) 옆에 평으로 환산된 면적이 표시됩니다. See the Pen leaflet tutorial #8 by yogin (@yogin) on CodePen. 주요 코드를 설명 드리면 var options = { primaryLengthUnit: 'meters', secondaryLengthUnit: 'kilometers', primaryAreaUnit: 'sqmeters', secondary.. 2022. 1. 29.
leaflet - #7 거리와 면적 측정하기 1편 지도와 약도의 가장 큰 차이점은 측정의 정확성일 것입니다. 지도는 방위와 축적이 정확한 것이고 약도는 대략적인 방위와 대략적인 크기를 표시하는 것이죠. 네이버, 카카오 지도를 보면 거리와 면적을 측정할 수 있는 도구를 제공하고 있습니다. leaflet은 거리와 면적을 측정하는 컨트롤을 기본적으로 제공하고 있지는 않습니다. 하지만 다양한 (서드 파티) 플러그인을 확인 할 수 있습니다. 그중에서 거리와 면적을 동시에 측정할 수 있는 플러그인을 이용해 예제를 만들어 보겠습니다. GitHub - ljagis/leaflet-measure: Coordinate, linear, and area measure control for Leaflet maps Coordinate, linear, and area measure.. 2022. 1. 29.
leaflet - #6 커스텀 마커 추가하기 leaflet에서 마커를 생성하면 파란색 핀모양의 마커가 지도에 표시됩니다. 이 파란색 마커도 괜찮지만 내가 원하는 이미지로 마커를 생성하고 싶으면 아래 방법으로 하시면 됩니다. 기본 파란색 마커를 자세히 보시면 파란색 핀모양의 이미지와 그림자가 함께 표시되는 것을 확인 할 수 있습니다. 물론 커스텀 이미지를 만들 때, 그림자 이미지 없이 마커 이미지만으로 만들어도 됩니다. 하지만 그림자가 없으면 입체감이 조금 떨어질 수 있습니다. 디테일을 중요시 하는 분이라면 그림자까지 만들어 주시면 됩니다. 올해가 임인년 호랑이 해를 맞이하여 예제 마커를 호랑이 아이콘으로 해보겠습니다. tiger와 tiger_shadow라는 2개의 png 파일을 만들어줬습니다. See the Pen leaflet tutorial #.. 2022. 1. 28.
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.

티스토리툴바