Alex: Created page with "This page provides a guide on how to create interactive maps using manually-defined '''GeoJSON'''. If you would like to use the easier, faster method of creating maps, see Template:Map. This was created using the Cartography project and uses a modified [https://www.mediawiki.org/wiki/Help:Extension:Kartographer Kartographer extension]. ==Starting out== ===Tools=== Finding the coordinates of a specific map square is most easily done using [https://m..."

2024-10-16T14:03:58Z

Created page with "This page provides a guide on how to create interactive maps using manually-defined '''GeoJSON'''. If you would like to use the easier, faster method of creating maps, see Template:Map. This was created using the Cartography project and uses a modified [https://www.mediawiki.org/wiki/Help:Extension:Kartographer Kartographer extension]. ==Starting out== ===Tools=== Finding the coordinates of a specific map square is most easily done using [https://m..."

New page

This page provides a guide on how to create interactive maps using manually-defined '''GeoJSON'''. If you would like to use the easier, faster method of creating maps, see [[Template:Map]]. This was created using the [[RuneScape:Map|Cartography project]] and uses a modified [https://www.mediawiki.org/wiki/Help:Extension:Kartographer Kartographer extension].

==Starting out==
===Tools===
Finding the coordinates of a specific map square is most easily done using [https://mejrs.github.io/osrs mejrs.github.io/osrs], a variant of GeoJSON.io for OSRS made and maintained by [[User:Mejrs|Mejrs]]. A list of <code>mapID</code>s can be found at [[RuneScape:Map/mapIDs]]. Hovering over a tile on the Mejrs map will display its coordinates in the upper-left-hand corner.

===GeoJSON markup===
All markings on the map use the GeoJSON standard. The GeoJSON should be placed inside <code>mapframe</code> tags, or alternatively inside <code>maplink</code> tags to render a link to a map.
{|
|<syntaxhighlight lang="xml">
<mapframe>

</mapframe>
</syntaxhighlight>
|}
To specify the size of the map, and which part of the full world map is to be displayed, parameters can be added to the <code>mapframe</code> tag which are largely identical to those used in the {{T|Map}} template:
{|
|<syntaxhighlight lang="xml">
<mapframe width=300 height=300 zoom=1 mapid=0 plane=0 x=3200 y=3175 text="Swamp">

</mapframe>
</syntaxhighlight>
|}

All markers are placed inside a 'FeatureCollection', like so:
{|
|<syntaxhighlight lang="json">
{
"type": "FeatureCollection",
"features": [
// All features are placed here
]
}
</syntaxhighlight>
|}
Various features are described in the section to follow, any number of which can be placed inside a FeatureCollection to populate a map. For instance, if we would like to place a pin on the map, simply copy the markup for a pin feature directly below and paste it inside the FeatureCollection:
{|
|<syntaxhighlight lang="html" highlight="5-18">
<mapframe width=300 height=300 zoom=1 mapid=0 plane=0 x=3200 y=3175 text="Swamp">
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"icon": "cyanPin",
"mapID": 0,
"plane": 0,
},
"geometry": {
"type": "Point",
"coordinates": [
3218, 3178
]
}
},
]
}
</mapframe>
</syntaxhighlight>
|}

==Points==
===Single pin===
Icons that may be used are <code>greenPin</code>, <code>redPin</code>, <code>bluePin</code>, <code>cyanPin</code>, <code>magentaPin</code>, <code>yellowPin</code> or <code>greyPin</code>.
{| style="width:100%; max-width:750px;"
|- style="vertical-align:top;"
|
<syntaxhighlight lang="json">
{
"type": "Feature",
"properties": {
"icon": "cyanPin",
"mapID": 0,
"plane": 0,
},
"geometry": {
"type": "Point",
"coordinates": [
3218, 3178
]
}
},
</syntaxhighlight>
| style="padding-top: 0.5em;" |
<mapframe width=300 height=300 zoom=3 mapid=0 plane=0 x=3218 y=3178>
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"icon": "cyanPin",
"mapID": 0,
"plane": 0,
},
"geometry": {
"type": "Point",
"coordinates": [
3218, 3178
]
}
},
]
}
</mapframe>
|-
|}

