Help:Extension:Kartographer

From MediaWiki.org
Jump to navigation Jump to search
This page is a translated version of the page Help:Extension:Kartographer and the translation is 37% complete.

Outdated translations are marked like this.
Other languages:
العربية • ‎অসমীয়া • ‎asturianu • ‎Deutsch • ‎English • ‎español • ‎suomi • ‎français • ‎galego • ‎עברית • ‎magyar • ‎Bahasa Indonesia • ‎日本語 • ‎Ripoarisch • ‎македонски • ‎português do Brasil • ‎русский • ‎سنڌي • ‎svenska • ‎Tiếng Việt • ‎中文
PD 注意: このページを編集すると、編集内容が CC0 のもとで公開されることに同意したと見なされます。詳細はパブリック・ドメインのヘルプ ページを参照してください。
PD

このページはKartographer extension とその <mapframe> および <maplink> タグについての使い方を文書化しています。

始めてみよう

Downtown San Francisco

このコードはシンプルでインタラクティブなマップ(右側に見えているようなもの)を挿入し、マップをダブルクリックもしくは右上のアイコンをクリックすると最大化することができます。

<mapframe text="Downtown [[wikipedia:San Francisco|San Francisco]]" width=250 height=250 zoom=13 latitude=37.8013 longitude=-122.3988 />

align パラメータは、デフォルトの配置を左寄せ、右寄せ、あるいは中央寄せに変更します。 The attribute zoom allows for zoom levels between 0 and 19. Zero is the furthest out, 19 the furthest in.

<mapframe> の使用法

San Francisco museums

<mapframe> タグの内容はGeoJSON editorが生成するような、空もしくは有効な、スタイリング付きのGeoJSONでなければなりません。KartographerはMaki icons (クリエイティブ・コモンズ0でライセンス)でsimplestyle specificationをサポートします。

<mapframe text="San Francisco museums" width=350 height=350 zoom=13 latitude=37.8013 longitude=-122.3988>
{
  "type": "Feature",
  "geometry": { "type": "Point", "coordinates": [-122.3988, 37.8013] },
  "properties": {
    "title": "[[wikipedia:Exploratorium|Exploratorium]]",
    "description": "[[File:Giant_Mirror_at_the_Exploratorium.jpeg|200px]]",
    "marker-symbol": "museum",
    "marker-size": "large",
    "marker-color": "0050d0"
  }
}
</mapframe>

Frames

Frameless maps are good for insertion as part of a template, whereas framed maps are good for insertion directly into the page, either by hand or by using the visual editor.

  • To insert a map without a frame, add the "frameless" attribute: <mapframe frameless ...>
  • To add a caption, use the text="..." attribute.

Note: Adding the text attribute automatically enables a frame, even if there is a frameless attribute.

<maplink>

<mapframe><maplink> に変更すると、フルスクリーンのマップへのリンクが作られます: 37°48′37″N 122°23′58″W

<maplink zoom="13" latitude="37.8103" longitude="-122.3995" />

<maplink> はまた外部パラメータ"text"を受け取り、座標の代わりにリンクテキストを指定します: click me

<maplink text="click me" zoom="13" latitude="37.8103" longitude="-122.3995" />

<maplink> タグは <mapframe> と同じgeojsonを含む場合があります。

<maplink> と自動カウンター

Several groups of automatic counters

<maplink> はリンクを作成し、クリックするとフルスクリーンのマップを表示します。リンクテキストは text 属性で設定できます。この属性が無い場合は座標が表示されます(例: 12°18′0″N 45°36′0″E)。マップがGeoJSONを使用している場合は、 marker-symbol が魔法の ‑number‑letter の値に設定されます。このケースではそれぞれの ‑number はインクリメンタルなカウンター 1, 2, 3... で、そして ‑letterA...Z の値で置き換えられます。

GeoJSONにひとつ以上のカウンターがある場合、最初のものの値はリンクテキストとして表示されます。さらにオプションとして、エディタが同じページで同時に複数のカウンターを持つために接尾辞を付加するかもしれません。このように、 ‑number‑museum‑number‑bar とは異なるカウンターを持つでしょう。

