Leaflet.js , Mapbox

Leaflet Leaflet
。OpenLayers처럼 공간데이터에 접근 가능한 OpenSource Javascript library이며, Web-client GIS Engine
。Mobile 친화적 반응형 지도 기능을 제공.
▶ library의 크기가 작으므로 Desktop 뿐만 아닌, Mobile platform Browser에도 적용이 수월함.

。OpenLayers와 다르게 구성요소가 icon image와 js, css 파일등만 가지므로 파일 용량 자체가 작다.

▶ library의 크기 자체가 작으므로 기본적인 기능만 포함하며 빠르게 로딩되며 필요에 따라 다양한 플러그인으로 기능 확장이 가능.
▶ Heatmap , clustering , 다양한 공간데이터 format 등의 기능을 추가 가능.

• Leaflet 관련 플러그인 Leaflet 플러그인

• Leaflet 관련 코드

  • leaflet.map leaflet/map
    leafletJS파일명.map('HTML ElementID')
    。특정 HTML Element의 Leaflet Map 객체 생성.

    • Map 관련 Method

      • map객체.setView(center 좌표, zoom level);
        。Map 객체의 View를 설정.
        。 Leaflet은 기본적으로 EPSG:4326이므로, 위경도 기준 좌표데이터[위도,경도]를 제공해야함.
        ▶ OpenLayers의 경우 [경도,위도]
        ▶ google map의 좌표체계와 동일.
        get lat long 해당 사이트에서 특정지점의 위경도 좌표를 획득 가능.
        
        
      • map객체.getBounds()
        。map 객체의 viewport의 경계좌표를 JSON형식으로 return.
        
        
        
      • map객체.fitBounds(경계 JSON format좌표)
        。map객체.getBounds()로 획득한 객체의 경계좌표로 viewport를 Zooming하는 역할을 수행
        
        
      • map객체.getCenter()
        。현재 Map객체의 viewport의 Center 좌표정보를 return.
        
      • map객체.getZoom()
        。현재 Map객체의 viewport의 Zoom level 정보를 return.
        
        ▶ getCenter(), getZoom()의 경우 OpenLayers에서는 View 객체를 통해 획득했다면, Leaflet의 경우 Map객체를 통해 획득.

  • 
    
    
  • Layer
    。Basemap : Leaflet 코드로 추가적으로 제공하는 Custom Basemap layer
    
    Layer객체.addTo(Map객체)
    。해당 생성된 Layer 객체를 Map 객체로 추가.

    Layer 종류

    • leafletJS파일명.tileLayer('tile data url', { option }) leaflet/tilelayer
      。URL형태로 제공되는 tile layer data를 BaseMap Layer로서 사용되는 Layer 객체를 생성.
      tile data url :
      。{x}, {y}, {z}의 placeholder를 반드시 포함해야한다.
      ▶ ex : 'https://tile.openstreetmap.org/{z}/{x}/{y}.png'

      tile Layer 생성자 Option

      • minZoom :
        。조절가능한 최소 Zoom level을 설정.
        
        
      • maxZoom :
        。조절가능한 최대 Zoom level을 설정.
        
        
      • attribution :
        。우측 하단의 부연설명을 명기하는 역할 수행.
        。html tag 형식으로 표기.
        ex : attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors; Created by <a href="https://velog.io/@wjdtn747/posts">Wjdtn의 Velog</a>'
        

    • 
      
      
    • leafletJS파일명.geoJSON(geojson데이터, { option }) leaflet/geoJSON
      。GeoJSON 객체 또는 GeoJSON 객체 배열을 Layer로서 표현하여 Map상에 표현하는 역할을 수행.

      geoJSON Layer 생성자 Option

      • style :
        。GeoJSON 데이터 추가 시 GeoJSON format의 line, Polygon 객체를 styling하는 목적으로 callback 함수가 사용됨.
        ex :

      style: function (feature) {
              return {color: feature.properties.color};
          }

      。GeoJSON data의 Feature이 callback 함수의 매개변수로 input되고 해당 feature의 style로 map상에서 정의됨.
      
      

  • 
    
    
  • Vector
    。 VectorData객체.addTo(Map객체) : 해당 생성된 Geom 객체를 Map 객체로 추가.
    
    。좌표배열 예시 : var latlngs = [[37, -109.05],[41, -109.03],[41, -102.05],[37, -102.04]]

    Vector data 객체 종류

    • leaflet파일명.polyline(위경도좌표배열, {option}) leaflet/polyline
      。polyline 객체 생성.
      
      
    • leaflet파일명.polygon(위경도좌표배열, {option} ) leaflet/polygon
      。polygon 객체 생성.

      • Polygon 관련 생성자 Option

        • color : default : '#3388ff'
          。색상 설정.
          
          
        • fillColor : default : '#3388ff'
          。polygon의 내부 색상 설정.
          
          
        • smoothFactor : default : 1.0
          。각각의 zoom level에서 polyline을 단순화하는 역할을 수행.
          。값이 클수록 높은 performance로 단순하게 표현, 값이 작을수록 낮은 performance로 정확하게 표현.
          
          
        • noClip : default : false
          。polyline의 clipping이 Disable됨.

      • 
        
        
      • Polygon 관련 Method

        • Polygon객체.getBounds() :
          。해당 Polygon 객체의 위도, 경도 기준 경계를 JSON format 객체로 return.
          
          활용례 : map객체.fitBounds(polygon객체.getBounds())

  • 
    
    
  • leaflet.marker leaflet/marker
    leaflet.marker(위경도 좌표, {option})
    。Layer를 상속하여 Map상의 click 또는 drag가 가능한 icon을 표현 가능.
    
    Marker객체.addTo(map객체) :
    。Map객체에 해당 marker 객체를 추가.

    • Marker 관련 생성자 Option

      • title :
        。Map 상의 marker 위로 마우스를 hover 시 tooltip으로서 지시되는 문자열.
        
        
        
      • draggable : default : false
        。marker를 마우스 또는 터치식으로 drag 가능여부를 설정.
        
        
      • icon :
        。marker를 map상에 rendering시 사용하는 icon을 정의.
        ▶ leaflet.icon을 통해 생성가능.
        。marker의 default icon은 leaflet.css에서 설정됨.
        

    • 
      
      
    • Marker 관련 Method

      • Marker객체.getLatLng()
        。Marker의 현재 위치를 반환.
        ▶ Marker객체가 drag를 통해 이동 시 이동한 위치를 반환.
        
        
        
      • Marker객체.getIcon()
        。현재 marker 객체에 이용중인 icon 객체를 반환.
        
        
      • Marker객체.setIcon(Icon객체)
        。현재 Marker 객체에 이용중인 icon 객체를 교체.
        
        
      • Marker객체.toGeoJSON()
        。Marker 객체를 GeoJSON Format으로 변환
        
        
        

    • 
      
      
    • Marker 관련 Event
      。Marker객체.on('fire',callback함수) 를 통해 Openlayers의 Fire 처럼 설정.
      ▶ Marker 생성자의 option에서 draggable:true가 설정되어야한다.

          Marker객체.on('dragstart',function(evt){
          	console.log(evt)
          })

    fire

    • dragstart :
      。marker의 dragging을 시작할 경우 이벤트 발생
      
      
    • movestart
      。marker를 dragging 하는동안 움직임을 시작할 경우 이벤트 발생
      
      
    • drag
      。marker를 dragging하는동안 연속적으로 이벤트 발생
      
      
    • dragend
      。marker의 dragging이 멈출 경우 이벤트 발생
      。이벤트에서는 시작지점으로부터의 거리 정보를 포함.
      
      
      
    • moveend
      。marker를 dragging 하는 동안 움직임이 멈출때 이벤트 발생

  • 
    
    
  • leaflet.icon leaflet/Icon
    leaflet.icon({option})
    。marker 객체 생성시 사용되는 Icon 객체

    icon 생성자 Option

    • iconUrl (required)
      。icon Image의 절대경로 OR 상대경로의 URL을 적용.
      
      
    • iconSize
      。pixel 단위 기준 icon image의 size를 설정
      
      
    • iconAnchor
      。icon의 tip의 좌표를 지정.
      ▶ map상에 표현할 icon의 위치를 설정.
      ▶ 보통 icon image의 상단 좌측 모퉁이로 tip이 설정됨.
      
      
      
    • popupAnchor
      。Icon 위치를 기준으로 pop-up이 표현될 point 좌표를 정의.
      
      
    • tooltipAnchor
      。Icon 위치를 기준으로 tooltip이 표현될 point 좌표를 정의.
      
      
    • shadowUrl
      。icon Shadow Image의 절대경로 OR 상대경로의 URL을 적용.
      ▶ 정의가 안된경우, 그냥 icon image만 표현.
      
      
    • shadowSize
      。pixel 단위 기준 shadow image의 size를 설정
      
      
    • shadowAnchor
      。shadow의 tip의 좌표를 지정.

  • 
    
    
  • leaflet.popup leaflet/popup
    。Map에서 특정 위치에 pop-up을 open하는 역할을 수행.
    。pop-up에서 정의되는 content는 html 코드가 적용 가능.
    
    ex : dragMarker.addTo(map).bindPopup('<h1>title</h1><br><p>content</p>').openPopup()


