본문 바로가기

Leaflet6

[Leaflet] 플러그인 heatmap.js 사용하기 [Leaflet] 플러그인 heatmap.js 사용하기 heatmap.js를 사용하여 heatmap을 표현해 보겠습니다. https://www.patrick-wied.at/static/heatmapjs/example-heatmap-leaflet.html 에서 예제를 확인할 수 있습니다. Leaflet CSS, JS 추가 leaflet 사용을 위해서 css, js를 포함하는 기본 코드를 작성합니다. leaflet-heatmap.html(또는 원하는 파일명)로 파일을 저장합니다.leaflet에서 heatmap.js를 사용하여 표현하기 위해서는 heatmap.js 와 leaflet-heatmap.js를 추가합니다. 지도 영역 추가 지도 생성 스크립트 오픈스트리트맵('http://tile.openstreetma.. 2018. 1. 15.
[Leaflet] 플러그인 PolylineDecorator 사용하기 [Leaflet] 플러그인 PolylineDecorator 사용하기 Leaflet 플러그인 중에서, Markers & renders에 있는 Leaflet.PolylineDecorator를 사용하여 폴리라인을 꾸며보겠습니다.https://github.com/bbecquet/Leaflet.PolylineDecorator 깃헙 페이지에서 사용법을 확인할 수 있습니다. 간단하게 사용하기 위해 CDN(https://cdnjs.com/libraries/leaflet-polylinedecorator)에 있는 leaflet-polylinedecorator.js를 사용하겠습니다. Leaflet CSS, JS 추가 leaflet 사용을 위해서 css, js를 포함하는 기본 코드를 작성합니다. leaflet-polyline.. 2018. 1. 14.
[Leaflet] 시작하기 Quick Start Guide [Leaflet] 시작하기 Quick Start Guide http://leafletjs.com/examples/quick-start/ 에 있는 가이드 문서를 보면서 실습을 진행하겠습니다. Leaflet CSS, JS 추가 leaflet 사용을 위해서 css, js를 포함하는 기본 코드를 작성합니다. leaflet.html(또는 원하는 파일명)로 파일을 저장합니다. 지도 영역 추가 body 태그안에 맵을 표출할 영역을 div 태그로 생성합니다. 브라우저 전체에 표출되도록 높이를 100%로 하는 스타일을 추가하였습니다. 지도 생성 스크립트 vworld 에서 제공하는 타일맵 서비스를 이용합니다. (http://xdworld.vworld.kr:8080/2d/Base/201710/{z}/{x}/{y}.png)지.. 2018. 1. 13.
[leaflet] divIcon 마커 찍기 [leaflet] divIcon 마커 찍기 데이터 구조 items = [ { buld_nm : 'A 아파트', st_x : '126.123', st_y : '37.123' }, { buld_nm : 'B 백화점', st_x : '123.123', st_y : '34.123' } ] 함수 호출 // 마커 찍기 mymap.addSearchMarker(this.items); 마커 레이어 추가 var cities = new L.LayerGroup(); L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.').addTo(cities), L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.').addTo(cit.. 2017. 4. 22.
[javascript] Leaflet.PolylineDecorator [javascript] Leaflet.PolylineDecorator Github : https://github.com/bbecquet/Leaflet.PolylineDecorator leaflet 위에서 선을 꾸밀 수 있는 라이브러리 입니다. 사용법 L.polylineDecorator(latlngs, options).addTo(map); latlngs에는 L.Polyline, L.Polygon, L.LatLng 배열이 들어갈 수 있음. options에는 패턴(patterns)에 대한 정의가 들어감 Pattern 정의 offset : 패턴의 처음 심볼을 얼마나 떨어뜨려서 표현할지 정의 (기본값: 0) endOffset : 마지막 심볼을 얼마나 떨어뜨려서 표현할지 정의 (기본값: 0) repeat : 어느정.. 2017. 3. 9.
Leaflet 전체 영역에 지도가 표시되지 않을 때 Leaflet 전체 영역에 지도가 표시되지 않을 때 이와 같이 Leaflet 전체 영역에 지도가 표시되지 않을 때는 mymap.invalidateSize(); invalidateSize() 를 호출한다. 2016. 7. 14.

티스토리툴바