dayjournal | Leaflet #020 – 現在位置の表示2

以前に「Leaflet #009 – 現在位置の表示」でHTML5の「Geolocation API」を利用して現在位置を表示する方法を記載しました。今回はLeafletのAPIを利用して現在位置を表示する方法を記載します。


<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Leaflet Sample</title>

<script src="./Library/leaflet-0.7.3/leaflet.js"></script>
<link href="./Library/leaflet-0.7.3/leaflet.css" rel="stylesheet"/>

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;amp;region=JP"></script>
<script src="./plugin/leaflet-plugins-master/layer/tile/Google.js"></script>

<link href="./css/stylesheet.css" rel="stylesheet"/>

</head>
<body>

<div id="map"></div>

<script src="./js/script.js"></script>

</body>
</html>


html, body {
height: 100%;
padding: 0;
margin: 0;
}

#map {
z-index: 0;
height: 100%;
}


var t_std = new L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
attribution: "<a href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>"
});

var t_pale = new L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', {
attribution: "<a href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>"
});

var t_ort = new L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg', {
attribution: "<a href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>"
});

var o_std = new L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&amp;copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
});

var g_roadmap = new L.Google('ROADMAP');

var g_satellite = new L.Google('SATELLITE');

var g_hybrid = new L.Google('HYBRID');

var map = L.map('map', {
zoomControl: false,
layers: [t_pale]
});

var mapMarker;
var comment;

map.locate({setView: true, maxZoom: 14});

function onLocationFound(e) {
'use strict';
mapMarker = L.marker(e.latlng).addTo(map);
comment = 'いまここ!!';
mapMarker.bindPopup(comment).openPopup();
}

function onLocationError(e) {
'use strict';
window.alert('位置情報取得に失敗しました。');
}

map.on('locationfound', onLocationFound);
map.on('locationerror', onLocationError);

var Map_BaseLayer = {
"地理院地図 標準": t_std,
"地理院地図 淡色": t_pale,
"地理院地図 オルソ": t_ort,
"OpenStreetMap 標準": o_std,
"GoogleMap 標準": g_roadmap,
"GoogleMap オルソ": g_satellite,
"GoogleMap ハイブリッド": g_hybrid
};

L.control.scale({ imperial: false, maxWidth: 300 }).addTo(map);

L.control.layers(Map_BaseLayer, null, { collapsed: false }).addTo(map);

index.htmlを実行すると下記のようにブラウザで表示されます。 ※「この地図は、国土地理院長の承認を得て、同院発行の電子地形図(タイル)を複製したものである。（承認番号　平27情複、第224号）」

現在位置のAPIを設定：


map.locate({setView: true, maxZoom: 14})

現在位置の取得可能の場合： function onLocationFound(e)～の後に処理を記述します。

現在位置にマーカーとポップアップを表示します。「e.latlng」で現在の緯度経度を取得します。


mapMarker = L.marker(e.latlng).addTo(map);
comment = 'いまここ!!';
mapMarker.bindPopup(comment).openPopup()

現在位置の取得不可能の場合： function onLocationError(e)～の後に処理を記述します。

アラートを表示させます。


window.alert('位置情報取得に失敗しました。')

参考文献
Leaflet

dayjournal memo

Leaflet #020 – 現在位置の表示2

Yasunori Kirimoto 2015/7/15