各カウント用グループにはっきりした色を使うのは有意義でしょう。<maplink> 経由で追加された全てのデータは group 属性が使用されない限り、 <mapframe> で挿入された全てのマップ内で表示されます。

{{see
| name=Exploratorium | url=http://www.exploratorium.edu/
| lat=37.8013 | long=-122.3988
| content=A great museum
}}

上記は以下のように発展させられます

<maplink zoom=9 latitude=37.8013 longitude=-122.3988>
{
  "type": "Feature",
  "geometry": { "type": "Point", "coordinates": [-122.3988, 37.8013] },
  "properties": {
    "title": "Exploratorium",
    "marker-color": "228b22",
    "marker-symbol": "-number-see"
  }
}
</maplink>

zoomlatitude、そしてlongitude属性は、ポップアップ・マップの位置をコントロールします。リンクのテキストにはtextを使用してください(有効なウィキテキスト・マークアップであればどれでも使えます)。名前のあるグループに対しては、Use groupを使ってこのタグの内容を追加してください(下記参照)。


Markers

Complex map - marker, article link and image

Markers can be added to maps to denote a location. These features are added using the JSON format.

Note: These examples use maplink. The formatting for mapframe is the same, except that latitude=, longitude=, and zoom= must be specified (otherwise the map on the saved page will be centered on northern Africa).

<maplink text="Colorado State Capital with marker icon" latitude="39.73939" longitude="-104.98491" zoom="17">{"type": "Feature", "properties": { "marker-symbol": "", "marker-color": "46ea5f", "marker-size": "medium"}, "geometry": { "type": "Point", "coordinates": [-104.98485267162323, 39.73928364167763] }}</maplink>

Result: Colorado State Capital with marker icon

Markers can also contain information such as images and links to articles.

<maplink text="Colorado State Capital with a town hall marker, article link and image" latitude="39.73939" longitude="-104.98491" zoom="17">
{
      "type": "Feature",
      "properties": { "marker-symbol": "town-hall", "marker-color": "46ea5f", "marker-size": "medium", "title": "[[wikipedia:Colorado_State_Capitol|Colorado State Capital]]", "description": "[[File:Coloradocapitolhill2.JPG|150px]]"},
      "geometry": { "type": "Point", "coordinates": [-104.98485267162323, 39.73928364167763] }
}
</maplink>

Result (interact with marker to see result): Colorado State Capital with a town hall marker, article link and image

Wikidata IDs for OSM data can be used to highlight borders using the geoshape service.

<maplink text="State of Colorado, outlined" zoom=7 > { "type": "ExternalData", "service": "geoshape", "ids": "Q1261" } </maplink>

Result: State of Colorado, outlined

Wikidata IDs can be used to mask the entire map except a specified region.

<maplink text="State of Colorado, highlighted" zoom=7 > { "type": "ExternalData", "service": "geoshape", "ids": "Q1261", "service": "geomask" } </maplink>

Result: State of Colorado, highlighted

Markers can be numbered.

<maplink text="Colorado State Capital with a number marker" latitude="39.73939" longitude="-104.98491" zoom="17">{ "type": "Feature", "properties": {  "marker-color": "228b22", "marker-symbol": "-number"}, "geometry": { "type": "Point", "coordinates": [-104.98485267162323, 39.73928364167763] }}</maplink>

Result: Colorado State Capital with a number marker

Markers can use letters.

<maplink text="Colorado State Capital with a letter marker" latitude="39.73939" longitude="-104.98491" zoom="17">{ "type": "Feature", "properties": {  "marker-color": "508e33", "marker-symbol": "-letter"}, "geometry": { "type": "Point", "coordinates": [-104.98485267162323, 39.73928364167763] }}</maplink>

Result: Colorado State Capital with a letter marker

Add several map markers in different sizes using a feature collection.

