🚀
【HTML/JavaScript】Googleスプレッドシートの情報を地図に表示するアプリ「Sheet2OSM」
概要
Googleスプレッドシートから自動で情報を拾ってきてOpenStreetMapの地図上にピンを打ってくれるWebアプリ「Sheet2OSM」を作りました。
champierre様のSheet2gmapというWebアプリから一部コードを流用し、参考にしました。感謝。
コード
スプレッドシート取得用の変数(APIキーなど)と緯度、経度の名前を任意の文字列に変更することで動作します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Sheet2OSM by IamSummer</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style>
@media screen and (max-width: 499px){
#mapid {height: 100%; width: 100%;}}
@media screen and (min-width: 500px){
#mapid {height: 720px; width: 100%;}}
</style>
</head>
<body>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<script src = "https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
integrity = "sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
crossorigin = "" ></script>
<div id="mapid"></div>
<script>
// マップの宣言
var map = L.map('mapid', {
center: [35, 139],
zoom: 5,
});
// タイルレイヤーの宣言
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);
map.zoomControl.setPosition("topleft");
// リセットボタンの実装
(function() {
var control = new L.Control({position:'topleft'});
control.onAdd = function(map) {
var azoom = L.DomUtil.create('a','resetzoom');
azoom.innerHTML = "<button>リセット</button>";
L.DomEvent
.disableClickPropagation(azoom)
.addListener(azoom, 'click', function() {
map.setView(map.options.center, map.options.zoom);
},azoom);
return azoom;
};
return control;
}())
.addTo(map);
// スプレッドシート取得用の変数の宣言（それぞれ使用するデータに合わせて文字列を変更）
SheetID = 'xxx'
SheetName = 'xxx'
SheetAPI = 'xxx'
// スプレッドシート取得
fetch(`https://sheets.googleapis.com/v4/spreadsheets/${SheetID}/values/${SheetName}key=${SheetAPI}`)
.then(response => response.json())
.then(data => {
var SheetData = parseData(data);
setData(SheetData);
})
// JSONデータ変換
function parseData(data) {
var keys = data.values[0];
var markerData = [];
data.values.forEach(function(value, i) {
if (i > 0) {
var hash = {};
value.forEach(function(d, j) {
hash[keys[j]] = d;
});
markerData.push(hash);
}
});
return markerData;
}
// マーカーデータのセット
function setData(markerData) {
for (var i = 0; i < markerData.length; i++) {
addMarker(i, markerData[i]);
}
}
// addMarker用変数の宣言
var marker = [];
// マーカーの配置(緯度・経度を該当する任意の文字列に変更)
function addMarker(i,data){
var latlang = [Number(data['緯度']), Number(data['経度'])];
marker[i] = L.marker(latlang).addTo(map)
}
</script>
</body>
</html>
動作例
動機
大学の卒論で野良猫の目撃情報を投稿したり閲覧できるサイトを作ろうと思い、Googleフォームで投稿された情報をGoogleスプレッドシートに出力して、そこから情報を拾ってきて地図に表示する方法を探っていたのですが、Sheet2gmapではGoogleマップの有料APIを使用する必要があるので、OpenStreetMap版を誰かが作ってないかと探したのですが、リンク切れだったり、あまり詳細に解説されていなかったりだったので、自分で作ることにしました。
宣伝
野良猫の目撃情報を投稿したり閲覧できるサイト、「のらねこふぁいんだー」を公開しています。
皆さんの目撃情報をお待ちしています！
Discussion