実践
Webマップの実装手法
7

オープンソースの地図ライブラリLeafletを使い、テキストとHTMLのオーバーレイヤーの実装、さらにマーカーのクラスタリングについても解説します。Google マップが使えない案件で重宝するでしょう。

柿内 暢昌
柿内 暢昌 | フロントエンド・エンジニア

オープンソースの地図ライブラリLeafletを用いたWebマップの実装について解説します。Leafletは地図データを持たないため、別途データを読み込む実装が必要です。まず、基礎を押さえます。

柿内 暢昌
柿内 暢昌 | フロントエンド・エンジニア

地図上に大量のマーカーが並ぶと、そのままでは動作が重くなりユーザーにストレスを与えてしまいます。その解決策として、近いマーカー同士をグループにまとめてしまうクラスタリングがあります。

柿内 暢昌
柿内 暢昌 | フロントエンド・エンジニア

地図上に表示するテキストのオーバーレイレイヤーやHTMLを追加する方法ついて解説します。吹き出しの中にテキストやHTMLや画像を表示したり、地図上に直接HTMLを追加することができます。

柿内 暢昌
柿内 暢昌 | フロントエンド・エンジニア

Google Maps JavaScript APIを使った地図の描画、マーカーの設置、図形の描画について解説します。使いどころ、実装上の注意などもしっかり押さえて、実践的な実装ができるようにしましょう。

柿内 暢昌
柿内 暢昌 | フロントエンド・エンジニア

Webマップのライブラリを概観しましょう。実装の基礎となる「レイヤー構造」について解説します。さらに、ライブラリをどのような観点から取捨選択するのか考えてみます。

柿内 暢昌
柿内 暢昌 | フロントエンド・エンジニア

このシリーズでは、WebサイトやWebアプリケーションへの地図実装手法を解説します。初回はもっとも手軽なGoogle マップやYahoo!地図サービス、さらにGoogle Maps Embed APIを取り上げます。

柿内 暢昌
柿内 暢昌 | フロントエンド・エンジニア