晴歩雨描

晴れた日は外に出て歩き、雨の日は部屋で絵を描く

Leaflet地図:オープン時に現在地表示。地点名、住所検索機能。サンプルソース。

地図データを扱うJavaScriptライブラリ「Leaflet」を使って、地図表示を試してきた。

今回、Leaflet地図に2つの機能を追加する方法。

【オープン時に現在地を表示をする】

≪プログラムソース≫

現在地にマーカーを表示するようにした。

<style>
.center-icon {
	width: 12px !important;
	height: 12px !important;
	border-radius: 12px;
	border: 3px solid #fdfdfd;
	box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);
	background-color: #1E90FF;
}
</style>
<script>
function onLocationFound(e) {
	var centerIcon = L.divIcon({ className: 'center-icon', iconAnchor: [8, 8] });
	L.marker(e.latlng, {icon: centerIcon}).addTo(map);
}
function onLocationError(e) {
	alert('位置情報を取得できませんでした。' + e.message);
}
map.on('locationfound', onLocationFound);
map.on('locationerror', onLocationError);
map.locate({setView: true, maxZoom: 16, timeout: 20000});
</script>

【地点名、住所検索機能】

Geocoderを使う。今回使ったのは以下。JavaScriptCSSを読み込む。

<script src="//rawgit.com/k4r573n/leaflet-control-osm-geocoder/master/Control.OSMGeocoder.js"></script>
<link rel="stylesheet" href="//rawgit.com/k4r573n/leaflet-control-osm-geocoder/master/Control.OSMGeocoder.css">

≪プログラムソース≫

検索された地点にマーカーを表示するようにした。

<style>
.found-icon {
	width: 12px !important;
	height: 12px !important;
	border-radius: 12px;
	border: 3px solid #fdfdfd;
	box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);
	background-color: #FF8C00;
}
</style>
<script>
var osmGeocoder = new L.Control.OSMGeocoder({
	collapsed: false,
	text: '検索',
	placeholder: '住所を入力してください。',
	callback: function (results) {
		var coords = L.latLng(results[0].lat,results[0].lon);
		var foundIcon = L.divIcon({ className: 'found-icon', iconAnchor: [8, 8] });
		L.marker(coords, {icon: foundIcon}).addTo(map);
		map.setView(coords,17);
	}
});
</script>

サンプル → https://ok2nd.github.io/leaflet/me.html

f:id:art2nd:20210612101002j:plain

f:id:art2nd:20210612101005j:plain