インタラクティブ＆カスタマイズされた地図を作成するための13のJavaScriptライブラリ

Google Map Makerとその他の10のツールを使用して、地図を作成しました。ただし、代わりにJavascriptライブラリを使用したい場合は、投稿してもらえますか。特別な地図マーカーの表示、カスタムルートの描画、または地図上の特定のポイントをクリックしたときのダイアログの表示に使用できるJSライブラリは次のとおりです。.

地図を好みのスタイルにカスタマイズします - それらのうちのいくつかはCSSでスタイル設定できます - または 自分の好きなようにインタラクティブになるように地図をカスタマイズする. 地図データのソース、各ライブラリの依存関係およびライセンスはあなたの便宜のために含まれています.

Hongkiatの詳細：

Googleマップのスタイルを設定する方法
HTML5 Geolocation APIを使用してユーザーの位置を取得する
データの可視化：20種類以上の便利なツールとリソース

GMap

GMap Googleマップの追加とカスタマイズが簡単になります。地図を追加する以外に、ルートの描画に便利なポリライン、特別なメニューコントロール、さらにはHTML要素など、いくつかの要素を地図に追加することもできます。.

GMapsは、Foursquareのようにあなたの地図を特定のアプリと統合するために利用できるJSONフォーマットのデータと互換性があります。.

マップデータソース：グーグルマップ
依存関係：無し
ライセンス：MITライセンス

jHere

5 KBでは、jHEREはサイズが問題ではないことを示しています。それでも、ほんの一握りのカスタマイズオプションで強力なインタラクティブマップを構築することができます。 jHEREは、Windows Phone用の最も人気のある地図プロバイダーの1つであるHEREマップから地図の視覚化を導き出します。.

ライブラリは新しい機能で拡張することができます、そしてこのライブラリのために開発された形、ルート、およびカスタムマーカーを追加するためのものを含むいくつかの拡張があります.

マップデータソース：地図
依存関係：jQueryまたはZeptoJS
ライセンス：MITライセンス

カルトグラフ

カルトグラフ SVG形式で地図を生成するためのKartograph.phと、地図の上にインタラクティブな要素を追加するためのKartograph.jsの2つのファイルで構成されています。 Kartograph.jsはRaphael.jsの上に構築されているので、マップはIE7までうまく機能します。あなたはKartographが何をすることができるかについて発見するためにインタラクティブな地図デモを見ることができる.

マップデータソース：Kartograph
依存関係：Kartograph.py、Raphael、そしてjQuery
ライセンス：AGPLとLGPL

マパエル

jQuery Mapael 双方向性と同様に優雅なデータ視覚化で地図を作成することができます。たとえば、地図を作成し、その地域に基づいて異なる色で地図上の各地域を指定できます。また、地域にツールチップを追加したり、次のようなイベントハンドラを追加することもできます。 クリック または ホバー.

このマップは、JavaScriptで生成されたコンテンツをクロールできない検索エンジンロボットに代替のコンテンツを提供することで、SEOを考慮して構築されています。.

マップデータソース：Raphael.js
依存関係：jQuery
ライセンス：MITライセンス

D3js

D3.js HTML、SVGおよびCSSを通してあなたのデータを生き生きとさせる包括的なJavaScriptライブラリです。非常にインタラクティブな地図を作成することを含むD3の使用法はかなり多様です。 World Bank Global Developmentのこの地図を見れば、D3.jsを使って構築できるものの可能性がわかるでしょう。.

マップデータソース：D3.js
依存関係：無し
ライセンス： 未定義

データマップ

D3.jsを使って地図を作成するのが大変な場合は、 データマップ. DataMapsは本質的にはマップを構築するために特別に開発されたD3.jsプラグインです。 D3.jsの多くの機能を継承しているので、それを使って簡単な、あるいは非常にカスタマイズされたマップを作成することができます。私はマップがレスポンシブであると述べましたか?

マップデータソース：D3.js
依存関係：D3.jsとTopoJSON
ライセンス：MITライセンス

ジオチャート

GeoChartは、細かい詳細を含む本格的な地図ではなく、地域、マーカー、およびテキストをレンダリングする単純化されたGoogle Mapです。マップはSVGで生成され、リージョンカラーの変更、ポップアップの追加、カスタムマップマーカーなど、さまざまな方法でカスタマイズできます。.

マップデータソース：グーグルマップ
依存関係：無し
ライセンス：Google Maps TOSを読む

マプレイス

マプレイス, Google Maps API v3を介して地図を生成するためのjQueryプラグイン。 MaplaceはIE6を含むすべてのブラウザで動作します。あなたが可能な最も簡単な方法で地図を構築したいのであれば、これはあなたの注意のもう一つの素晴らしいプラグイン価値です.

マップデータソース：グーグルマップ
依存関係：jQuery
ライセンス：MITライセンス

丁寧に

つまり、米国の地図を生成するために開発されたJavaScriptライブラリです。生成されたマップの上にインタラクティブな要素を追加できることを考えると、このライブラリは比較的軽量です。.

マップデータソース：STATEY / SVG
依存関係：無し
ライセンス：MITライセンス

ジオコンプリート

GeoCompleteはそれ自体が異なるJavaScriptライブラリです。ライブラリは地図と一緒に入力フィールドを追加します。入力すると、都市、国、州の候補が表示されます。.

マップデータソース：グーグルマップ
依存関係：jQuery
ライセンス：MITライセンス

マップツール

Map Toolsは、Google Mapsを追加するための直感的なAPIを提供しています。地図をレンダリングするためにTopoJSONやGeoJSONなどの地理フォーマットのJSONデータの読み込みをサポートします。それに加えて、あなたは私が地図をより活発にすると思うアニメーションマーカーを追加することができます変数またはプレースホルダー付きのHTMLコンテンツを挿入alaハンドルバー.

マップデータソース：グーグルマップ
依存関係：GeoJSON / TopoJSON
ライセンス：MITライセンス

OpenLayers

OpenLayers さまざまなマッピングサービスを使用してインタラクティブマップを構築するための高性能のオープンソースJavaScriptフレームワークです。タイルレイヤまたはベクトルレイヤを使用して、多数のマップサービスからマップレイヤのソースを選択できます。.

OpenLayerは、箱から出してすぐに使用できるようになっており、デバイスやブラウザをまたがってマップを作成するのに適しています。あなたの地図の見栄えを変えるためにCSSを使うことができます。 OpenLayersを使用してWebに地図を実装するには、これが役立つチュートリアルです。.

マップデータソース：OpenStreetMap
依存関係：無し
ライセンス：未定義

リーフレット

開発者がくれた リーフレット そのサイズを小さく保ち、モバイル機器に最適な、完璧に機能するための基本機能。特定の機能については、プラグインを使用してLeafletを拡張するだけです。 Leafletはあなたが必要とするほとんどのオンライン地図機能を持っています：タイルレイヤ、ポップアップ、マーカー、そしてポリライン、ポリゴン、円または長方形のような無料のベクターレイヤ。あなたは簡単にCSS3を使用してスタイルをカスタマイズすることができますがそれは素晴らしいデフォルトデザインが付属しています.

リーフレットには、モバイルブラウザとデスクトップブラウザの両方で最も使用頻度の高い対話機能があります。.

マップデータソース：OpenStreetMap
依存関係：無し
ライセンス：未定義