ヘルプ:地図の編集

Google Maps API の仕様変更により Google Maps Extension は使えなくなりました。代替の仕組みとして Maps Extension を導入しましたが、記述方法が異なります。

基本的には

{{#display_map:[座標]}}

というコードを埋め込むと地図が表示されます。

マーカーを一つ表示した地図の例

{{#display_map:35.600753 139.667300}}

地図を読み込み中...

{"minzoom":false,"maxzoom":false,"mappingservice":"leaflet","width":"500px","height":"350px","centre":false,"title":"","label":"","icon":"","lines":[],"polygons":[],"circles":[],"rectangles":[],"copycoords":false,"static":false,"zoom":false,"defzoom":14,"layers":["OpenStreetMap","\u5730\u7406\u9662\u5730\u56f3","\u5730\u7406\u9662\u5730\u56f3 \u5358\u8272","\u7a7a\u4e2d\u5199\u771f 1940s","\u7a7a\u4e2d\u5199\u771f"],"image layers":[],"overlays":[],"resizable":false,"fullscreen":false,"scrollwheelzoom":true,"cluster":false,"clustermaxzoom":20,"clusterzoomonclick":true,"clustermaxradius":80,"clusterspiderfy":true,"geojson":"","clicktarget":"","imageLayers":[],"locations":[{"text":"","title":"","link":"","lat":35.600753,"lon":139.6673,"icon":""}],"imageoverlays":null}

マーカーを複数表示した地図の例

緯度・経度の間のコンマ（,）はあっても無くても構いません。複数の座標はセミコロン（;）で区切ります。

{{#display_map:
  35.660391, 139.708787;
  35.660055, 139.70887;
  35.659406, 139.708838;
  35.659813, 139.708865;
  35.660458, 139.708913;
  35.659081, 139.708736;
  35.65921, 139.708942;
  35.659393, 139.708988;
  35.659811, 139.709018;
  35.660155, 139.709007;
}}

地図を読み込み中...

{"minzoom":false,"maxzoom":false,"mappingservice":"leaflet","width":"500px","height":"350px","centre":false,"title":"","label":"","icon":"","lines":[],"polygons":[],"circles":[],"rectangles":[],"copycoords":false,"static":false,"zoom":false,"defzoom":14,"layers":["OpenStreetMap","\u5730\u7406\u9662\u5730\u56f3","\u5730\u7406\u9662\u5730\u56f3 \u5358\u8272","\u7a7a\u4e2d\u5199\u771f 1940s","\u7a7a\u4e2d\u5199\u771f"],"image layers":[],"overlays":[],"resizable":false,"fullscreen":false,"scrollwheelzoom":true,"cluster":false,"clustermaxzoom":20,"clusterzoomonclick":true,"clustermaxradius":80,"clusterspiderfy":true,"geojson":"","clicktarget":"","imageLayers":[],"locations":[{"text":"","title":"","link":"","lat":35.660391,"lon":139.708787,"icon":""},{"text":"","title":"","link":"","lat":35.660055,"lon":139.70887,"icon":""},{"text":"","title":"","link":"","lat":35.659406,"lon":139.708838,"icon":""},{"text":"","title":"","link":"","lat":35.659813,"lon":139.708865,"icon":""},{"text":"","title":"","link":"","lat":35.660458,"lon":139.708913,"icon":""},{"text":"","title":"","link":"","lat":35.659081,"lon":139.708736,"icon":""},{"text":"","title":"","link":"","lat":35.65921,"lon":139.708942,"icon":""},{"text":"","title":"","link":"","lat":35.659393,"lon":139.708988,"icon":""},{"text":"","title":"","link":"","lat":35.659811,"lon":139.709018,"icon":""},{"text":"","title":"","link":"","lat":35.660155,"lon":139.709007,"icon":""}],"imageoverlays":null}

マーカーのカスタマイズ

吹き出しに説明を記載したり、マーカーの種類を変更することができます。

説明を付ける

座標の後ろにチルダ（~）で区切って、吹き出しのタイトルと説明を加えることができます。吹き出しはマーカーをクリックすると表示されます。

{{#display_map:
  35.660391, 139.708787~タイトル1~説明1;
  35.660055, 139.70887~タイトル2~説明2;
  35.659406, 139.708838~タイトル2~説明2;
}}

地図を読み込み中...

{"minzoom":false,"maxzoom":false,"mappingservice":"leaflet","width":"500px","height":"350px","centre":false,"title":"","label":"","icon":"","lines":[],"polygons":[],"circles":[],"rectangles":[],"copycoords":false,"static":false,"zoom":false,"defzoom":14,"layers":["OpenStreetMap","\u5730\u7406\u9662\u5730\u56f3","\u5730\u7406\u9662\u5730\u56f3 \u5358\u8272","\u7a7a\u4e2d\u5199\u771f 1940s","\u7a7a\u4e2d\u5199\u771f"],"image layers":[],"overlays":[],"resizable":false,"fullscreen":false,"scrollwheelzoom":true,"cluster":false,"clustermaxzoom":20,"clusterzoomonclick":true,"clustermaxradius":80,"clusterspiderfy":true,"geojson":"","clicktarget":"","imageLayers":[],"locations":[{"text":"\u003Cb\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003E\u30bf\u30a4\u30c8\u30eb1\n\u003C/p\u003E\u003C/div\u003E\u003C/b\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003E\u8aac\u660e1\n\u003C/p\u003E\u003C/div\u003E","title":"\u30bf\u30a4\u30c8\u30eb1\n","link":"","lat":35.660391,"lon":139.708787,"icon":""},{"text":"\u003Cb\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003E\u30bf\u30a4\u30c8\u30eb2\n\u003C/p\u003E\u003C/div\u003E\u003C/b\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003E\u8aac\u660e2\n\u003C/p\u003E\u003C/div\u003E","title":"\u30bf\u30a4\u30c8\u30eb2\n","link":"","lat":35.660055,"lon":139.70887,"icon":""},{"text":"\u003Cb\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003E\u30bf\u30a4\u30c8\u30eb2\n\u003C/p\u003E\u003C/div\u003E\u003C/b\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003E\u8aac\u660e2\n\u003C/p\u003E\u003C/div\u003E","title":"\u30bf\u30a4\u30c8\u30eb2\n","link":"","lat":35.659406,"lon":139.708838,"icon":""}],"imageoverlays":null}

色を変える

チルダで区切られた3番目の設定項目にマーカーの画像ファイルを指定することで、マーカーの色を変えることができます。今のところ規定値の青の他は赤と緑しか用意しておりません。もし他の色のマーカーを使用したいという要望があれば、EkikaraManholeまでご連絡ください。

なお、チルダを3つ連続して記述すると、MediaWikiの署名を挿入するコマンドになってしまいますので、チルダを連続して記述する際には間にスペースを挟んでください。

{{#display_map:
  35.660391, 139.708787;
  35.660055, 139.70887~ ~ ~Red-marker.png;
  35.659406, 139.708838~ ~ ~Green-marker.png;
}}

地図を読み込み中...

{"minzoom":false,"maxzoom":false,"mappingservice":"leaflet","width":"500px","height":"350px","centre":false,"title":"","label":"","icon":"","lines":[],"polygons":[],"circles":[],"rectangles":[],"copycoords":false,"static":false,"zoom":false,"defzoom":14,"layers":["OpenStreetMap","\u5730\u7406\u9662\u5730\u56f3","\u5730\u7406\u9662\u5730\u56f3 \u5358\u8272","\u7a7a\u4e2d\u5199\u771f 1940s","\u7a7a\u4e2d\u5199\u771f"],"image layers":[],"overlays":[],"resizable":false,"fullscreen":false,"scrollwheelzoom":true,"cluster":false,"clustermaxzoom":20,"clusterzoomonclick":true,"clustermaxradius":80,"clusterspiderfy":true,"geojson":"","clicktarget":"","imageLayers":[],"locations":[{"text":"","title":"","link":"","lat":35.660391,"lon":139.708787,"icon":""},{"text":"","title":"","link":"","lat":35.660055,"lon":139.70887,"icon":"/images/d/d2/Red-marker.png"},{"text":"","title":"","link":"","lat":35.659406,"lon":139.708838,"icon":"/images/b/be/Green-marker.png"}],"imageoverlays":null}

文字を入れる

色を変えるのと同じ方法で文字入りのマーカーを使うことができます。数字(0-9)、アルファベット大文字(A-Z)、アルファベット小文字(a-z)、一部の漢字(丸・角・消・跡)のマーカーが用意されています。別の文字のマーカーを使用したいという要望があれば、EkikaraManholeまでご連絡ください。

{{#display_map:
  35.660391, 139.708787~ ~ ~A.png;
  35.660055, 139.70887~ ~ ~a.png;
  35.659406, 139.708838~ ~ ~3.png;
  35.659813, 139.708865~ ~ ~丸.png;
  35.660458, 139.708913~ ~ ~角.png;
  35.659081, 139.708736~ ~ ~跡.png;
}}

地図を読み込み中...

{"minzoom":false,"maxzoom":false,"mappingservice":"leaflet","width":"500px","height":"350px","centre":false,"title":"","label":"","icon":"","lines":[],"polygons":[],"circles":[],"rectangles":[],"copycoords":false,"static":false,"zoom":false,"defzoom":14,"layers":["OpenStreetMap","\u5730\u7406\u9662\u5730\u56f3","\u5730\u7406\u9662\u5730\u56f3 \u5358\u8272","\u7a7a\u4e2d\u5199\u771f 1940s","\u7a7a\u4e2d\u5199\u771f"],"image layers":[],"overlays":[],"resizable":false,"fullscreen":false,"scrollwheelzoom":true,"cluster":false,"clustermaxzoom":20,"clusterzoomonclick":true,"clustermaxradius":80,"clusterspiderfy":true,"geojson":"","clicktarget":"","imageLayers":[],"locations":[{"text":"","title":"","link":"","lat":35.660391,"lon":139.708787,"icon":"/images/7/70/A.png"},{"text":"","title":"","link":"","lat":35.660055,"lon":139.70887,"icon":"/images/3/32/a.png"},{"text":"","title":"","link":"","lat":35.659406,"lon":139.708838,"icon":"/images/1/10/3.png"},{"text":"","title":"","link":"","lat":35.659813,"lon":139.708865,"icon":"/images/b/b7/%E4%B8%B8.png"},{"text":"","title":"","link":"","lat":35.660458,"lon":139.708913,"icon":"/images/a/a4/%E8%A7%92.png"},{"text":"","title":"","link":"","lat":35.659081,"lon":139.708736,"icon":"/images/5/55/%E8%B7%A1.png"}],"imageoverlays":null}

地図のカスタマイズ

各種設定値を追加することで、地図の種類や表示範囲を指定することができます。

代表的な設定項目は以下の通りです。各設定値はバーティカルバー「|」で区切ります。

• width: 表示する地図の画面上の横幅。ピクセルで指定。規定値は「500」。
• height: 表示する地図の画面上の縦幅。ピクセルで指定。規定値は「350」。
• center: 地図の中心座標。
• zoom: 地図の縮尺。数字が大きい程狭い範囲を拡大して表示します。
• layers: 使用する地図の種類。カンマ区切りで複数指定した場合、地図の右上に選択ボタンが表示されます。規定値は「OpenStreetMap,地理院地図,地理院地図 単色」。指定できる地図は多数ありますが、以下はその一例です。
  • OpenStreetMap
  • OpenStreetMap.BlackAndWhite
  • OpenStreetMap.HOT
  • 地理院地図
  • 地理院地図 単色
  • OpenTopoMap
  • Thunderforest.OpenCycleMap

{{#display_map:
  width=300|height=300|center=35.605753 139.667300|zoom=16|layers=地理院地図|
}}

地図を読み込み中...

{"minzoom":false,"maxzoom":false,"mappingservice":"leaflet","width":"300px","height":"300px","centre":{"text":"","title":"","link":"","lat":35.605753,"lon":139.6673,"icon":""},"title":"","label":"","icon":"","lines":[],"polygons":[],"circles":[],"rectangles":[],"copycoords":false,"static":false,"zoom":16,"defzoom":14,"layers":["\u5730\u7406\u9662\u5730\u56f3"],"image layers":[],"overlays":[],"resizable":false,"fullscreen":false,"scrollwheelzoom":true,"cluster":false,"clustermaxzoom":20,"clusterzoomonclick":true,"clustermaxradius":80,"clusterspiderfy":true,"geojson":"","clicktarget":"","imageLayers":[],"locations":[],"imageoverlays":null}

色々とカスタマイズした地図の例

{{#display_map:
  center=35.605753 139.667300|width=600|height=250|zoom=13|layers=地理院地図 単色,地理院地図|
  35.600753 139.667300~その１~解説１~E.png;
  35.600753 139.657300~その２~解説２~Red-marker.png;
  35.610753 139.677300~その３~解説３~Green-marker.png;
}}

地図を読み込み中...

{"minzoom":false,"maxzoom":false,"mappingservice":"leaflet","width":"600px","height":"250px","centre":{"text":"","title":"","link":"","lat":35.605753,"lon":139.6673,"icon":""},"title":"","label":"","icon":"","lines":[],"polygons":[],"circles":[],"rectangles":[],"copycoords":false,"static":false,"zoom":13,"defzoom":14,"layers":["\u5730\u7406\u9662\u5730\u56f3 \u5358\u8272","\u5730\u7406\u9662\u5730\u56f3"],"image layers":[],"overlays":[],"resizable":false,"fullscreen":false,"scrollwheelzoom":true,"cluster":false,"clustermaxzoom":20,"clusterzoomonclick":true,"clustermaxradius":80,"clusterspiderfy":true,"geojson":"","clicktarget":"","imageLayers":[],"locations":[{"text":"\u003Cb\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003E\u305d\u306e\uff11\n\u003C/p\u003E\u003C/div\u003E\u003C/b\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003E\u89e3\u8aac\uff11\n\u003C/p\u003E\u003C/div\u003E","title":"\u305d\u306e\uff11\n","link":"","lat":35.600753,"lon":139.6673,"icon":"/images/f/fa/E.png"},{"text":"\u003Cb\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003E\u305d\u306e\uff12\n\u003C/p\u003E\u003C/div\u003E\u003C/b\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003E\u89e3\u8aac\uff12\n\u003C/p\u003E\u003C/div\u003E","title":"\u305d\u306e\uff12\n","link":"","lat":35.600753,"lon":139.6573,"icon":"/images/d/d2/Red-marker.png"},{"text":"\u003Cb\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003E\u305d\u306e\uff13\n\u003C/p\u003E\u003C/div\u003E\u003C/b\u003E\u003Cdiv class=\"mw-parser-output\"\u003E\u003Cp\u003E\u89e3\u8aac\uff13\n\u003C/p\u003E\u003C/div\u003E","title":"\u305d\u306e\uff13\n","link":"","lat":35.610753,"lon":139.6773,"icon":"/images/b/be/Green-marker.png"}],"imageoverlays":null}

地図エディタ

地図エディタが用意されています。これを使って地図上にマーカーだけではなく線や図形などのポリゴン要素を追加することも可能です。

その他詳しい編集方法については、Maps for MediaWikiの Leaflet maps に関する項目を参照してください。