マップアプリが簡単につくれるジオロケーションAPI【leafletjs】の使い方
マップアプリが簡単につくれるジオロケーションAPIの使い方を紹介します。
今回はleafletというJavaScriptの外部ライブラリです。
オープンソースの無料で使うことができます。
https://leafletjs.com/index.html
ジオロケーションAPI【leafletjs】の使い方
leaflet マップのオープンソース外部ライブラリとして有名です。
今回は一番簡単なCDNで利用する方法です。
まずは、ダウンロードページへアクセスして、CDNのコードをコピーして、htmlに貼り付けます。
headタグの中にいれるので、ソースコードにdeferを追加するといいでしょう。
必ず、自分のscriptタグより上に入れます。
自分のジオロケーションを取得する
まずは、自分のジオロケーションを取得しましょう。
if (navigator.geolocation)
navigator.geolocation.getCurrentPosition(
function (position) {
// console.log(position.coords.latitude);
//分割代入で得られる。position.coords.latitudeと同じ値を下の一文で得られる
const { latitude } = position.coords;
const { longitude } = position.coords;
// console.log(latitude, longitude);
//Googleで地図を開くと次の形で表示されている// https://www.google.co.jp/maps/@ここに緯度,ここに軽度,14z?hl=ja
//なので、下のように現在地の緯度と経度を置き換える
console.log(
`https://www.google.co.jp/maps/@${latitude},${longitude}z?hl=ja`
);
function () {
alert('現在地が得られませんでした。');
}
);
自分の現在地はとても簡単に入手することができます。
navigator.geolocation.getCurrentPosition()だけで入手できます。
getCurrentPosition()は2つ引数をとります。第一引数は成功した場合、第二引数は失敗した場合です。
positionを受け取ってコンソールでチェックするとgetCurrentPositionがあります。それで中身を確認すると、緯度と経度を入手できます。
ジオロケーション取得に成功した場合、positionという引数で受け取るとすると、position.coords.latitudeで緯度が入手できます。
上のように、logitude(経度)も分割代入で値を格納し、googleマップなら上のようにすることで表示できます。
leafletからコードをコピーする
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
L.marker([51.5, -0.09]).addTo(map)
.bindPopup('A pretty CSS3 popup.
Easily customizable.')
.openPopup();
上のコードは、leafletに参考に書かれているコードです。
このコードをジオロケーションの入手に成功した場合のfunctionにいれます。
これを編集することで、簡単に自分だけのマップをつくることができます。
まずは、緯度と経度を置き換えできるように定数に格納しておきます。
//座標の配列をつくる
const coords = [latitude, longitude];
そして、このcoordsという定数を、leafletの配列部分に置き換えます。
const map = L.map('map').setView(coords, 13);
L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
attribution:
'© OpenStreetMap contributors',
}).addTo(map);
L.marker(coords)
.addTo(map)
.bindPopup('A pretty CSS3 popup.
Easily customizable.')
.openPopup();
},
そして、varという古い書き方になっているので、constに書き換えます。
const map = L.map('map').setView(coords, 13);
map('map’)の’map’はHTMLのid="map"とひも付きます。なのでmapというidをつくるか、マップをあらわすidを作って、’map’の部分をそれに変更します。
このLがleafletの名前空間です。
13という数字を大きくすると(sx.17)ズームアップされ、小さくすると広域のマップが表示されます。
// L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
openstreetmapはオープンソースのマップでleafletのデフォルトで選択されているけど自由に変更できます。
ここまで編集すれば、自分のジオロケーションは入手できます。
マップにピンを立てる
詳しいところは、leafletのDOCSを読むようにするといいです。
ここでは一例を紹介します。
//mapにピンをつける
map.on('click', function(mapEvent) {
console.log(mapEvent);
const {lat, lng} = mapEvent.latlng;
L.marker([lat, lng]) //マーカーをたてる場所を決まる
.addTo(map) //マーカーをどこにいれるかを決める
// .bindPopup('ピンを立てました') //マーカーを立てたときのメッセージ
.bindPopup(L.popup({ //ポップアップをカスタマイズ
maxWidth: 500,
minWidth: 200,
autoClose: false,
closeOnClick: false,
className: 'running-popup',
}))
.setPopupContent('ピンを立てました')
.openPopup();
})
マップにピンをつけたい場合、どこをクリックされたかがわからないといけません。
ただ、addEventListenerではたとえばマップ全体としてしまってはマップのどこがクリックされたのか判断できません。そこでそのイベントハンドラーとして使えるのが、定数mapです。
leafletがすでに提供しています。map.on()というのが使えます。
これは、JavaScriptの機能ではありません。leafletが提供している機能です。具体的には名前空間のLによって生成されています。
そして、map.on()を設定してマップをクリックするとコンソールにクリックした場所の情報が表示されます。latlngというプロパティです。
const {lat, lng} = mapEvent.latlng;
L.marker([lat, lng]) //マーカーをたてる場所を決まる
これは、マーカーをたてる場所を決めることができます。だいたいの場合、クリックした場所がほしいので、上のような指定になります。
.bindPopup(L.popup({ //ポップアップをカスタマイズ
maxWidth: 500,
minWidth: 200,
autoClose: false,
closeOnClick: false,
className: 'running-popup',
}))
ドキュメントに他にもたくさんのleafletのオプションやプロパティがのっていて、詳しく解説されています。
デフォルトでは、クリックすると、他のピンのメッセージはでなくなるので、それを変えるためにautoCloseを変更したり、classNameというオプションで自由にCSSで見た目を変更することができます。
.setPopupContent('ピンを立てました')
こちらで、ピンを立てたときに表示するメッセージを変更することができます。