Leafletで位置情報をオブジェクトの形式で持つように変えてみよう

更新日：2025-10-23

Leafletでピンをクリックすると任意のサイトに移動するようにしてみようまでで、地図上にピンを一つ立てる方法を見てきました。

マップアプリ等を作る場合、ピンを複数個立てる事になった場合、今までの書き方だと複数個のMarkerオブジェクトの管理が大変になりますので、配列とオブジェクトを組み合わせて位置情報を管理する必要が出てきます。

今回の内容はhttps://github.com/inunosinsi/Leaflet_OpenStreetMap_Sample/blob/main/2.htmlの内容を改修していきます。

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

の箇所を

let features = [
	{
		"type" : "Feature",
		"properties" : {
			"name" : "京都御苑",
			"url" : "https://www.openstreetmap.org/#map=17/"+lat+"/"+lng
		},
		"geometry" :  {
			"type": "Point",
			"coordinates" : [lng, lat]	//注意：緯度経度の渡し方が逆になる
		}
	}
];

L.geoJSON(features).addTo(map);

のように書き換えてみます。

featuresの変数に配列を設け、位置情報はオブジェクトの形式で整理します。

用意した配列を、L.geoJSONに渡す事で位置情報のオブジェクトを基にしてピンを立てます。

オブジェクトには場所名(name)やURLを追加していますが、現時点ではピンを立てるだけです。

このコードはhttps://github.com/inunosinsi/Leaflet_OpenStreetMap_Sample/blob/main/6.htmlにあります。

---

続いて、ピンをクリックしたら位置情報にあるURLに移動するように書き換えてみます。

L.geoJSON(features).addTo(map);

を

L.geoJSON(features, {
    onEachFeature: function(feature, layer) {
    	// 位置情報のオブジェクトにURLの値があった場合
		if (feature.properties && feature.properties.url) {
			//PCでマーカーをクリック
			layer.on('click', function(ele) {
				location.href = feature.properties.url;
			});
			//スマホでマーカーをタップ
			layer.on('tap', function(ele) {
				location.href= feature.properties.url;
			});
		}
	}
}).addTo(map);

に変更します。

これで地図上にあるピンをクリック(かタップ)した時に指定のページに移動出来るようになりました。

このコードはhttps://github.com/inunosinsi/Leaflet_OpenStreetMap_Sample/blob/main/7.htmlにあります。

Leaflet API reference#getjson

Using GeoJSON with Leaflet - Leaflet - a JavaScript library for interactive maps

---

位置情報を配列とオブジェクト形式にしたことで、地図上にピンを複数立てたい場合は、

let features = [
	{
		"type" : "Feature",
		"properties" : {
			"name" : "京都御苑",
			"url" : "https://www.openstreetmap.org/#map=17/"+lat+"/"+lng
		},
		"geometry" :  {
			"type": "Point",
			"coordinates" : [lng, lat]	//注意：緯度経度の渡し方が逆になる
		}
	},
	{
		"type" : "Feature",
		"properties" : {
			"name" : "富小路広場",
			"url" : "https://www.openstreetmap.org/#map=17/35.019229/135.765492"
		},
		"geometry" :  {
			"type": "Point",
			"coordinates" : [135.765492, 35.019229]
		}
	}
];

のようにオブジェクトを追加するだけで、

のように複数のピンが立つようになります。

このコードはhttps://github.com/inunosinsi/Leaflet_OpenStreetMap_Sample/blob/main/８.htmlにあります。

追記

inunosinsiというアカウントで、オープンストリートマップに参加しています。

https://www.openstreetmap.org/user/inunosinsi