iPhoneなどのモバイル端末用に地図を使ったWebアプリケーションを作るために技術的な実現性調査を頼まれました。
そこで、見栄えについてはjQuery Mobileを、地図表示についてはLeaflet.jsと国土地理院地図を利用することにしました。

課題

普通に地図表示するだけなら、Leaflet.jsのサンプル通りに作れば問題なく地図が表示されるのですが、jQueryっぽい画面遷移をする場合の地図の表示方法で、ちょっと詰まったので、対応策の情報共有したいと思います。

完成品

https://www.netanote.com/leaflet_jqm/index.html

デスクトップのブラウザでも問題なく動作しますが、iPhoneなどのモバイル環境でアクセスしてもらうとそれっぽく見えると思います。

利用ライブラリ

jQuery 2.2.4
jQuery Mobile 1.4.5
Leaflet 1.0.0-rc3

概要

下記のような二つのページを持つjQuery Mobileの画面で、

二つ目のページである地図表示画面に遷移したときに、Leaflet.jsを用いて国土地理院地図を表示します。

ページソース

<div id="First" data-role="page" data-title="最初の画面">

	<div data-role="header">
		<h1>最初の画面</h1>
	</div>

	<div data-role="content">
		<a id="ShowMap" class="ui-btn" href="#">地図を表示する</a>
	</div>

</div>

<div id="Second" data-role="page" data-title="地図表示画面">

	<div data-role="header" data-add-back-btn="true" data-back-btn-text="戻る">
		<h1>地図表示画面</h1>
	</div>

	<div id="MapContent" data-role="content">
		<div id="Map"></div>
	</div>

</div>

画面遷移スクリプト

$('#ShowMap').click(function(e) {
	//地図表示画面（Second）に遷移
	$('body').pagecontainer('change', '#Second');
});

ここまでは何の問題もないと思います。最初の画面の「地図を表示する」ボタンをタップしたら「地図表示画面」を表示するだけですね。

地図表示スクリプト

で、後はページ遷移した時っていう処理を記述します。

$(document).on('pagecreate', '#Second', function(){

	/**
	 * Leaflet.jsの処理
	 */
	var map = L.map('Map');

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


	function onLocationFound(e) {
		var radius = e.accuracy / 2;

		L.marker(e.latlng).addTo(map);//マーカー表示

		L.circle(e.latlng, radius).addTo(map);//精度の円形表示
	}

	function onLocationError(e) {
		alert(e.message);
	}

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

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

jQuery Mobileを使っている人には何の問題もない処理なのでしょうね。「pagecreate」の中にLeaflet.jsのサンプルコードを書いただけ、です。
が、一つ問題があって、「地図表示画面」ページの

に対するCSSの設定がうまくいかないのです。

CSS調整

もともとのサンプルでは、

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

のようなCSSを設定しているのですが、jQuery Mobile側のCSSが影響しているのか、このままでは地図が表示されません。
本来は、ヘッダー部分を除いて画面いっぱいに地図を表示したかったのですが、それがうまく設定できなかったので、今回は、

#Map {
	height: 320px;
}

として、地図表示部分の高さを固定しました。いずれはここを改良したいと思います。

感想

思うよりも簡単にモバイル用地図アプリケーションが出来そうです。
全ソースは記載していませんが、上の完成品はHTMLのみですので、そこでソースを見てもらえば、と思います。