おしらせ

Leafletデモ（縮小地図の表示に対応しました）

2015年07月13日

地理院地図のサイト構築サンプル集でも紹介され、公開サイトも増えてきた「Leaflet」について、機能検証も兼ねてデモページを作成しました。

lf_logoLeafletデモページ

lf_image00 Leafletデモ

Leaflet の公式情報については、以下のサイトから参照可能です。

デモページの機能

lf_image02

今回作成したデモページでは、地理院地図・Google Mapsをベースとし、主題情報に公共施設のマーカーを重ね合わせ表示しました。
また、以下の基本的な地図操作機能を実装しています。（今後も随時、追加予定）

 

  • 地図表示
    ベースマップ（基図）：地理院地図（各種タイルデータ）、Google Maps
    オーバーレイ（主題）：
    　板橋区各種施設データ　※板橋区のオープンデータ（地理情報）を使用しています
    　平成２２年国勢調査（小地域）　年齢別（５歳階級、４区分）、男女別人口（板橋区）　※出典：政府統計の総合窓口(e-Stat)
  • 【+】拡大表示
  • 【-】縮小表示
  • 【 】レイヤ制御（表示 ON/OFF）
  • 主題データ属性情報表示
    ポップアップ表示（マウスクリック）
  • 地図上の画面情報表示
    スケールバー
    座標情報（マウス位置）
    Zoomレベル

※ Google Maps の表示には、公式サイトで紹介されているプラグインの「Plugins by Pavel Shramov」を利用しました。

Leafletの特徴

lf_image03OpenLayers3のデモと並行してページを作成したところ、Leaflet には以下の特徴が感じられました。

 

 

  • 利点
    基本機能を容易に組み込むことができる（レイヤ制御、属性表示など）
    モバイル環境を含めた各種ブラウザに対応（※ Browser Support　Features - Leaflet -）
    公式サイトから豊富なプラグイン（サードパーティー）を利用可能
  • 欠点
    APIで扱える機能が少ない（基本機能に特化）
    カスタマイズ性が低い

データの表示・参照のみの単純なサイトであれば、Leaflet は扱いやすいです。
また公開中のプラグインを利用することで、複雑な機能を組み込むことも可能となります。

Leafletの応用

lf_image06

Leaflet では多様なプラグインが公開されています。
今後は特にニーズが高いと思われる以下の機能・プラグインについて、デモページを展開する予定です。

 

Shapeファイルの表示

Shapeファイルを直接読み込めるプラグインを組み込んでみましたが、日本語(UTF-8)を含む属性情報が文字化けして正常に表示することができませんでした。

GeoJson形式の表示

上記のShapeプラグインが、コアライブラリ「L.geoJson()」の拡張であり、実装方法も変わらなかったことから試作してみました。
Shape→GeoJsonの変換は、QGISのメニュー「レイヤ」→「名前を付けて保存」から可能です。
こちらであれば、日本語の属性情報も文字化けしません。

lf_image08

// 【GeoJson読み込み（主題情報）】
var geoJsonfile = new L.geoJson(h22ka13119,{
onEachFeature:function(feature, layer) {
	// 属性情報
	if (feature.properties) {
			layer.bindPopup(Object.keys(feature.properties).map(function(k){
				return k + ": " + feature.properties[k] ;
			}).join("<br />"),{maxHeight:200});
	}
},style: function(feature) {	// style設定
	var jinko = feature.properties.JINKO;
	styleObj = {};
	sColor = "";
	if ( jinko < 1000 ) {sColor = "#FFFFFF"};
	styleObj.color = sColor;
	styleObj.weight = 1;
	styleObj.opacity = 1.0;
	styleObj.fillColor = sColor;
	styleObj.fillOpacity = 0.5;
	return styleObj;
}});

デモページでは、以下の統計データをダウンロードし、GeoJson形式に変換して表示しました。
　出典：政府統計の総合窓口(e-Stat)　平成２２年国勢調査（小地域）　年齢別（５歳階級、４区分）、男女別人口　※板橋区のみ

縮小地図の表示
  • Leaflet.MiniMap（プラグイン）
    A small minimap showing the map at a different scale to aid navigation.

GISでは一般的な「縮小地図」の機能を追加しました。メインの地図画面と同期し、「縮小地図」画面上からも拡大・縮小・移動の操作が可能です。

lf_sample_minmap

// 【縮小地図】
// min-map（縮小地図）コントロール　※ Plugins（leaflet-minimap）
// 縮小地図のレイヤ ※ ベースマップとは別に設定する必要あり
var min_map_layer = L.tileLayer(
	'http://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', {
	attribution: '地理院タイル（淡色地図）',
	maxZoom: 12,
	minZoom: 0
});
var miniMap = new L.Control.MiniMap(min_map_layer, {
	position		: 'bottomright'
	,width			: 210
	,height			: 120
	,zoomLevelOffset: -5
	//,zoomLevelFixed	: 5
	,zoomAnimation	: false
	,toggleDisplay	: true
	//,autoToggleDisplay	: true
	,aimingRectOptions	: aimingRectOpt // 縮小地図に表示する矩形設定
	,shadowRectOptions	: shadowRectOpt // 縮小地図に表示する矩形（影）設定
}).addTo(map);

メインの地図画面の範囲を赤い枠内に表示していますが、この枠をドラッグして移動できないため、違和感を感じるかもしれません。

スマホ向けの機能（検討中）