オープンストリートマップとGoogleスプレッドシートを利用した、簡単にデータを更新できるマップ

8998 ワード
JavaScript leaflet OpenStreetMap GoogleSpreadSheet JavaScript テキストリンク

はじめに

　こちらの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()を使っています。サイドバーの名前をクリックしても飛んでいきます。動きがヌルヌルしててその動きにハマったので採用してみました。(やりすぎると酔いそうになるので注意です笑)