From Wikipedia!
Jump to navigation Jump to search
This page contains changes which are not marked for translation.

This page documents how to use the Kartographer extension and its <mapframe> and <maplink> tags.

Getting started[edit]

Downtown San Francisco

This code will insert a simple interactive map (like what you see on the right), with the ability to maximize it by either double-clicking the map or clicking the icon in the right corner.

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

You may use the align parameter to override default alignment to left, right, or center.

<mapframe> usage[edit]

San Francisco museums

The content of the <mapframe> tag has to be either empty or a valid GeoJSON with styling, as produced by a GeoJSON editor. Kartographer supports the simplestyle specification with Maki icons (Licensed under Creative Commons Zero).

<mapframe text="San Francisco museums" width=350 height=350 zoom=13 longitude=-122.3988 latitude=37.8013>
  "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"


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.


Changing <mapframe> to <maplink> creates a link to a full screen map: 37°48′37″N 122°23′58″W

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

<maplink> also accepts an extra parameter "text" to specify link text instead of the coordinates: click me

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

The <maplink> tag may contain the same geojson as <mapframe>.

<maplink> and auto-counters[edit]

Several groups of automatic counters

<maplink> creates a link that shows a full screen map when clicked. The link text can be set with the text attribute. Without this attribute, the coordinates will be shown (example: 12°18′0″N 45°36′0″E). If a map uses GeoJSON, the marker-symbol is set to the magic ‑number or ‑letter value. In this case each ‑number will be replaced with an incremental counter 1, 2, 3..., and ‑letter with A...Z values.

If GeoJSON has more than one counter, the value of the first one will be shown as the link text. Optionally, editors may add a suffix to have multiple counters on the page at the same time. This way ‑number‑museum will have different counter from ‑number‑bar.

It would make sense to use a distinct color for each counting group. All data added via <maplink> will also be shown in all maps inserted with <mapframe>, unless the group attribute is used.

| name=Exploratorium | url=
| lat=37.8013 | long=-122.3988
| content=A great museum

could be expanded into

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

The attributes zoom, latitude, and longitude control the location of the popup map. Use text for the text of the link (could be any valid wikitext markup). Use group to add the contents of this tag to the named group (see below).


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.

The grouping concept allows editors to share data between multiple <mapframe> and <maplink> tags.

By default, the data inside the <mapframe> or <maplink> tag is shown only for that one tag, and will not be shown anywhere else.

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

External data[edit]


In addition to drawing polygons using GeoJSON, you may also get outlines of the well known geographical objects by their Wikidata ID if they are marked as such in the OpenStreetMap database. For example, Wikidata item for Alaska is Q797, and we can draw it on the map by using "external data" reference. More than one ID may be specified separated by a comma.

Note: Wikidata IDs are relatively new to the OSM community. There are only about 40,000 polygons with IDs. To add more, visit and add Wikidata tag with the Q value. The data should become available to Kartographer within 2 days.

<mapframe text="Alaska" width=300 height=300 zoom=3 longitude=-152.58 latitude=64.01>
  "type": "ExternalData",
  "service": "geoshape",
  "ids": "Q797"

GeoShape by Wikidata ID with properties[edit]

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>
  "type": "ExternalData",
  "service": "geoline",
  "ids": "Q2108",
  "properties": {
    "title": "Highway I-696",
    "description": "[[File:I696-1988.JPG|200px]]",
    "stroke": "#ffb100",
    "stroke-width": 8

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

Combining multiple data types[edit]

Caderousse city wall

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

<mapframe text="Caderousse city wall" width="300" height="300" zoom="15" longitude="4.75600" latitude="44.10200">
    "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"

GeoShapes via Wikidata Query[edit]

<mapframe>: Couldn't parse JSON: Control character error, possibly incorrectly encoded

While this helps with the simple use cases when the Wikidata ID is well known, sometimes you may want to get a list of IDs as a result of a Wikidata query. A SPARQL query gets a list of all US states in the ID column of the result, and geoshapes service adds the geometrical outlines for each state. All other columns in the SPARQL query result become values in the "properties" object. The "fill" column changes the color of the state. The "title" column shows state governor's name, and "description" has wiki markup to show the state name and the governor's picture. To edit this query, copy the query parameter after the "#" symbol at

<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)
  ?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 .
    ?head wdt:P18 ?img .
  ?link schema:about ?head .
  ?link schema:isPartOf <> .
} GROUP BY ?id ?head ?headLabel ?link ?stateLabel

See also[edit]

PD Help Page