Webマップの実装手法
- カテゴリー
- JavaScript >
- JavaScriptの実践
WebサイトやWebアプリケーションへの地図の実装を考えるシリーズです。主要な地図実装手法や注意点の解説や、手法を選択する際のポイントを紹介します。
記事執筆当初からGoogleMapの仕様が変わり、現在はデモが動作していません。最新の仕様については、公式ドキュメントを参照ください。
最終回 Leafletによる実装 2
オープンソースの地図ライブラリLeafletを使い、テキストとHTMLのオーバーレイヤーの実装、さらにマーカーのクラスタリングについても解説します。Google マップが使えない案件で重宝するでしょう。
第6回 Leafletによる実装 1
オープンソースの地図ライブラリLeafletを用いたWebマップの実装について解説します。Leafletは地図データを持たないため、別途データを読み込む実装が必要です。まず、基礎を押さえます。
第5回 マーカークラスター
地図上に大量のマーカーが並ぶと、そのままでは動作が重くなりユーザーにストレスを与えてしまいます。その解決策として、近いマーカー同士をグループにまとめてしまうクラスタリングがあります。
第4回 Google Mapsの実装 2
地図上に表示するテキストのオーバーレイレイヤーやHTMLを追加する方法ついて解説します。吹き出しの中にテキストやHTMLや画像を表示したり、地図上に直接HTMLを追加することができます。
第3回 Google Mapsの実装 1
Google Maps JavaScript APIを使った地図の描画、マーカーの設置、図形の描画について解説します。使いどころ、実装上の注意などもしっかり押さえて、実践的な実装ができるようにしましょう。
第2回 Webマップのレイヤー構造
Webマップのライブラリを概観しましょう。実装の基礎となる「レイヤー構造」について解説します。さらに、ライブラリをどのような観点から取捨選択するのか考えてみます。
第1回 地図サービスの利用
このシリーズでは、WebサイトやWebアプリケーションへの地図実装手法を解説します。初回はもっとも手軽なGoogle マップやYahoo!地図サービス、さらにGoogle Maps Embed APIを取り上げます。