<maplink text="Denver Amusements" latitude="39.74956567318853" longitude="-105.01247406005858" zoom="14"> {"type": "FeatureCollection", "features":  [{ "type": "Feature", "geometry": { "type": "Point", "coordinates": [-105.00768899917603, 39.74859230437501] }, "properties": { "title": "[[wikipedia:Pepsi_Center|Pepsi Center]]", "marker-color": "420617", "marker-symbol": "-letter-see", "marker-size":"small"} }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [-105.01238822937012, 39.7526011757416] }, "properties": { "title": "[[wikipedia:Downtown_Aquarium%2C_Denver|Downtown Aquarium Denver]]", "marker-color": "508e33", "marker-symbol": "-letter-see","marker-size":"medium", "description": "[[File:Denver-DTA.jpg|150px]]" } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [-105.01247406005858, 39.74956567318853] }, "properties": { "title": "[[wikipedia:Confluence_Park|Confluence Park]]", "marker-color": "0d2751", "marker-symbol": "-letter-see", "marker-size":"large" } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [-105.01646518707275, 39.74656303364532] }, "properties": { "title": "South Platte Bike Trail", "marker-color": "61b9e2", "marker-symbol": "-number-see", "marker-size":"medium" } },]}</maplink>

Result: Denver Amusements

Add groups of different colored map markers and different counters.

<maplink text="Add groups of different colored markers and different counters" width="350" height="350" zoom="13" longitude="-122.39902496337889" latitude="37.80151060070086"> {
"type": "FeatureCollection", "features":  [
    { "type": "Feature",
      "properties": {
        "marker-symbol": "-number",
        "marker-color": "302060" },
      "geometry": {
        "type": "Point",
        "coordinates": [ -122.41816520690917, 37.79097260220947 ] }},
    { "type": "Feature",
      "properties": {
        "marker-symbol": "-number",
        "marker-color": "302060"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [ -122.40786552429199, 37.799654055191525 ] }},
    {
      "type": "Feature",
      "properties": {
        "marker-symbol": "-number",
        "marker-color": "302060"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [ -122.40185737609865, 37.796262984039544 ] }},
    {
      "type": "Feature",
      "properties": {
        "marker-symbol": "-number",
        "marker-color": "302060"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [ -122.38743782043457, 37.80535070427755 ] }},
    {
      "type": "Feature",
      "properties": {
        "marker-symbol": "-number",
        "marker-color": "302060"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [ -122.38005638122557, 37.795449103799726 ] }},
    {
      "type": "Feature",
      "properties": {
        "marker-symbol": "-letter",
        "marker-color": "208020"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [ -122.40941047668457, 37.81850557172186 ] }},
    {
      "type": "Feature",
      "properties": {
        "marker-symbol": "-letter",
        "marker-color": "208020"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [ -122.40357398986815, 37.81280993744834 ] }},
    {
      "type": "Feature",
      "properties": {
        "marker-symbol": "-letter",
        "marker-color": "208020"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [ -122.39842414855956, 37.8071138637568 ] }},
    {
      "type": "Feature",
      "properties": {
        "marker-symbol": "-number-bar",
        "marker-color": "f01080"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [ -122.41181373596191, 37.78595317184089 ] }},
    {
      "type": "Feature",
      "properties": {
        "marker-symbol": "-number-bar",
        "marker-color": "f01080"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [ -122.39542007446289, 37.787674400057654 ] }},
    {
      "type": "Feature",
      "properties": {
        "marker-symbol": "-number-bar",
        "marker-color": "f01080"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [ -122.38649368286131, 37.78401144262929 ] }}
  ] }</maplink>

Result: Add groups of different colored markers and different counters

  • Map markers can use any color that has a RBG value (a quick internet search of "rgb color picker" will show several options).
  • Markers can be one of three different sizes: small, medium or large.
  • GeoJSON that is created elsewhere can be copied (in accordance with licensing and copyright restrictions) and then pasted into maplink (for example)
  • If you are creating maps on Wikivoyage, it might be a good idea to use Groups (see below).
  • If you want to learn more about adding external data to your map, see the External data section.

グループ

