OpenStreetMap Advent Calendar 2017 에 게시 기사입니다.

Leaflet.js

브라우저에서 지도를 표시하는 오픈 소스 클라이언트 라이브러리입니다.
Google Maps에 가깝지만 OSM 또는 국토 지리원의지도와 같은 사용자의 모든지도에 표시 할지도를 표시 할 수 있습니다.

이번에는이 Leaflet.js에 OSM의지도를 표시하고 옛지도 이미지를 플롯하고 싶습니다.
지도에 플롯하는 옛 지도는 국토지리원의 「 오래된 지도 컬렉션 」를 인용합니다.

인용하는 옛 지도 이미지는 정확히 무비로 유명한지 이노 타다 타카의 에치 중 노토 노토 섬의 그림으로 했습니다.

우선 지도를 작성하는 HTML과 CSS를 준비합니다.

<div id="map"></div>

html, body {
  height: 100%;
}
#map {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 100%;
  background-color: #ddd;
}

.leaflet-tile-pane > .leaflet-layer {
    opacity: 0 !important;
}

그런 다음 Leaflet.js를 사용하여 지도를 만듭니다.

var map = L.map('map', {
  attribution : '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
  center: [37.33522435930641, 136.74133300781253],
  zoom: 9
});

Leaflet.js 에서는 여기에 독자적으로 이미지를 표시해 WEB 맵과 같이 확대나 드래그 이동 등을 할 수 있도록(듯이) 할 수 있습니다만, 이번은 OSM 의 타일 서버로부터 세계 지도를 읽어들이도록 했습니다.

const layerUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png';
var tileLayer = L.tileLayer(layerUrl).addTo(map);

이미지 플롯

지도에 이미지를 플롯합니다.
플롯할 때는 좌표계에서의 수치가 됩니다.
Leaflet.js 에는 화면의 픽셀과 좌표계를 상호 변환할 수 있는 함수도 준비되어 있습니다만, 이번은 적당하게 배치

let ne = { lat: 36.5, lng: 136 };
let imageUrl = "http://kochizu.gsi.go.jp/map-thumbnails/inouzu-saisyokuzu/i084.jpg",
imageBounds = new L.LatLngBounds(
  [ne.lat, ne.lng],
  [ne.lat + 0.75, ne.lng + 1.5]
 );
L.imageOverlay(imageUrl, imageBounds).addTo(map);

결과

이렇게 지도가 고객에게 표시되었습니다.
OSM 타일 이미지가 로드되는 컨테이너를 CSS에서 opacity: 0 !important; 로 배경을 투명합니다.



OSM 좌표를 이용하여 실제 좌표에 맞추어 플롯하고 싶었는데 시간이 없어 포기했습니다. 웃음
실제로는 아래 그림과 같이 플롯됩니다.