マンホールマップなど、地図や位置情報を使ったアプリを何度か作ったことがあります。地図を扱うためのライブラリはいくつかありますが、leaflet.js というオープンソースのマップクライアントライブラリを使う機会がありました：
leaflet.js 自体はオープンソースで提供された JavaScript によるマップ操作クライアントライブラリです。ここで扱うマップは OpenStreetMap だったり、国土地理院のものだったり、（プラグインを使えば）Google MAPs だったりを選ぶことができます。
使い方も簡単で、まずは（CDN などから）leaflet の css と javascript をロードしておきます（以下の例では leaflet 1.2.0 を使っています。また後で使うので jQuery もロードしています）：
HTML 内にマップを表示する部分を定義します。この例ではブラウザ画面全体に広がる <div id="demoMap"></div> を定義しています：
そしてメイン部分。上記の demoMap 内に地図を表示します。以下の例では OpenStreetMap を使って千葉県船橋市役所周辺の地図を表示し、市役所の位置にマーカーを置いて、２秒おきにマーカーをランダムウォークさせる、というものです：
完成品の HTML はこちらに用意しました。全体を確認したい方はこちらから HTML ファイルをダウンロードしてください：
https://raw.githubusercontent.com/dotnsf/samples/master/leafletjs.html
ダウンロードした HTML をウェブブラウザで表示すると、以下のように船橋市役所を中心としたマップが表示され、青いマーカーが２秒おきにその場所を少しずつ変えて移動する様子が確認できると思います：
こういったライブラリを使って地図アプリを作っておくと、利用する地図を変える（例えば OpenStreetMap だったり、Google MAPs だったりに変える）のが楽になりますね。
leaflet.js 自体はオープンソースで提供された JavaScript によるマップ操作クライアントライブラリです。ここで扱うマップは OpenStreetMap だったり、国土地理院のものだったり、（プラグインを使えば）Google MAPs だったりを選ぶことができます。
使い方も簡単で、まずは（CDN などから）leaflet の css と javascript をロードしておきます（以下の例では leaflet 1.2.0 を使っています。また後で使うので jQuery もロードしています）：
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/leaflet.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/leaflet.js"></script>
HTML 内にマップを表示する部分を定義します。この例ではブラウザ画面全体に広がる <div id="demoMap"></div> を定義しています：
<style>
html, body {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
}
#demoMap {
width: 100%;
height: 100%;
}
</style>
:
:
<body>
<div id="demoMap"></div>
</body>
そしてメイン部分。上記の demoMap 内に地図を表示します。以下の例では OpenStreetMap を使って千葉県船橋市役所周辺の地図を表示し、市役所の位置にマーカーを置いて、２秒おきにマーカーをランダムウォークさせる、というものです：
<script>
//. 船橋市役所の緯度経度（初期位置）
var lat = 35.69471100;
var lng = 139.98262100;
var map = null;
var marker = null;
$(function(){
//. 船橋市役所を中心とした地図を OpenStreetMap データで表示
map = L.map('demoMap').setView( [ lat, lng ], 15 );
L.tileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © <a href="http://openstreetmap.org/">OpenStreetMap</a>',
maxZoom: 18
}
).addTo( map );
//. 初期状態で市役所にマーカーを設置
marker = L.marker( [ lat, lng ] ).addTo( map );
//. マーカーを２秒おきにランダムウォークさせる
setInterval( randomWalk, 2000 );
});
function randomWalk(){
//. マーカー位置をランダムに移動
lat += Math.random() / 100.0 - 0.005;
lng += Math.random() / 100.0 - 0.005;
var latlng = new L.LatLng( lat, lng );
marker.setLatLng( latlng );
}
</script>
完成品の HTML はこちらに用意しました。全体を確認したい方はこちらから HTML ファイルをダウンロードしてください：
https://raw.githubusercontent.com/dotnsf/samples/master/leafletjs.html
ダウンロードした HTML をウェブブラウザで表示すると、以下のように船橋市役所を中心としたマップが表示され、青いマーカーが２秒おきにその場所を少しずつ変えて移動する様子が確認できると思います：
こういったライブラリを使って地図アプリを作っておくと、利用する地図を変える（例えば OpenStreetMap だったり、Google MAPs だったりに変える）のが楽になりますね。
コメント