popup객체.openOn(map객체)
    。map상에 해당 pop-up객체를 표현.

    • map 상에 pop up 표현법
      Marker객체.addTo(map).bindPopup('content').openPopup() :
      。Map상에 표현되는 Marker에 pop-up으로 content를 지시.
      ▶ Marker의 Icon을 클릭하여 open.
      
      
      leaflet.popup(위경도좌표, {content : 'content'}).openOn(map객체)
      。초기값으로 생성자를 설정하여 pop-up 객체 정의
      
      leaflet.popup().setLatLng(위경도좌표).setContent('content').openOn(map)
      。빈 pop-up 객체 생성 후 정보를 추가하여 객체를 정의.
      
      
      
      
    • popup 디자인 수정하기
      。 pop-up 디자인을 수정해야하는 경우, leaflet.css에서 .leaflet-popup-content-wrapper{} class의 내용을 수정해야한다.
      
      ▶ 원본(leaflet.css)의 .leaflet-popup-content-wrapper css 코드
      
      。추가적으로 다음 css코드를 추가하여 기존의 leaflet.css에서 정의된 코드를 수정.

    .leaflet-popup-content-wrapper{
          color:blue;
          background-color : coral;
        }

    
    。다음처럼 디자인이 수정됨.
    
    

    • popup 내용에 image 표현하기
      。content에 <img>태그를 정의하여 표현.
      dragMarker.addTo(map).bindPopup('<img src="./kuh.png" width=200/>').openPopup()
      

  • 
    
    
  • leaflet.tooltip leaflet/tooltip
    。Map에서 text를 표현하는 기능을 수행.

    • map 상에 pop up 표현법
      marker객체.addTo(map객체).bindTooltip("content").openTooltip()
      。Map상에 표현되는 Marker에 tooltip으로 content를 지시.
      ▶ Marker의 Icon에 마우스를 hover시 open.
      

