ヘルプ:地図の編集

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

基本的には

{{#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}

マーカーのカスタマイズ

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

地図のカスタマイズ

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

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

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

{{#display_map:
  width=900|height=400|center=35.605753 139.667300|zoom=13|layers=地理院地図|
}}

地図を読み込み中...

{"minzoom":false,"maxzoom":false,"mappingservice":"leaflet","width":"900px","height":"400px","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"],"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=400|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":"400px","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 に関する項目を参照してください。