Help:Extension:Kartographer

Nota: Ao editar esta página, você concorda em publicar a sua contribuição no âmbito da licença CC0. Veja as páginas de ajuda do domínio público para mais informações. Edit · Translate

Esta página documenta o uso da extensão Kartorapher, bem como o de suas marcações <mapframe> e <maplink>.

Introdução

Este código inserirá um mapa interativo e simples (como o que se vê à direita), com a capacidade de maximizá-lo com um clique duplo no mapa ou um só clique no ícone do canto direito.

• On Wikivoyage and test2wiki, this embedded map is interactive. A single-click is used to pan the map; double-clicking (or clicking the icon in the right corner) opens a full-screen map, which is also interactive.
• On Wikipedia and other Wikimedia wikis, this embedded maps is static. Single-clicking opens a full-screen map, which is interactive.

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

O parâmetro align substitui o alinhamento padrão por à esquerda, à direita, ou ao centro. The attribute zoom allows for zoom levels between 0 and 19. Zero is the furthest out, 19 the furthest in.

Uso da <mapframe>

O conteúdo da marcação <mapframe>, senão vazio, deve estar estilizado com um código GeoJSON válido, como o produzido por algum editor de GeoJSON. O Kartographer é compatível com ícones Maki (sem licenças) pela especificação simplestyle.

<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.

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

<maplink>

A substituição de <mapframe> por <maplink> cria uma ligação para um mapa em tela cheia:

37°48′37″N 122°23′58″W

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

<maplink> também aceita o parâmetro “text” para especificar um texto no local das coordenadas:

click me

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

A marcação <maplink> pode conter o mesmo código GeoJSON que <mapframe>.

<maplink> e contadores automáticos

<maplink> cria uma ligação que exibe um mapa em tela cheia quando clicada. O texto da ligação pode ser definido pelo atributo text. Sem ele, as coordenadas são exibidas (por exemplo, 12°18′0″N 45°36′0″E). Caso um mapa use GeoJSON, marker-symbol é definido como o valor mágico ‑number ou ‑letter. Neste caso, cada ‑number será substituído por um contador de adição 1, 2, 3..., e ‑letter por valores A...Z.

Caso o GeoJSON tenha mais de um contador, o valor do primeiro será exibido como o texto da ligação. Opcionalmente, é possível adicionar um sufixo para que possam existir múltiplos contadores ao mesmo tempo na página. Desta maneira, ‑number‑museum possuirá um contador diferente de ‑number‑bar.

Faria sentido usar uma cor para cada grupo de contagem. Todos os dados adicionados por <maplink> também serão exibidos nos mapas inseridos com <mapframe>, a menos que o atributo group seja usado.

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

poderia expandir-se em

<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>

Os atributos zoom, latitude e longitude controlam a localização do mapa pop-up. Use $alt para o texto contextual da ligação. Use text para o texto da ligação (pode ser qualquer wikitexto válido). Use group para adicionar os conteúdos desta marcação ao grupo nomeado (ver abaixo).

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.

Esses exemplos usam maplink. A formatação para mapframe é a mesma, exceto nessa latitude=, longitude=, e zoom= deve ser especificado (caso contrário, o mapa na página salva será centralizado no norte da África).

<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.

Grupos

O recurso de agrupamento está disponível apenas no Wikivoyage (por solicitação da equipe do Editor Visual)

Para uso no projeto Wikivoyage, é necessária a exibição de um mapa com seus dados definidos em algum lugar da página. Por exemplo, podem haver múltiplos pontos de interesse definidos com a marcação <maplink>, e um mapa no lado da página, exibindo-os.

O conceito de agrupamento permite que editores compartilhem dados entre várias marcações <mapframe> e <maplink>.

Por padrão, os dados das marcações <mapframe> e <maplink> são exibidos apenas nelas e nenhum outro lugar.

Se <mapframe> ou <maplink> especificarem o atributo group="...", os dados destas serão alocados num grupo nomeado, juntos com os outros dados pelo mesmo grupo. Como resultado, quaisquer marcações com o mesmo nome do grupo exibirão os mesmos dados de mapeamento, e cada uma poderá adicionar dados ao grupo.