===Multiple pins===
{| style="width:100%; max-width:750px;"
|- style="vertical-align:top;"
|
<syntaxhighlight lang="json">
{
"type": "Feature",
"properties": {
"icon": "cyanPin",
"mapID": 0,
"plane": 0,
},
"geometry": {
"type": "MultiPoint",
"coordinates": [
[3214, 3171],
[3219, 3190],
[3223, 3179],
[3220, 3173],
[3218, 3164],
[3225, 3173],
[3213, 3176]
]
}
},
</syntaxhighlight>
| style="padding-top: 0.5em;" |
<mapframe width=300 height=300 zoom=3 mapid=0 plane=0 x=3218 y=3178>
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"icon": "cyanPin",
"mapID": 0,
"plane": 0,
},
"geometry": {
"type": "MultiPoint",
"coordinates": [
[3214, 3171],
[3219, 3190],
[3223, 3179],
[3220, 3173],
[3218, 3164],
[3225, 3173],
[3213, 3176]
]
}
},
]
}
</mapframe>
|-
|}

===Image===
Any image uploaded to the wiki can be used as an icon. Make sure to replace every whitespace character in the filename with an underscore: use <code>[[File:Yes check.svg]] Chocolate_duck.png</code> rather than <code>[[File:X mark.svg]] Chocolate duck.png</code> for instance. The <code>File:</code> prefix does not need to be included.
{| style="width:100%; max-width:750px;"
|- style="vertical-align:top;"
|
<syntaxhighlight lang="json">
{
"type": "Feature",
"properties": {
"iconWikiLink": "Yellow_arrow_map_marker.png",
"iconSize": [15,15],
"iconAnchor": [7,15],
"mapID": 0,
"plane": 0,
},
"geometry": {
"type": "Point",
"coordinates": [
1370, 3627
]
}
},
</syntaxhighlight>
| style="padding-top: 0.5em;" |
<mapframe width=300 height=300 zoom=3 mapid=0 plane=0 x=1368 y=3633>
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"iconWikiLink": "Yellow_arrow_map_marker.png",
"iconSize": [15,15],
"iconAnchor": [7,15],
"mapID": 0,
"plane": 0,
},
"geometry": {
"type": "Point",
"coordinates": [
1370, 3627
]
}
},
]
}
</mapframe>
|-
|}

===Multiple images===
{| style="width:100%; max-width:750px;"
|- style="vertical-align:top;"
|
<syntaxhighlight lang="json">
{
"type": "Feature",
"properties": {
"iconWikiLink": "Chocolate_duck.png",
"iconSize": [60,47],
"iconAnchor": [30,23],
"mapID": 0,
"plane": 0,
},
"geometry": {
"type": "MultiPoint",
"coordinates": [
[1377, 3644],
[1355, 3631],
[1381, 3622]
]
}
},
</syntaxhighlight>
| style="padding-top: 0.5em;" |
<mapframe width=300 height=300 zoom=3 mapid=0 plane=0 x=1368 y=3633>
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"iconWikiLink": "Chocolate_duck.png",
"iconSize": [60,47],
"iconAnchor": [30,23],
"mapID": 0,
"plane": 0,
},
"geometry": {
"type": "MultiPoint",
"coordinates": [
[1377, 3644],
[1355, 3631],
[1381, 3622]
]
}
},
]
}
</mapframe>
|-
|}

===Label===
{| style="width:100%; max-width:750px;"
|- style="vertical-align:top;"
|
<syntaxhighlight lang="json">
{
"type": "Feature",
"properties": {
"shape": "Text",
"label": "Romeo",
"class": "lbl-bg-grey",
"direction": "left",
"mapID": 0,
"plane": 0,
},
"geometry": {
"type": "Point",
"coordinates": [
3210, 3425
]
}
},
</syntaxhighlight>
| style="padding-top: 0.5em;" |
<mapframe width=300 height=300 zoom=3 mapid=0 plane=0 x=3213 y=3429>
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"shape": "Text",
"label": "Romeo",
"class": "lbl-bg-grey",
"direction": "left",
"mapID": 0,
"plane": 0,
},
"geometry": {
"type": "Point",
"coordinates": [
3210, 3425
]
}
},
]
}
</mapframe>
|-
|}

