Help:Extension:Kartographer/vi

The extension allows you to create interactive and static maps on Wikimedia wiki pages. This page is an exhaustive reference for using Kartographer, including the many options available when using the tags, which embeds maps directly in wiki pages, and , which creates links to full-page interactive maps, and touches on the elements of GeoJSON supported by Kartographer. You'll find a wealth of examples at the bottom of the page.

For a less technical quick start, check out. For help with Kartographer in the VisualEditor, check out. For help with Kartographer and OpenStreetMaps, check out.

Basic map syntax
To place a map or a map link directly on a wiki page, Kartographer offers two tags:, which embeds a map inline that links to a full-screen interactive map, and , which creates rich text (with an optional marker) that links to a full-screen interactive map.

Some wikis wrap these tags in templates, such as Mapbox and Mapframe. Consult your local wiki's Kartographer help page to see if your wiki has templates -- or use the tags directly with this document as your guide.



The tag embeds a map in a wiki page. The tag must be either empty or contain GeoJSON. See below for more resources on writing GeoJSON.

Thay đổi $mapframe thành $maplink để tạo liên kết đến bản đồ đầy đủ:

* = required

Self-closing tags
When not using GeoJSON, you can use and  as self-closing, standalone tags.

Self-closing:

Enclosing GeoJSON:

