소개

이쪽의 Google 스프레드시트를 사용하여 아마도 역사상 가장 쉽게 데이터를 업데이트할 수 있는 지도 도구 를 참고로, 오픈 스트리트 맵 에서도 같은 일을 해 보았습니다. 오픈 스트리트 맵을 표시하려면 leaflet을 사용했습니다.

leaflet

leaflet은 지도 데이터를 처리하기 위한 JavaScript 라이브러리입니다. 공식 튜토리얼이나 이 기사 를 참고로 했습니다.

작성 사이트

데모 사이트는 이쪽

코드 (원래와 다른 곳)

전체 코드는 데모 사이트에서 보실 수 있다고 생각하므로 다른 점만 소개합니다.

index.html (1)

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="crossorigin=""/>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="crossorigin=""></script>

leaflet을 사용하기 위해 leaflet CSS와 leaflet.js를 호출 할 수 있습니다. 이 순서는 바꾸어서는 안된다고 합니다.

index.html (2)

var tileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
});
tileLayer.addTo(map);

이번에는 지도로 오픈 스트리트 맵을 사용하므로 tileLayer에 오픈 스트리트 맵을 불러올 수 있습니다. leaflet에서 다른 지도를 볼 수 있습니다.

지도에 div 요소 추가

index.html (3)

/* 作成するdivのCSS */
.sidebar {
  width: 250px;
  height: 250px;
  border: 1px solid #666;
  padding: 6px;
  background-color: white;
  font-family: Meriyo UI;
  font-size: 14px;
  overflow-y: scroll;
}

index.html (4)

//右下にdivコントロールを表示
var sidebar = L.control({ position: "bottomright" });
sidebar.onAdd = function (map) {
  this.ele = L.DomUtil.create('div', "sidebar");  //divを作成
  this.ele.id = "sidebardiv";  //後で使うためにidを設定
  return this.ele;
};
sidebar.addTo(map);

var div = L.DomUtil.get('sidebardiv');
L.DomEvent.disableClickPropagation(div); //div要素上で地図のclickを制御
L.DomEvent.on(div, 'mousewheel', L.DomEvent.stopPropagation); //同じくスクロールを制御

leaflet에서는 html 요소를 그대로 지도 위에 표시하려고 하면 tileLayer 아래에 숨어 있는 모양이 되어 잘 표시할 수 없었습니다. 그래서 여기 을 참고해 지도상에 독자적인 DOM 요소를 추가했습니다. 또, 그대로는 사이드바상에서 마우스 휠을 사용해도 지도 쪽이 스크롤되어 사용하기 어려웠으므로, 여기 맨 아래 답변 를 참고로 사이드바상에서의 지도 조작을 제어했습니다.
(그 밖에도 세세한 점은 차이가 있습니다만, 생략.)

할 수 없었던 것

leaflet에는 GeoJSON 형식의 데이터를 단번에 플롯하는 방법도 있지만, 그럴 때 사이드 바의 이름을 클릭하여 하나의 팝업을 여는 방법을 모르기 때문에 이번에는 하나씩 플롯하는 방법으로 했습니다.

요약

자신은 초보자입니다만, sheet2gmap를 이용한다고 생각했던 것보다 간단하게 지도에 표시할 수 있어 감동했습니다. 거기서 상태를 타고 OSM에서도 해본 것이 이번입니다. 그 밖에도 여러가지 할 것 같기 때문에 또 해 보고 싶습니다.

덤 flyTo()

마커를 클릭하면 그 마커로 날아가서 줌하는 것은 flyTo()를 사용하고 있습니다. 사이드바의 이름을 클릭해도 날아갑니다. 움직임이 늘어져 있고 그 움직임에 빠졌기 때문에 채용해 보았습니다. (너무 하면 취할 것 같아서 주의입니다 웃음)