当サイトのりょうことつよしの食べ歩きマップというページをGoogleのMaps JavaScript APIからOpenStreetMapを利用するように作り替えてみた。

Overview  |  Maps JavaScript API  |  Google Developers

OpenStreetMap


OpenStreetMapは自由に利用でき、なおかつ編集機能のある世界地図を作る共同作業プロジェクトで、自身のサイトに出力する際に、GoogleのMaps JavaScript APIのような手続きが不要ですぐに使用できる。

オープンストリートマップ - Wikipedia


自身のサイトに出力する時は、LeafletかOpenLayersといったJavaScriptのライブラリを使用するらしく、

Leaflet - a JavaScript library for interactive maps

OpenLayers - Welcome



今回はLeafletを使用してみた。


先にOpenStreetMap + Leafletにしてみた感想を書いてみると、使い始めるまでの手続きの時間がほぼなく、Google Mapsの方と同じぐらいのコード数でマーカー付きの地図を出力できた。

今回は記事では簡単な地図の表示をしてみることにする。




最初にOpenStreetMap + Leafletの練習で、



大阪府高槻市にある摂津峡にマーカーを置いてみる。

コードを書く前に上の写真の箇所の緯度経度情報を調べておくと、写真の岩場は緯度(lat):34.877647854266584、経度(lng):135.58724326280114であった。




それでは実際のコードに移る。

Leafletのチュートリアルに記載されているコードを参考にして下記のコードを書いてみた。

詳しい説明はコード内にコメントとして入れておく。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>地図</title>
<link rel="stylesheet" href="//unpkg.com/leaflet@1.7.1/dist/leaflet.css"
  integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
  crossorigin=""/>
<script src="//unpkg.com/leaflet@1.7.1/dist/leaflet.js"
  integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
  crossorigin=""></script><link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>
#mapid {
	width: 400px;
	height: 300px;
}
</style>
</head>

<body>
<div id="mapid"></div>
</body>

<script>
//摂津峡の緯度(lat)経度(lng)
var lat = 34.877647854266584;
var lng = 135.58724326280114;

/** 地図の出力ここから **/
// bodyタグ内にある <div id="mapid"></div>の箇所に指定の緯度経度で地図を描写する
var map = L.map('mapid', {
	center: [lat,lng],
	zoom: 17,
});
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);
/** 地図の出力ここまで **/
</script>

上記のコードが記載されているファイルをブラウザ経由で出力してみたら、



意図通り、上の写真の摂津峡の岩場付近を出力した。




次に該当の箇所にマーカーを設置してみる。

先程のコードのtileLayer.addTo(map);の行の下に

L.marker([lat, lng]).addTo(map);

の一行を加え、ブラウザで表示の確認をしてみると、



上のキャプチャのようになった。



この写真からではわからにくいが、写真の手前は水たまりで、写真の奥に川が有り、川は東側に位置するので、上のキャプチャのマーカーの位置は正しい事になる。

マーカー設置までのコードの行数が少ないのが良いね。