===Circle marker===
The size of a circle marker is relative to the viewer, and therefore maintains its size as you zoom.
{| style="width:100%; max-width:750px;"
|- style="vertical-align:top;"
|
<syntaxhighlight lang="json">
{
"type": "Feature",
"properties": {
"subType": "CircleMarker",
"radius": 15,
"mapID": 0,
"plane": 0,
},
"geometry": {
"type": "Point",
"coordinates": [
3296, 3876
]
}
},
</syntaxhighlight>
| style="padding-top: 0.5em;" |
<mapframe width=300 height=300 zoom=2 mapid=0 plane=0 x=3300 y=3880>
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"subType": "CircleMarker",
"radius": 15,
"mapID": 0,
"plane": 0,
},
"geometry": {
"type": "Point",
"coordinates": [
3296, 3876
]
}
},
]
}
</mapframe>
|-
|}

===Circle===
The size of a regular circle is relative to the map, and therefore changes in size as you zoom.
{| style="width:100%; max-width:750px;"
|- style="vertical-align:top;"
|
<syntaxhighlight lang="json">
{
"type": "Feature",
"properties": {
"shape": "Circle",
"radius": 10,
"mapID": 0,
"plane": 0,
},
"geometry": {
"type": "Point",
"coordinates": [
2400, 3104
]
}
},
</syntaxhighlight>
| style="padding-top: 0.5em;" |
<mapframe width=300 height=300 zoom=2 mapid=0 plane=0 x=2400 y=3104>
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"shape": "Circle",
"radius": 10,
"mapID": 0,
"plane": 0,
},
"geometry": {
"type": "Point",
"coordinates": [
2400, 3104
]
}
},
]
}
</mapframe>
|-
|}

===Dot===
{| style="width:100%; max-width:750px;"
|- style="vertical-align:top;"
|
<syntaxhighlight lang="json">
{
"type": "Feature",
"properties": {
"shape": "Dot",
"fill": "#FF007F",
"mapID": 0,
"plane": 0,
},
"geometry": {
"type": "Point",
"coordinates": [
2511, 3511
]
}
},
</syntaxhighlight>
| style="padding-top: 0.5em;" |
<mapframe width=300 height=300 zoom=2 mapid=0 plane=0 x=2527 y=3165>
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"shape": "Dot",
"fill": "#FF007F",
"mapID": 0,
"plane": 0,
},
"geometry": {
"type": "Point",
"coordinates": [
2502, 3140
]
}
},
]
}
</mapframe>
|-
|}

==Polygons==
===Simple polygon===
{| style="width:100%; max-width:750px;"
|- style="vertical-align:top;"
|
<syntaxhighlight lang="json">
{
"type": "Feature",
"properties": {
"mapID": 0,
"plane": 0,
},
"geometry": {
"type": "Polygon",
"coordinates": [[
[1847,3829],
[1848,3828],
[1848,3825],
[1847,3824],
[1844,3824],
[1843,3825],
[1843,3826],
[1844,3828],
[1846,3829]
]]
}
},
</syntaxhighlight>
| style="padding-top: 0.5em;" |
<mapframe width=300 height=300 zoom=3 mapid=0 plane=0 x=1845 y=3826>
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"mapID": 0,
"plane": 0,
},
"geometry": {
"type": "Polygon",
"coordinates": [[
[1847,3829],
[1848,3828],
[1848,3825],
[1847,3824],
[1844,3824],
[1843,3825],
[1843,3826],
[1844,3828],
[1846,3829]
]]
}
},
]
}
</mapframe>
|-
|}

