Leaflet Map
オープンソースな JavaScript ライブラリである LeafletJS を用いたモバイルフレンドリーなインタラクティブ地図を生成します。マップタイルはデフォルトでは OpenStreetMap か MapQuest （App キーが必要）が用意されています。表示する地図ごとにショートコードの属性やダッシュボードから設定できます。
地図の表示
単にマップを表示するだけなら
[leaflet-map]
地名を使って探すには :
[leaflet-map address="chicago"]
緯度と経度がわかっている場合（ズームレベル付き） :
[leaflet-map lat=44.67 lng=-63.61 zoom=5]
地図にマーカーも追加する場合 :
[leaflet-map]
[leaflet-marker]
もっとマーカーを増やす場合（さらにマーカーが全て含まれるようにする場合） :
[leaflet-map fitbounds]
[leaflet-marker address="tokyo"]
[leaflet-marker address="oslo"]
[leaflet-marker address="cairo"]
[leaflet-marker address="toronto"]
さらに名称を使ってポップアップも表示する場合 :
[leaflet-map fitbounds]
[leaflet-marker address="tokyo"]Tokyo[/leaflet-marker]
[leaflet-marker address="oslo"]Oslo[/leaflet-marker]
...
WordPress エディタによる編集と同じような方法を使って、ポップアップメッセージにリンクを貼ることができます。
他の図形、GeoJSON、KML の表示
[leaflet-line] を追加することで地図に線分を追加することができます。ポジションの指定はセミコロン ; またはバー | で区切った lat/lng [leaflet-line latlngs="41, 29; 44, 18"] または地名 [leaflet-line addresses="Istanbul; Sarajevo"] のリストを用います。また画像の場合は x/y 座標を指定します。
円を地図に追加するには [leaflet-circle] を用います。表示位置は
lat と lng を使って緯度経度で、大きさは radius を使ってメートルで半径を指定します。また Leaflet’s Path options を使って形状や色をカスタマイズすることもできます。例 : [leaflet-circle message="max distance" lng=5.117909610271454 lat=52.097914814706094 radius=17500 color="#0DC143" fillOpacity=0.1].
または次のようなショートコードを利用することで、 URL によって geojson の形状を追加することもできます（自分のサーバ上にない場合は、アクセスが許可されていることを確認してください）。[leaflet-geojson src="https://example.com/path/to.geojson"]
カスタムポップアップをフィールド名を使って追加することができます。デフォルトのフィールド名と src ファイルを以下のように試してみてください。
[leaflet-map fitbounds]
[leaflet-geojson]{name}[/leaflet-geojson]
name is a property on that GeoJSON, and it can be accessed with curly brackets and the property name.
画像への適用
[leaflet-image src="path/to/image/file.jpg"] を用いることで、地図の代わりに通常の画像をズームしたり動かしたりすることができます。スクリーンショット 3 – 5 も参考にしてください。
もっと活用するには
他の例は Leaflet Map の設定ページにあるショートコードのヘルプもチェックしてください。
ソースコードと詳細はGitHubページも確認してください。