Leaflet js 실습

• 기본 기능 실습

  • 파일 다운로드
    다운로드
    。다운로드 후 html 파일에 import.
    
    
  • html 설정

  <!DOCTYPE html>
  <html lang="ko">
  <head>
    <link rel="stylesheet" href="./leaflet/leaflet.css">
    <script src="./leaflet/leaflet.js"></script>
    <style>
      #map{
        width : 100%;
        height : 90vh;
      }
    </style>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Leaflet</title>
  </head>
  <body>
    <div id="map"></div>
    <script src="index.js"></script>
  </body>
  </html>

  。leaflet의 js , css 파일을 HTML의 header로 포함.
  
  

  • JS 설정

  var map = leaflet.map('map').setView([37, 127], 10);
  leaflet.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
  }).addTo(map);
  var dragMarker = leaflet.marker([37, 127],{
    title:"this is marker",
    draggable : true,
  })
  dragMarker.addTo(map).bindPopup('A pretty CSS popup.<br> Easily customizable.').openPopup()

  
  ▶ js의 간단한 코드로도 다음처럼 Map과 Pop up marker를 불러올 수 있다.

• 
  
  
• Geometry 추가하기
  。leaflet의 Map상에 polygon을 overlay하는 역할을 수행

  • Polygon 추가 : Polygon

  var latlngs = [[37, -109.05],[41, -109.03],[41, -102.05],[37, -102.04]];
  var polygon = leaflet.polygon(latlngs, {color: 'red',fillColor:'yellow'}).addTo(map);
  map.fitBounds(polygon.getBounds());

  