Uma marcação, já pertencendo ou não a um grupo, poderá também exibir outros grupos especificando o atributo show="...". Nomes de grupo separados por vírgulas poderão ser especificados. O nome do grupo apenas pode conter letras minúsculas disponíveis na língua inglesa. Essa matriz mostra quais dados serão exibidos para cada marcação.

 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

Dados externos

Além de desenhar polígonos usando o GeoJSON, experimente também obter o contorno de objetos bem conhecidos pelos seus IDs do Wikidata se forem marcados no banco de dados do Open Street Map. Por exemplo, o item do Wikidata para o Alasca é Q797, e podemos contornar ele no mapa usando a referência de “dados externos”. Mais IDs podem ser especificados por vírgulas. Para criar uma máscara sobre áreas de interesse, use o serviço “geoshape”. Para inverter, ou seja, criar uma máscara fora da seleção, use o serviço “geomask”.

IDs do Wikidata são relativamente novos na comunidade do OSM. Há apenas 40 000 polígonos com IDs. Para adicionar mais, visite https://www.openstreetmap.org/ e adicione a etiqueta wikidata com o valor Q (veja Key:wikidata no OSM wiki para uma maneira mais fácil de fazer isso). Os dados devem se tornar disponíveis no Kartographer em dentro de 2 dias. Para instruções detalhadas, veja Help: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

Enquanto isso ajuda em casos de uso simples quando o ID do Wikidata é conhecido, às vezes será necessária uma lista de IDs como resultado de um query no Wikidata. Um query SPARQL obtém uma lista de todos os estados dos EUA na coluna para o ID do resultado, e o serviço de formas geográficas adiciona contornos geométricos para cada estado. Todas as outras colunas no resultado tornam-se valores no objeto “properties”. A coluna “fill” altera a cor do estado. A coluna “title” mostra o nome do governador do estado, e a “description” possui marcação wiki para mostrar o nome do estado e a imagem de seu governador. Para editar esse query, copie seu parâmetro após o símbolo “#” em 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>

Dados de mapas do Commons

Informações adicionais: Help:Map Data

Atenção:

The map loader does not currently support chained ExternalData calls. If a resource of type ExternalData is fetched that itself relies on ExternalData references, loading will fail. See tarefa T155927 and tarefa T193458.

Dados de mapa armazenados no Commons podem ser desenhados no mapa. Por exemplo, 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

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

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:

Opções de renderização

A seguinte tabela mostra como um <mapframe> pode ter sua exibição formatada numa página wiki. A tabela contém duas colunas: a primeira mostra um mapa interativo usando a tag <mapframe>, e a segunda mostra a renderização de uma imagem de exemplo com as mesmas opções da primeira coluna.

Opções	Renderização do <mapframe>	Renderização da imagem
Format: frame Alignment: undefined	... text text text text text text ...	... text text text text text text ...
Format: frame Alignment: none	Not supported, see tarefa T157502.	... text text text text text text ...
Format: frame Alignment: left	... text text text text text text ...	... text text text text text text ...
Format: frame Alignment: center	... text text text text text text ...	... text text text text text text ...
Format: frame Alignment: right	... text text text text text text ...	... text text text text text text ...
Format: frameless Alignment: undefined	... text text text text text text ... Inconsistent, see tarefa T157640.	... text text text text text text ...
Format: frameless Alignment: none	Not supported, see tarefa T157502.	... text text text text text text ...
Format: frameless Alignment: left	... text text text text text text ...	... text text text text text text ...
Format: frameless Alignment: center	... text text text text text text ...	... text text text text text text ...
Format: frameless Alignment: right	... text text text text text text ...	... text text text 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

• Terms of Use for Maps
• Help:VisualEditor/Maps - How to add and edit maps with the visual editor
• Information on using OSM objects in maps
• Maps project (2015-2017) - Documentation on the Wikimedia engineering activity from the Discovery team from 2015 to 2017
• Map improvements 2018 - Documentation on the Wikimedia engineering activity from the Collaboration team in 2018
• Kartographer Developer guide