===~ Complex polygon ~===
{| style="width:100%; max-width:750px;"
|- style="vertical-align:top;"
|
<syntaxhighlight lang="json">
{
"type": "Feature",
"properties": {
"mapID": 0,
"plane": 0,
},
"geometry": {
"type": "Polygon",
"coordinates": [[
[3814, 2964],
[3797, 2964],
[3797, 2981],
[3814, 2981],
[3814, 2964] ],
[ [3809, 2974],
[3808, 2975],
[3808, 2976],
[3809, 2977],
[3810, 2977],
[3811, 2976],
[3811, 2975],
[3810, 2974],
[3809, 2974]
]]
}
},
</syntaxhighlight>
| style="padding-top: 0.5em;" |
<mapframe width=300 height=300 zoom=3 mapid=0 plane=0 x=3806 y=2973>
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"mapID": 0,
"plane": 0,
},
"geometry": {
"type": "Polygon",
"coordinates": [
[ [3814, 2964],
[3797, 2964],
[3797, 2981],
[3814, 2981],
[3814, 2964] ],
[ [3809, 2974],
[3808, 2975],
[3808, 2976],
[3809, 2977],
[3810, 2977],
[3811, 2976],
[3811, 2975],
[3810, 2974],
[3809, 2974] ]
]
}
},
]
}
</mapframe>
|-
|}

==Lines==
===Single line===
{| style="width:100%; max-width:750px;"
|- style="vertical-align:top;"
|
<syntaxhighlight lang="json">
{
"type": "Feature",
"properties": {
"mapID": -1,
"plane": 0,
},
"geometry": {
"type": "LineString",
"coordinates": [
[3237, 9859],
[3237, 9866],
[3229, 9869],
[3229, 9877],
[3232, 9880],
[3232, 9900],
[3228, 9898]
]
}
},
</syntaxhighlight>
| style="padding-top: 0.5em;" |
<mapframe width=300 height=300 zoom=3 mapid=-1 plane=0 x=3229 y=9883>
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"mapID": -1,
"plane": 0,
},
"geometry": {
"type": "LineString",
"coordinates": [
[3237, 9859],
[3237, 9866],
[3229, 9869],
[3229, 9877],
[3232, 9880],
[3232, 9900],
[3228, 9898]
]
}
},
]
}
</mapframe>
|-
|}

===Multiple lines===
{| style="width:100%; max-width:750px;"
|- style="vertical-align:top;"
|
<syntaxhighlight lang="json">
{
"type": "Feature",
"properties": {
"mapID": 0,
"plane": 0,
},
"geometry": {
"type": "MultiLineString",
"coordinates": [
[ [3015, 3849],
[3007, 3849],
[3007, 3840],
[3008, 3839],
[3026, 3839],
[3028, 3837]
],
[ [3015, 3849],
[3001, 3849],
[2989, 3861],
[2987, 3861],
[2983, 3865],
[2981, 3865],
[2980, 3866] ]
]
}
},
</syntaxhighlight>
| style="padding-top: 0.5em;" |
<mapframe width=300 height=300 zoom=2 mapid=0 plane=0 x=3005 y=3855>
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"mapID": 0,
"plane": 0,
},
"geometry": {
"type": "MultiLineString",
"coordinates": [
[ [3015, 3849],
[3007, 3849],
[3007, 3840],
[3008, 3839],
[3026, 3839],
[3028, 3837] ],
[ [3015, 3849],
[3001, 3849],
[2989, 3861],
[2987, 3861],
[2983, 3865],
[2981, 3865],
[2980, 3866] ]
]
}
},
]
}
</mapframe>
|-
|}

==Pop-ups==
A pop-up can be added to any feature, simply by including a <code>title</code> and <code>description</code> among its properties. Regular wikitext markup can be used to format the text inside the pop-up.
{| style="width:100%; max-width:750px;"
|- style="vertical-align:top;"
|
<syntaxhighlight lang="json">
{
"type": "Feature",
"properties": {
"shape": "Text",
"label": "Click me",
"class": "lbl-bg-grey",
"direction": "center",
"title": "[[Nettles (scenery)|Nettles]]",
"description": "Don't forget to bring [[gloves]].",
"mapID": 0,
"plane": 0,
},
"geometry": {
"type": "Point",
"coordinates": [
3525, 3512
]
}
},
</syntaxhighlight>
| style="padding-top: 0.5em;" |
<mapframe width=300 height=300 zoom=3 mapid=0 plane=0 x=3525 y=3512>
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"shape": "Text",
"label": "Click me",
"class": "lbl-bg-grey",
"direction": "center",
"title": "[[Nettles (scenery)|Nettles]]",
"description": "Don't forget to bring [[gloves]].",
"mapID": 0,
"plane": 0,
},
"geometry": {
"type": "Point",
"coordinates": [
3525, 3512
]
}
},
]
}
</mapframe>
|-
|}

