Leaflet でカスタム画像を使用する (Javascript)

JavaScript

2017.11.30

どうもfujiharaです。
いよいよ今年も残すところ１ヶ月になりましたね。毎年この時期になるともらえないお年玉に期待を寄せ始めます。

本日は地図で使用されるLeafletにカスタム画像を使用する方法をご紹介いたします。

Leaflet

Leaflet自体は地図をカスタマイズして使えるようにする、軽量でマルチブラウザ対応の優れたJSライブラリです。また、対応するプラグインも多くあり、皆さんも使ったことがあるかもしれません。特定のポイントにピンを立てたり、オブジェクトをおいたりするのに緯度経度を使用するんですが、調べているとカスタムの画像でその空間に対して各種Leafletの操作を行えるのことがわかったので今回はご紹介します。

non geographical map

サンプル

コード


//head (Leaflet の css, js の読み込み)
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin=""></script>

//body (マップを表示させる Dom)
<div id="mapId"></div>

//script
  // ターゲットを指定するときに　crs: L.CRS.Simple を指定してあげると緯度経度を使用しないレイヤーになる
  var myMap = L.map('mapId', {
    crs: L.CRS.Simple
  });
  var bounds = [[0, 0], [640, 850]]; //Leaflet の画像を配置する領域を指定
  var image = L.imageOverlay('kanagawa.png', bounds).addTo(myMap);  //imageOverlay に使用したい画像パスを記述
  myMap.fitBounds(bounds); //画像を bounds にフィットさせる
  myMap.setMaxBounds(bounds); //画像の 移動可能領域を bounds に指定