• 
  
  
• Marker 추가하기

  • Custom Icon 객체 정의

  var custIcon = leaflet.icon({
    iconUrl: './kuh.png',
    iconSize: [38, 95],
    iconAnchor: [22, 94],
    popupAnchor: [-3, -76]
  });

  ▶ 해당 Icon 객체는 Marker객체의 생성자옵션 icon에 설정.
  
  

  • Marker 객체 생성 및 Map에 추가

  var dragMarker = leaflet.marker([37, 127],{
    title:"this is marker",
    draggable : true,
    icon : custIcon,
  })
  dragMarker.addTo(map).bindPopup('텍스트').openPopup()

  。dragging이 되는 marker 객체를 생성 및 pop up 표시가 가능
  
  
  

  • Marker event 추가

  dragMarker.on('dragstart',function(evt){
    console.log('drag start')
    console.log(evt)
  })
  dragMarker.on('dragend',function(evt){
    console.log('drag end')
    console.log(evt)
  })

  。사전에 Marker의 생성자 option에서 draggable:true가 설정되어야한다.
  
  ▶ dragend fire의 event에서는 시작지점으로부터의 거리 정보를 포함.
  
  。Marker객체.getLatLng()를 통해 현재 Marker의 위치를 알 수 있음.

• 
  
  
• GeoJSON Format 데이터를 이용해 Vector data 추가

  • 예제데이터 생성
    geojson.io
    。해당 사이트에서 예제데이터 생성
    
    。 다음처럼 GeoJSON 객체 내 properties에 다음 property를 정의 가능.
    ▶ name property만 가지는 3개의 GeoJSON Feature를 생성

  var geoJSONdata = {
    "type": "FeatureCollection",
    "features": [
      {
        "type": "Feature",
        "properties": {
          "name": "lee"
        },
        "geometry": {
          "coordinates": [
            127.33931133817612,
            37.2121868127352
          ],
          "type": "Point"
        },
        "id": 0
      },
      {
        "type": "Feature",
        "properties": {
          "name": "kim"
        },
        "geometry": {
          "coordinates": [
            127.40811926203054,
            37.25268902971301
          ],
          "type": "Point"
        }
      },
      {
        "type": "Feature",
        "properties": { 
          "name": "min"
        },
        "geometry": {
          "coordinates": [
            127.40632756177246,
            37.18594297613052
          ],
          "type": "Point"
        }
      }
    ]
  }

  .

  • geoJSON 데이터를 Layer로서 추가하기

  leaflet.geoJSON(geoJSONdata,{}).addTo(map)

  
  ▶ geoJson 객체를 배열로 전달해도 인식하여 layer로 생성이 가능.

Mapbox Mapbox
。3D Map Rendering 기능을 제공할 수 있는 Mapping Javascript Library이자 Web-client GIS Engine.
▶ Facebook, 포르쉐, 테슬라, CNN 등의 Web application의 지도기능을 제공.

• Mapbox Studio