グループ機能はウィキボヤージュ・プロジェクトでのみ利用できます(VisualEditor チームのリクエストによる)

For use on the Wikivoyage project, there is a need to show a map whose data is defined somewhere else on the page. For example, there may be multiple points of interest (POI) defined with <maplink> tags, and one common map on the side of the page that shows them all.

グルーピングのコンセプトにより、編集者は複数の<mapframe> 及び <maplink> タグ間でデータを共有できます。.

デフォルトで、<mapframe> または <maplink> タグ内部のデータはそのひとつのタグ用にだけ表示され、他の箇所では表示されません。

If <mapframe> or <maplink> specify the group="..." attribute, the data inside those tags will be placed into a named group, together with all the other data by the same group name. As a result, any tags with the same group name will show the same map data, and each tag may incrementally add data to the group.

A tag may also show other groups, regardless if it belongs to a group or not, by specifying the show="..." attribute. Comma-separated multiple group names may be specified. The group name may only contain lower case English letters. This matrix shows what data will be shown for each tag.

 1 <maplink>                               -- shows 1
 2 <maplink group='food'>                  -- shows   2   4       8   10
 3 <maplink group='bar'  show='bar'>       -- shows     3           9
 4 <maplink group='food' show='bar'>       -- shows   2 3 4       8 9 10
 5 <maplink              show='bar'>       -- shows     3   5       9
 6 <maplink              show='food,bar'>  -- shows   2 3 4   6   8 9 10
 7 <mapframe>                              -- shows             7
 8 <mapframe group='food'>                 -- shows   2   4       8   10
 9 <mapframe group='bar'  show='bar'>      -- shows     3           9
10 <mapframe group='food' show='bar'>      -- shows   2 3 4       8 9 10
11 <mapframe              show='bar'>      -- shows     3           9    11
12 <mapframe              show='food,bar'> -- shows   2 3 4       8 9 10    12

外部データ

A geoshape of Alaska

GeoJSONを使ったポリゴン描画に加えて、よく知られた地理オブジェクトのアウトラインを、OpenStreetMapデータベース内でも同様にマークされている場合にそのウィキデータIDで取得することができます。例えば、アラスカに対応するウィキデータの項目はQ797であり、「external data」の出典を使ってマップ上に描画することができます。カンマ区切りで複数のIDが指定されている場合もあります。 興味深いエリアにマスクを掛けるには、「geoshape」サービスを利用します。これを反転して、それ以外の全てにマスクを掛けるには「geomask」サービスを使います。

ウィキデータのIDはOSMコミュニティにとって比較的新しいものです。IDを持つポリンゴンはまだ40,000件ほどです。これを増やすには、 https://www.openstreetmap.org/ にアクセスして wikidata タグをQの値とともに追加してください(簡単な方法はOSM wikiのKey:wikidataを参照してください)。 データは2日以内にKartographerで利用可能になります。詳しい使用方法はHelp:Extension:Kartographer/OSMHelp:Extension:Kartographer/OSMを見てください。
<mapframe text="A geoshape of Alaska" width=300 height=300 zoom=3 latitude=64.01 longitude=-152.58>
{
  "type": "ExternalData",
  "service": "geoshape",
  "ids": "Q797"
}
</mapframe>


GeoShapes via Wikidata Query

Governors of US states with their party affiliation

これはウィキデータのIDがよく知られている場合のシンプルなユースケースには役立ちますが、ウィキデータのクエリの結果としてIDの一覧を取得したいような場合があります。あるSPARQLのクエリは結果のID列にある全米の州の一覧を取得し、geoshapesサービスはそれぞれの州に幾何的なアウトラインを追加します。SPARQLクエリ結果内の他の全ての列は「プロパティ」オブジェクト内の値になります。「fill」列は州の色を変更します。「title」列は州知事の名前を表示し、「description」列には州の名前と知事の写真を表示するウィキのマークアップがあります。このクエリを編集するには、https://query.wikidata.org/#...のところの"#"記号の後にあるクエリ・パラメータをコピーします:

