Skip to content

≡

Free MAP - concrete5 アドオン

concrete5 の管理画面で地図の位置とマーカーの位置、ポップアップメッセージが表示できるアドオンです。オープンストリートマップとleaflet.jsを利用しています。(GoogleMAPやAPIキーは使いません。)

  • Width - 表示する地図の幅。px, vw, vh, em, rem, vx, %で指定可。省略した場合はpx
  • Height - 表示する地図の高さ。px, vw, vh, em, rem, vx, %で指定可。省略した場合はpx
  • Marker - マーカーを地図上に表示するかどうかを設定。
  • Message - マーカーを表示するとき、マーカー上のメッセージを設定。
  • Expert Mode - 緯度経度などを自分で数値設定する場合に選択する。上級者向け機能。
  1. latitude - マップの中心の緯度
  2. longitude - マップの中心の経度
  3. zoom - マップの拡大率
  4. markerlatitude - マーカーの位置の緯度
  5. markerlongitude - マーカーの位置の経度

表示されるのは下の画像のようになります。(マーカー有効の場合)

オープンストリートマップ表示

管理画面

ユーザーの位置情報を元に、地図の位置を設定できるようにしました。ホームページに地図を載せるとき、自分が今居る場所の近くであれば、この機能(Apply current location using GPS)を使うと、地図を動かす操作量が少なくて済みますね。
地図ブロック編集画面

地図の位置はドラッグドロップで、マーカーの位置はマウスクリックで設定するようにしてあります。

Expert Mode

緯度経度を直接指定したい人向けの上級者モードです。

自由な地図　エキスパートモード
地図の緯度経度ズーム、マーカーの緯度経度を、数値で指定することが可能です。もし表示したい場所の緯度経度が既知の場合は、こちらが便利かもしれません。
エキスパートモードで数値指定した場合は、地図には即時反映されません。Commit to MAPをクリックすると画面上の地図に反映されます。保存前に確認したい場合はこのボタンを押してください。
 

ライセンス

アドオンのコードは、MITライセンスで配布します。同梱しているleaflet.jsは、2項BSDライセンスです。