Skip to content

必ず役立つWeb用地図系ライブラリまとめ

by : 2017/05/16

最近は業務システムの開発においてもスマートフォンやタブレットを対象とすることがあります。そうした端末は屋外で使うことも想定されていますので、その際には地図を使うこともあるでしょう。

Google MapsやBing Mapをそのまま利用する方も多いと思いますが、今回はそれらを利用するための地図用ライブラリをまとめてみました。そのまま利用するよりも簡単に実装できるものもありますので、デザイナーやJavaScriptが苦手な方にも利用していただけるでしょう。

今回紹介する各ライブラリのライセンスにおいては、MITやBSDなどオープン系のライセンスもありますが、ライブラリで利用するGoogleMAPやBingMAPの利用については、Google,Bingのライセンスに準拠する事になりますので、特に商用利用や利用頻度によって、利用料金が発生することに注意して下さい。

jQueryでGoogle Mapsをコントロール Maplace.js

Maplace
Maplace

Maplace.jsは、Google Maps用のjQueryプラグインです。jQueryに慣れていれば特に(慣れていなくとも)、こちらの方が手軽に実装できるではないでしょうか。以下は、サンプルのコードです。このように、利用においては簡単に設置が可能です。

実行結果

Maplace-exp
Maplace-exp

その他、ポリラインや、距離測定、ルートマップ、ヒートマップなどの表示も可能です。今までGoogle MapのAPIを利用していた方も一度チェックしてみて下さい。

Maplace.js – A Google Maps javascript plugin for jQuery.

Google Mapsをもっと手軽に扱う gmaps.js

gmaps
gmaps

こちらも、Google Maps用のライブラリです。Maplaceのように、特に他のライブラリには依存しません。以下は、ベーシックな表示方法です。

上記コードの実行結果です。

gmaps-exp
gmaps-exp

その他、ルート表示、ジオフェンス表示、ストリートビューなども設定できます。単純に地図だけを表示したい場合に限らず、利用範囲の広いマップ表示プラグインです。

gmaps.js — Google Maps API with less pain and more fun

軽量マップライブラリ Leaflet

leaflet
leaflet

LeafletはOpen Street Mapを利用した、軽量な地図ライブラリです。サイズは130KB未満と非常に小さいのですが、その分他のライブラリと比べ機能は制限されます。それだけでも実用は十分とは思いますが、足りない機能はプラグインで補うことも可能になっています。これにより、サイト自体のサイズを最小限に押さえることができるでしょう。プラグインも豊富で、殆どの機能はそろっているようです。

Leaflet – a JavaScript library for interactive maps

地図デザインをカスタマイズできる Mapbox

mapbox
mapbox

Mapboxは自分でマップカラーやマーカーなどのデザインをカスタマイズして、それをサイトで利用できるサービスです。オリジナルなマップが欲しい場合は、とても良い選択となるでしょう。利用にはサインアップが必要で、その中でカスタマイズをしていきます。マップの表示は、JavaScriptのライブラリが豊富に揃っていますので、特に困ることはなさそうです。また、iOSとAndroidのSDKもあるので、モバイル開発でも利用できます。

地図データはOpen Street Map の一択ですが、アカウントには無料の利用枠がありますので確認してはいかがでしょうか。

Mapbox | Design and publish beautiful maps

機能も豊富でハイパフォーマンスなマップライブラリ OpenLayers 3

OpenLayers
OpenLayers

非常にサンプルが豊富なライブラリです。マップライブラリとして必要な機能は殆どが揃っているのではないでしょうか。地図データはBing MAP、Open Street MAPなどが利用できます。

OpenLayers 3

3DのMAPライブラリ Cesium

cesium-top
cesium-top

WebGLで描画する3D地球儀のマップライブラリです。Apache2.0ライセンスの下、オープンソースのJavaScriptライブラリとなっています。地図データはBing MAP、Open Street Mapが利用出来ます。

cesium-basic
cesium-basic

地球儀上に様々なデータが表示可能ですので、データを用意してヒートマップやグラフ表示として利用することもできます。オリジナルの3Dのモデルを表示させたり、カメラコントロールも可能ですので、インタラクティブな見せ方ができるでしょう。

Cesium – WebGL Virtual Globe and Map Engine

最後に

昨今のサイトでは地図を表示するのが当たり前のように利用されています。実際、Google MapsBing Map など公式のライブラリでも手軽に導入でいるようになっていますが、今回紹介したライブラリを利用することで、より手軽に、かつ他の便利な機能なども利用できるようになります。地図の利用を考えている方はぜひお試しください。

From → まとめ

現在コメントは受け付けていません。

%d人のブロガーが「いいね」をつけました。