<mapframe latitude="52" longitude="-110" zoom="3" width="500" height="500" text="Governors of US states with their party affiliation">
{
  "type": "ExternalData",
  "service": "geoshape",
  "query": "
SELECT ?id ?head
  (SAMPLE(?img) as ?img) 
  (min(?partyId) as ?party) 
  (if(?party = '0', '#800000', if(?party = '1', '#000080', '#008000')) as ?fill)
  (concat('[[wikipedia:', substr(str(?link),31,500),  '{{!}}', ?headLabel, ']]') as ?title)
  (concat(?stateLabel, '\\n', '[[File:', substr(str(?img), 52, 500), '{{!}}200px]]') as ?description)
WHERE {  
  ?id wdt:P31 wd:Q35657 .
  ?id wdt:P6 ?head .
  ?head wdt:P102 ?party .
  BIND(if(?party = wd:Q29468, '0', if(?party = wd:Q29552, '1', '2')) as ?partyId) 
  SERVICE wikibase:label {
    bd:serviceParam wikibase:language 'en' .
    ?head rdfs:label ?headLabel .
    ?id rdfs:label ?stateLabel .
  }
  OPTIONAL {
    ?head wdt:P18 ?img .
  }
  ?link schema:about ?head .
  ?link schema:isPartOf <https://en.wikipedia.org/> .
} GROUP BY ?id ?head ?headLabel ?link ?stateLabel
"}
</mapframe>

コモンズのマップデータ

詳細情報: Help:Map DataHelp:Map Data

コモンズ上にストアされているマップデータは地図上に描画することができます。例, c:Data:Neighbourhoods/New York City.map:

<mapframe width=300 height=400 zoom=11 latitude=40.7920 longitude=-73.9751>
{
  "type": "ExternalData",
  "service": "page",
  "title": "Neighbourhoods/New York City.map"
}
</mapframe>


Combining multiple data types

Caderousse city wall

You can combine ExternalData, Feature, and FeatureCollection together in the same <mapframe> or <maplink> element:

<mapframe text="Caderousse city wall" width="300" height="300" zoom="15" latitude="44.10200" longitude="4.75600">
[
  {
    "type": "ExternalData",
    "service": "geoshape",
    "ids": "Q13518258",
    "properties": {
      "stroke": "#ffb100",
      "stroke-width": 6,
    }
  },
  {
    "type": "Feature",
    "geometry": { "type": "Point", "coordinates": [4.75566, 44.104498] },
    "properties": {
      "title": "Porte de Castellan"
    }
  },
  {
    "type": "Feature",
    "geometry": { "type": "Point", "coordinates": [4.75829, 44.10258] },
    "properties": {
      "title": "Porte Léon Roche"
    }
  }
]
</mapframe>

Map data from Commons can be combined with other types of data:

<mapframe width="300" height="300" zoom="12" latitude="40.782222" longitude="-73.965278">
[
  {
    "type": "ExternalData",
    "service": "page",
    "title": "Neighbourhoods/New York City.map"
  },
  {
    "type": "ExternalData",
    "service": "geoshape",
    "ids": "Q160409",
    "properties": {
      "fill": "#07c63e", "title": "Central Park"
    }
  },
  {
    "type": "Feature",
    "properties": {"title": "Roosevelt Island", "marker-color": "f01080"},
    "geometry": {
      "type": "Point",
      "coordinates": [
        -73.94511222839355,
        40.76734665426719
      ]
    }
  }
]
</mapframe>


Styling

Styling Wikidata ID elements

Interstate Highway I-696

For external data, you can also add styles and titles, using the properties keyword:

<mapframe text="Interstate Highway I-696" width="300" height="300" latitude="42.4883" longitude="-83.2297" zoom="9">
{
  "type": "ExternalData",
  "service": "geoline",
  "ids": "Q2108",
  "properties": {
    "title": "Highway I-696",
    "description": "[[File:I696-1988.JPG|200px]]",
    "stroke": "#ffb100",
    "stroke-width": 8
  }
}
</mapframe>

The main style keys are: "stroke" (color), "stroke-width", "stroke-opacity", "fill" (color), "fill-opacity".


Overlapping elements

Map elements that overlap are drawn in the order in which they are written in the code. For instance, if a map includes two lines that overlap, the line that is defined first will appear beneath the line that is defined second. The following examples show how this can affect the appearance of the map:

The code for the map above includes three elements, all of which use GeoJSON's "feature" functionality. The first feature is a "Polygon" - the red rectangle. This is followed by two "LineString" features. The yellow line is defined first, so it appears beneath the black line. Note that the hierarchy used to draw elements applies regardless of whether the data is raw GeoJSON or comes from a Wikidata ID or Commons data page.

The map below changes the order from that of the first example: the black line is defined first and is thus moved to the bottom of the stack:

レンダリングのオプション

以下の表は<mapframe> の地図をウィキページに表示する際にどのように整形できるかを示しています。表内には2つのカラムがあります: 最初のものは<mapframe> タグ経由でのインタラクティブな地図を示し、2つめは同じオプションのサンプル画像のレンダリングを示しています。

オプション <mapframe> のレンダリング 画像をレンダリング
  • Format: frame
  • Alignment: undefined
... text text text
text text text ...
... text text text
Example en.svg
text text text ...
  • Format: frame
  • Alignment: none
Not supported, see タスク T157502. ... text text text
Example en.svg
text text text ...
  • Format: frame
  • Alignment: left
... text text text
text text text ...
... text text text
Example en.svg
text text text ...
  • Format: frame
  • Alignment: center
... text text text
text text text ...
... text text text
Example en.svg
text text text ...
  • Format: frame
  • Alignment: right
... text text text
text text text ...
... text text text
Example en.svg
text text text ...
  • Format: frameless
  • Alignment: undefined
... text text text text text text ...

Inconsistent, see タスク T157640.
... text text text Example en.svg text text text ...
  • Format: frameless
  • Alignment: none
Not supported, see タスク T157502. ... text text text
Example en.svg
text text text ...
  • Format: frameless
  • Alignment: left
... text text text text text text ... ... text text text
Example en.svg
text text text ...
  • Format: frameless
  • Alignment: center
... text text text text text text ... ... text text text
Example en.svg
text text text ...
  • Format: frameless
  • Alignment: right
... text text text text text text ... ... text text text
Example en.svg
text text text ...

Map languages

Map labels will try to use the language of the wiki where the embedded map is displayed. If that language is not available, then the map will use fallback language as described.

  1. Look for value in the requested language
  2. Look for value in a language (or languages) that are specifically defined as fallback languages
  3. Look for a transliterated value
  4. Look for label in the local language
  5. If no value is found, display no label.

You can specify the language to use for labels by adding the lang= followed by the desired language code. e.g. lang="ja" to display labels in Japanese (if available).

<maplink text="Brussels, Belgium" width="250" height="250" zoom=13 latitude=50.85 longitude=4.35 lang="ja"/>

Result: Brussels, Belgium

If you wish to use the language local to an area you can use lang=local. This shows map labels in the languages of the area mapped (essentially opting out of internationalization). This post gives more guidance about when, and why, you might wish to user lang="local"—and generally explains how OpenStreetMap multilingual data works.

Without the lang= attribute, maps will display in the language of the wiki in which they appear.

Map language fallbacks

Initially these fallbacks follow those found in MediaWiki. The language fallbacks for Maps are stored in fallbacks.json and can be made different than the Mediawiki settings. Individual Wikimedia projects can request a change to this fallback process in Phabricator. More Technical information can be found in T192701.

Maps use map data, including map label data for all languages, from the open-source mapping project OpenStreetMap. If the map you want to display doesn’t offer labels in the desired language, you can add labels in that language by adding them to OpenStreetMap. To get you started, there is an OpenStreetMap Beginners’ Guide, and guidance about naming conventions.

A community can decide to change its language fallbacks

Read all about changing your language's fallbacks on the Map Improvements project page.

See also