==Styling==
===Borderless, coloured, transparent background===
{| style="width:100%; max-width:750px;"
|- style="vertical-align:top;"
|
<syntaxhighlight lang="json">
{
"type": "Feature",
"properties": {
"stroke-width": 0,
"fill": "#d03119",
"fill-opacity": 0.5,
"mapID": 0,
"plane": 0,
},
"geometry": {
"type": "Polygon",
"coordinates": [[
[2960, 3816],
[2944, 3816],
[2944, 3832],
[2960, 3832],
[2960, 3816]
]]
}
},
{
"type": "Feature",
"properties": {
"stroke-width": 0,
"fill": "#98FB98",
"fill-opacity": 0.5,
"mapID": 0,
"plane": 0,
},
"geometry": {
"type": "Polygon",
"coordinates": [[
[2944, 3816],
[2960, 3816],
[2960, 3832],
[2944, 3832],
[2944, 3904],
[3008, 3904],
[3008, 3776],
[2944, 3776],
[2944, 3816]
]]
}
},
</syntaxhighlight>
| style="padding-top: 0.5em;" |
<mapframe width=300 height=300 zoom=3 mapid=0 plane=0 x=2963 y=3825>
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"stroke-width": 0,
"fill": "#d03119",
"fill-opacity": 0.5,
"mapID": 0,
"plane": 0,
},
"geometry": {
"type": "Polygon",
"coordinates": [[[2960, 3816], [2944, 3816], [2944, 3832], [2960, 3832], [2960, 3816]]]
}
},
{
"type": "Feature",
"properties": {
"stroke-width": 0,
"fill": "#98FB98",
"fill-opacity": 0.5,
"mapID": 0,
"plane": 0,
},
"geometry": {
"type": "Polygon",
"coordinates": [[[2944, 3816], [2960, 3816], [2960, 3832], [2944, 3832], [2944, 3904], [3008, 3904], [3008, 3776], [2944, 3776], [2944, 3816]]]
}
},
]
}
</mapframe>
|-
|}

===Wide, coloured, opaque line===
{| style="width:100%; max-width:750px;"
|- style="vertical-align:top;"
|
<syntaxhighlight lang="json">
{
"type": "Feature",
"properties": {
"stroke": "#ED1C24",
"stroke-width": 5,
"stroke-opacity": 1,
"mapID": 0,
"plane": 0,
},
"geometry": {
"type": "LineString",
"coordinates": [
[2500, 3191],
[2513, 3191],
[2513, 3188],
[2533, 3188],

// (...)

[2521, 3156],
[2521, 3158],
[2516, 3158],
[2516, 3161],
]
}
},
</syntaxhighlight>
| style="padding-top: 0.5em;" |
<mapframe width=300 height=300 zoom=2 mapid=0 plane=0 x=2527 y=3170>
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"stroke": "#ED1C24",
"stroke-width": 5,
"stroke-opacity": 1,
"mapID": 0,
"plane": 0,
},
"geometry": {
"type": "LineString",
"coordinates": [
[2500, 3191],
[2513, 3191],
[2513, 3188],
[2533, 3188],
[2533, 3183],
[2530, 3183],
[2530, 3181],
[2525, 3181],
[2525, 3185],
[2522, 3185],
[2522, 3179],
[2515, 3179],
[2515, 3177],
[2528, 3177],
[2528, 3179],
[2530, 3179],
[2530, 3177],
[2532, 3177],
[2532, 3180],
[2534, 3180],
[2534, 3177],
[2545, 3177],
[2545, 3175],
[2551, 3175],
[2551, 3165],
[2546, 3165],
[2546, 3159],
[2552, 3159],
[2552, 3156],
[2549, 3156],
[2549, 3145],
[2540, 3145],
[2540, 3145],
[2540, 3151],
[2543, 3151],
[2543, 3147],
[2546, 3147],
[2546, 3156],
[2521, 3156],
[2521, 3158],
[2516, 3158],
[2516, 3161],
]
}
},
]
}
</mapframe>
|-
|}