GeoJSON
 { "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        ]      }    }  ] }

The and  tags can either be empty or contain valid GeoJSON, to annotate the map with markers, draw shapes, and apply a mask area.

For more detail on this broad topic, you can read this helpful introduction to GeoJSON as well as the full GeoJSON specification.

Markers
Maps that use GeoJSON may contain one or more markers to point out special locations. These markers are set using marker-specific keywords under the "properties" level in GeoJSON.

Kartographer hỗ trợ đặc tả simplestyle với các hình tượng Maki (được phát hành vào phạm vi công cộng theo Creative Commons Zêro). See the full list of supported icons.

Kết quả:

Auto-counters
Multiple markers on a map can be grouped and named using patterns and counters. Below is a summary of styling attributes for items placed on a map using GeoJSON. For more information, see the simplestyle spec.

For a rich variety of examples, see the Examples section.

Shapes
GeoJSON allows you to add lines and geometric areas as annotations to your map. You can define simple inline shapes or import them from external databases.

Inline
GeoJSON allows you to draw points (markers), simple lines and geometric areas as part of your map definition. The following examples include the "geometry" attribute of GeoJSON objects inside a object. Consult the full GeoJSON specification for more information.

External data
 { "type": "ExternalData", "service": "geoshape", "ids": "Q797" }

GeoJSON allows you to obtain outlines of geographical objects from external sources using the "type" attribute with the value "ExternalData".

Maps can draw from well-known geographical objects in the OpenStreetMap database by using their Wikidata ID; they can also come from Wikidata SPARQL queries or from shapes in Wikimedia Commons (.map files).

Additionally, maps can link directly to raw GeoJSON stored on Wikimedia Commons: see for details.

Objects can be rendered using shape data from an external source in three different ways:


 * - Draws a simple line.
 * - Draws a polygon with a shaded interior.
 * - Draws a polygon and shades everything outside the polygon.

Shapes via Wikidata ID
 { "type": "ExternalData", "service": "geoshape", "ids": "Q34713,Q701153" }

Định danh Wikidata có vẻ mới mẻ đối với cộng đồng OSM. Hiện nay bản đồ đã gắn định danh vào khoảng [$url 1,9 triệu đối tượng]. Để bổ sung thêm định danh, đi đến https://www.openstreetmap.org/ và gắn thẻ $wikidata có giá trị $q (xem Key:wikidata tại wiki OSM để biết một cách dễ hơn để gắn thẻ). As of early 2022 there are roughly 1.9 million elements with Wikidata IDs. You can add your own at https://www.openstreetmap.org/ -- be sure to add the  tag and the corresponding   value. The data typically becomes available to Kartographer within two days. Learn more at the OSM wiki.

GeoShape qua Truy vấn Wikidata
 { "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(, ?headLabel, ) as ?title) (concat(?stateLabel, '\\n', '') 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  .} GROUP BY ?id ?head ?headLabel ?link ?stateLabel" } Instead of a Wikidata Item ID, a map can also derive geoshapes from a Wikidata query in SPARQL. (You can create SPARQL queries using the Query Builder.)

For detailed instructions, see.

Dữ liệu bản đồ từ Commons
 { "type": "ExternalData", "service": "page", "title": "Neighbourhoods/New York City.map" } Map data in GeoJSON that is stored on Commons can be drawn on the map.


 * Thông tin thêm 

Mask layer
 { "type": "ExternalData", "service": "geomask", "ids": "Q34713", "properties": { "fill": "#555555", "fill-opacity": 0.5, "stroke": "#000000", "stroke-width": 1, "stroke-opacity": 1 } }

A mask is just an inside-out shape, specified in the same way but with the exterior of the shape shaded.

Kết hợp nhiều kiểu dữ liệu
You can combine ExternalData, Feature, and FeatureCollection objects together in the same or  element, for example to highlight features with titles and descriptions on top of externally sourced objects.

Map data from Commons can be combined with other types of data by grouping them in parallel blocks of GeoJSON. See #Mixed types for various combinations.

Styling shapes
 { "type": "ExternalData", "service": "geoline", "ids": "Q2108", "properties": { "title": "Highway I-696", "description": "", "stroke": "#ffb100", "stroke-width": 8 } }

In addition to the marker styling above, lines and areas support these simplestyle properties:

Phần tử phủ lên nhau
Map elements that overlap are drawn in the order they appear in the code. If a map includes two lines that overlap, the line defined first will appear beneath the line defined next. This applies to any elements defined in the code that draw on the map.

Examples
 { "type": "FeatureCollection", "features": [ { "type": "Feature", "properties": {"fill": "#ff0000","fill-opacity": 0.7,"stroke-width": 0}, "geometry": { "type": "Polygon", "coordinates": [ [ [ 77.926025390625, -25.150257104114733 ], [ 80.14251708984374, -25.150257104114733 ], [ 80.14251708984374, -24.43714786161562 ], [ 77.926025390625, -24.43714786161562 ], [ 77.926025390625, -25.150257104114733 ] ] ] } }, { "type": "Feature", "properties": {"stroke": "#fffa00","stroke-width": 5}, "geometry": { "type": "LineString", "coordinates": [ [ 77.926025390625, -25.150257104114733 ], [ 80.14251708984374, -24.43714786161562 ] ] } }, { "type": "Feature", "properties": {"stroke": "#000000","stroke-width": 5}, "geometry": { "type": "LineString", "coordinates": [ [ 77.926025390625, -24.43714786161562 ], [ 80.14251708984374, -25.150257104114733 ] ] } } ] }

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:

 { "type": "FeatureCollection", "features": [ { "type": "Feature", "properties": {"stroke": "#000000","stroke-width": 5}, "geometry": { "type": "LineString", "coordinates": [ [ 77.926025390625, -24.43714786161562 ], [ 80.14251708984374, -25.150257104114733 ] ] } }, { "type": "Feature", "properties": {"fill": "#ff0000","fill-opacity": 0.7,"stroke-width": 0}, "geometry": { "type": "Polygon", "coordinates": [ [ [  77.926025390625,  -25.150257104114733  ],  [  80.14251708984374,  -25.150257104114733  ],  [  80.14251708984374,  -24.43714786161562  ],  [  77.926025390625,  -24.43714786161562  ],  [  77.926025390625,  -25.150257104114733  ]  ]  ]  } }, { "type": "Feature", "properties": {"stroke": "#fffa00","stroke-width": 5}, "geometry": { "type": "LineString", "coordinates": [ [ 77.926025390625, -25.150257104114733 ], [ 80.14251708984374, -24.43714786161562 ] ] } } ] }

Reference

 * Full GeoJSON specification (RFC7946)
 * GeoJSON on English Wikipedia
 * simplestyle spec used by Kartographer
 * Maki icon set used by Kartographer

Guides

 * HERE.com's intro to GeoJSON
 * A guide to the GeoJSON.io editor

Editors and tools

 * GeoJSON.io editor
 * Vector.rocks editor
 * GeoJSON linter to validate your GeoJSON

Nhóm
Dự án Wikivoyage cần hiển thị dữ liệu trên bản đồ được định rõ ở phần khác trên cùng trang. Ví dụ bản đồ có nhiều địa điểm quan tâm (POI) được định rõ dùng thẻ $maplink, cũng như một bản đồ chung ở bên phải của trang hiển thị tất cả mọi POI. There may be multiple points of interest (POI) defined with tags, all of which appear on a single common map on the side of the page. (See an example using the city of Salzburg.)

Chức năng nhóm cho phép trang chia sẻ dữ liệu giữa nhiều thẻ $mapframe và $maplink.

Theo mặc định, dữ liệu trong thẻ $mapframe hoặc $maplink chỉ được hiển thị ứng với chính thẻ đó và không được hiển thị ở nơi khác.

Nếu $mapframe hoặc $maplink định rõ thuộc tính $group, các dữ liệu trong các thẻ này sẽ được nhóm lại cùng với tất cả các dữ liệu khác cùng tên nhóm. Thành thử thẻ nào có cùng tên nhóm sẽ hiển thị cùng dữ liệu trên bản đồ, và những thẻ về sau có thể tặng thêm dữ liệu vào nhóm.

Each tag on a Wikivoyage tag displays an embedded map displaying the groups specified in its tag.

Một thẻ cũng có thể hiển thị nhóm khác, không kể nó trực thuộc một nhóm hay không, bằng cách định rõ thuộc tính. Có thể định rõ nhiều tên nhóm trong một danh sách được phân tích bằng dấu phẩy. Một tên nhóm chỉ có thể chứa chữ thường tiếng Anh (tức không có dấu hoặc chữ đ như trong tiếng Việt). Bảng sau cho biết thẻ nào sẽ hiển thị dữ liệu nào.

Example:

Languages and fallbacks
Kartographer maps get their labels from the open-source mapping project OpenStreetMap (https://www.openstreetmap.org/). By default, Kartographer tries to display map labels in the language of the wiki in which the embedded map is displayed. If that language is not available, then the map will use the given wiki's configured fallback language, then the local language in the map region specified in the Kartographer map. If none of these are available, Kartographer will display no label.

You can specify the language to use for labels with the  attribute and by setting its value to the desired language code Example:   will display labels in Japanese, if available.

To use the language local to the map area, specify. For more information about using the local language in your labels, and about OpenStreetMap multilingual data in general, read this post. Kartographer maps get their data, including map label data in all available 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 always add labels in that language by adding them yourself to OpenStreetMap. Note that country and city names are drawn from label nodes in OpenStreetMap, not from the data attached to boundary relations. To get started, see the OpenStreetMap Beginners’ Guide and these best practices in naming conventions.

Simple
 { "type": "Feature", "geometry": { "type": "Point", "coordinates": [-122.3988, 37.8013] }, "properties": { "title": "Exploratorium", "description": "", "marker-symbol": "museum", "marker-size": "large", "marker-color": "0050d0" } }

Groups of automatic counters
 { "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        ]      }    }  ] }

Wikidata query
 { "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(, ?headLabel, ) as ?title) (concat(?stateLabel, '\\n', '') 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  .} GROUP BY ?id ?head ?headLabel ?link ?stateLabel" }

Map data from Commons
 { "type": "ExternalData", "service": "page", "title": "Neighbourhoods/New York City.map" }

Mixed types
<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" } } ]

Mixed types with markers
<mapframe width="300" height="300" zoom="12" longitude="-73.965278" latitude="40.782222"> [ {    "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      ]    }  } ]

Rendering options
The following table shows how a map can be formatted for display on a wiki page. The table contains two columns: the first shows an interactive map via the tag, and the second shows the rendering of an example image with the same options.

Use the width value  in order to make the map take up the full width of the page. <mapframe width="full" height="200" zoom="13" longitude="-122.39953994750977" latitude="37.81032643553478"> <mapframe width="full" height="200" zoom="13" longitude="-122.39953994750977" latitude="37.81032643553478" frameless>

Styling
<mapframe text="Interstate Highway I-696" width="300" height="300" longitude="-83.2297" latitude="42.4883" zoom="9"> { "type": "ExternalData", "service": "geoline", "ids": "Q2108", "properties": { "title": "Highway I-696", "description": "", "stroke": "#ffb100", "stroke-width": 8 } }

Xem thêm

 * Special:MyLanguage/Help:VisualEditor/Maps - How to add and edit maps with the visual editor
 * Using Kartographer with OpenStreetMap
 * 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
 * Hướng dẫn Kartographer dành cho nhà phát triển
 * Điều khoản Sử dụng Bản đồ
 * Điều khoản Sử dụng Bản đồ