勉強したことのメモ

webプログラマが勉強したことのメモ。

leaflet.jsとosmでマップ表示及びマーカー設置

      2020/07/02

GoogleMapAPIを用いたマップ及びマーカー表示にクレジットカード登録が必要になり、非常に使い勝手が悪くなったので代替案を探していた。有名どころのYahooはどうかと調べたところ2020/10/31でAPIの提供を打ち切るらしい。その他だとleaflet.jsとOpenStreetMapを使うのがよさそう。以下に方法をメモ。

 

サンプル

http://sample.taitan916.info/osm/

GoogleMapに慣れているからだとは思うが、デザイン的に微妙に感じた。何と言うか見づらい。

 

ソース

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> 
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
//マップを表示するID名を指定
var map;
map = L.map('map_canvas');

//経度緯度
var lat = '35.681236';
var lng = '139.767125';

//ズームレベル
var zoom = 15;

//マップの中心地とズームレベルを指定
map.setView([lat, lng], zoom);

//タイルレイヤの設定。今回だとOSMだが地理院やMapFanといった他のデザインに変更できる模様
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>',
	maxZoom: 19
});
tileLayer.addTo(map);


var mapData = [
	{ 'lat' : lat, 'lng' : lng, 'body' : '<b style="color:#f00;">マーカー</b>',}, 
	{ 'lat' : (parseFloat(lat) + 0.05), 'lng' : (parseFloat(lng) + 0.05), 'body' : '<b style="color:#f00;">マーカー2</b>',}, 
	{ 'lat' : (parseFloat(lat) + 0.1), 'lng' : (parseFloat(lng) + 0.1), 'body' : '<b style="color:#f00;">マーカー3</b>',}, 
];
for (var key in mapData){
	var marker_data = makeMarker(mapData[key]);
}


//マーカー作成用関数
function makeMarker( mapData ){

	var marker = [{
		"type": "Feature",
		"geometry": {
			"type": "Point",
			"coordinates": [mapData.lng, mapData.lat]
		},
		"properties": {
			"popupContent": mapData.body
		}
	}];

	L.geoJson(marker, {
		onEachFeature: function(feature, layer){
			if (feature.properties && feature.properties.popupContent) {
				layer.bindPopup(feature.properties.popupContent);
			} 
		}
	}).addTo(map);
}
</script>

外部JSの呼び出しにAPIキーはいらないっぽい。

mapDataの連想配列部分はPHPのforeachとかでループさせて表示する形で使用する想定。

 

leaflet.jsとOSM

GoogleMapAPIだとそれ単体でマップを表示できたが、今回はleaflet.jsとOSMに分かれておりそれぞれの役目がなんなのかイマイチ分からなかったので調べたところ、leaflet.jsはWeb地図の為のjavascriptライブラリとのこと。

leaflet.jsを使ってGoogleMapを表示(タイルレイヤを表示)するといったこともできる模様。

次にOpenStreetMapだがこちらは誰でも自由に利用できる地理情報データを集積したデータベースのようなものらしい。OSMのデータを使ってleaflet.jsで表示するみたいな感じか。

 

その他

以下に関しても可能かどうか検証、可能ならサンプルを作っておきたい。

 

・経度緯度⇔住所の取得・変換(作成済み)

無料でジオコーディング(住所→経度緯度)を行う

・現在地の取得(作成済み)

leaflet.jsとOSMで現在地の取得

 

・マーカーの変更(作成済み)

leaflet.jsとOSMでマーカーの画像をそれぞれ指定する

 

・クリックした位置の座標を取得

・マップを移動した際の中心座標を取得

・複数マーカーをまとめる

・複数マーカーを全て表示できるようオートズーム

 

上記が全て可能であればとりあえずはGoogleMapAPIの代替案として使っていけそう。

 - JavaScript ,

  関連記事

chardin.jsを利用して注釈を入れる

簡易マニュアルとかでむっちゃ使えそう。 ■chardin.js http://h ...

javascript:void(0)について

よく使う<a href="javascript:void(0)" oncl ...

さくらレンタルサーバでCookieが保存できない

さくらインターネットのレンタルサーバでjquery.cookie.jsを用いてC ...

setTimeoutの注意点

javascriptのsetTimeoutにて変数を用いた際に 想定外の挙動を起 ...

クロスドメイン突破をjavascriptで行う

ajaxとかでクロスドメインを突破する際は、 PHPファイルを介すかJSONPを ...

グラフ表示ライブラリのamChartsがよさそう

どこかのサイトを閲覧していた際に、恐らくはJavaScriptのライブラリで描写 ...

CKEditor(WYSIWYGエディタ)の設置方法と日本語化

今までWYSIWYGエディタを導入する際はNicEditを使用していたが、あんま ...

CSSとJavaScriptでテキストのコピー防止

あるサイトで文言の意味が分からずGoogleで検索する為にコピペしようとするも、 ...

JavaScriptでFlashのバージョンを取得

既存のソースでFlashのバージョン取得を 行っているものがあり、使いそうなので ...

JavaScriptでcookieの保存

JavaScriptでcookieを保存したかったけど 方法が分からなかったので ...