==Transclusion==
When adding a GeoJSON map, create a new page in the [[Special:PrefixIndex/Map:|<code>Map:</code>]] namespace and place the mapframe inside, which can then be transcluded onto the desired pages. For example, the map placed in [[Map:Ghosts Ahoy locations]] can be transcluded in mainspace by adding <code><nowiki>{{Ghosts Ahoy locations}}</nowiki></code> to a page.

Note that GeoJSON maps in general are only meant for composite interactive maps that cannot be made using [[Template:Map]]. However, if a map can only be made with the template by grouping multiple ones together, while only displaying one, it is preferable to write the map in GeoJSON and transclude it.

==Properties==
{| class="wikitable sortable"
!Property
!Geometry
!Description
!Possible values
|-
|<code>title</code>
|All
|Title of the pop-up that appears on clicking a map feature.
|Any string
|-
|<code>description</code>
|All
|Description of the pop-up that appears on clicking a map feature.
|Any string
|-
|<code>label</code>
|<code>Text</code>
|The text displayed on the label.
|Any string
|-
|<code>class</code>
|<code>Text</code>
|Class added to the wrapper of the text label.
|<code>lbl-bg-grey</code>
|-
|<code>direction</code>
|<code>Text</code>
|The position of the label relative to the map coordinates.
|<code>right</code> <code>left</code> <code>top</code> <code>bottom</code> <code>center</code> <code>auto</code>
|-
|<code>stroke</code>
|<code>Polygon</code> <code>Circle</code> <code>LineString</code>
|The colour of a line or border.
|Hex value, e.g. <code>#FF0000</code>
|-
|{{Nowrap|<code>stroke-opacity</code>}}
|<code>Polygon</code> <code>Circle</code> <code>LineString</code>
|The opacity of a line or border.
|<code>0</code> – <code>1.0</code>
|-
|<code>stroke-width</code>
|<code>Polygon</code> <code>Circle</code> <code>LineString</code>
|The width of a line or border.
|Pixel value, e.g. <code>2</code>
|-
|<code>fill</code>
|<code>Polygon</code> <code>Circle</code><code>Dot</code>
|The colour of the background, or of a dot.
|Hex value, e.g. <code>#FF0000</code>
|-
|<code>fill-opacity</code>
|<code>Polygon</code> <code>Circle</code>
|The opacity of the background.
|<code>0</code> – <code>1.0</code>
|-
|<code>radius</code>
|<code>Circle</code>
|The radius of the circle or marker.
|Number of game squares, e.g. <code>10</code>
|-
|<code>icon</code>
|<code>Polygon</code> <code>Circle</code>
|The colour of the pin icon.
|<code>greyPin</code> <code>redPin</code> <code>greenPin</code> <code>bluePin</code> <code>cyanPin</code> <code>magentaPin</code> <code>yellowPin</code>
|-
|<code>iconWikiLink</code>
|<code>Point</code>
|The image on the wiki to use as an icon.
|Filename and extension (connected by underscores and without prefix), e.g. <code>Chocolate_duck.png</code>
|-
|<code>iconSize</code>
|<code>Point</code> <code>Dot</code>
|Size of the image or pin icon.
|Pixel values in brackets, e.g. {{Nowrap|<code>[10, 10]</code>}}
|-
|<code>iconAnchor</code>
|<code>Point</code>
|Anchor point of the icon relative to its top-left corner; positive values will shift the matching point of the icon and map coordinates rightwards and downwards.
|Pixel values in brackets, e.g. {{Nowrap|<code>[5, 10]</code>}}
|-
|<code>popupAnchor</code>
|<code>Point</code>
|Anchor point of the pop-up relative to its top-left corner; positive values will shift the matching point of the pop-up and <code>iconAnchor</code> rightwards and downwards.
|Pixel values in brackets, e.g. {{Nowrap|<code>[0, 0]</code>}}
|}

RuneScape:Create Map - Revision history