Leaflet.js 学習用サンプル集

初心者から上級者まで、段階的に学べる30個のインタラクティブなサンプル

30個のサンプル Leaflet.js v1.9.4 日本語解説コピペで動く

サンプル一覧

各サンプルは独立したHTMLファイルで、ブラウザで直接開いて動作確認できます

🌱

初級レベル

基本的な地図表示からシンプルな図形描画まで

基本的な地図表示

Leaflet.jsで最初の地図を表示

L.map() L.tileLayer()

マーカーを追加

地図上に位置を示すマーカーを配置

ポップアップを表示

マーカーに情報を表示する吹き出し

bindPopup() openPopup()

複数のマーカー

配列データから効率的にマーカーを生成

円を描画

円と円マーカーの違いを理解

L.circle() L.circleMarker()

ポリゴンを描画

多角形と矩形でエリアを表現

L.polygon() L.rectangle()

ポリラインを描画

ルートや経路を線で表現

L.polyline() dashArray

ズームとパン操作

プログラムから地図を操作

setView() flyTo() fitBounds()

異なるタイルレイヤー

OSM, CartoDB, Esriなどを切り替え

タイルプロバイダー

地図のイベント処理

クリック、ズーム、移動を検知

map.on() イベント

🌿

中級レベル

カスタマイズとデータ表示

カスタムアイコン

独自のマーカーアイコンを作成

L.icon() L.divIcon()

ドラッグ可能マーカー

ユーザーが位置を変更できるマーカー

draggable dragend

GeoJSONの基本

標準フォーマットで地理データを表示

L.geoJSON() FeatureCollection

GeoJSONスタイリング

データに基づく動的スタイル設定

style関数インタラクション

レイヤーグループ

複数レイヤーをまとめて管理

L.layerGroup() L.featureGroup()

レイヤーコントロール

UIでレイヤーを切り替え

L.control.layers()

スケールコントロール

縮尺バーと各種コントロール

L.control.scale()

画像オーバーレイ

地図上に画像やSVGを配置

L.imageOverlay() L.svgOverlay()

現在地表示

ブラウザの位置情報APIを活用

map.locate() モバイル対応

ツールチップ

ホバー時に情報を表示

bindTooltip() permanent

🌳

上級レベル

高度な機能とアプリケーション開発

コロプレスマップ

データ値で地域を色分け

データ可視化凡例

カスタムコントロール

独自のUIコントロールを作成

L.Control.extend()

マーカークラスタ

大量マーカーのグループ化

クラスタリング

境界と制限

表示範囲とズームを制限

maxBounds minZoom

動的マーカー管理

マーカーの追加・削除・更新

CRUD リスト連携

アニメーション

マーカーにアニメーション効果

CSS Animation 移動

WMSレイヤー

Web Map Serviceとの連携

L.tileLayer.wms()

非地理的マップ

フロアプランやゲームマップ

マップペイン

レイヤーの重なり順を制御

createPane() z-index

総合アプリケーション

店舗検索システムを構築

実践検索フィルタ

参考リンク

Leaflet公式サイト

APIリファレンス

公式チュートリアル

GitHub リポジトリ