RuneScape:Create Map

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

Starting out

Tools

Finding the coordinates of a specific map square is most easily done using mejrs.github.io/osrs, a variant of GeoJSON.io for OSRS made and maintained by Mejrs. A list of mapIDs 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 mapframe tags, or alternatively inside maplink tags to render a link to a map.

<mapframe> <!-- GeoJSON goes here --> </mapframe>

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 mapframe tag which are largely identical to those used in the {{Map}} template:

<mapframe width=300 height=300 zoom=1 mapid=0 plane=0 x=3200 y=3175 text="Swamp"> <!-- GeoJSON goes here --> </mapframe>

All markers are placed inside a 'FeatureCollection', like so:

{ "type": "FeatureCollection", "features": [ // All features are placed here ] }

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:

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

Points

Single pin

Icons that may be used are greenPin, redPin, bluePin, cyanPin, magentaPin, yellowPin or greyPin.

{ "type": "Feature", "properties": { "icon": "cyanPin", "mapID": 0, "plane": 0, }, "geometry": { "type": "Point", "coordinates": [ 3218, 3178 ] } },

Multiple pins

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

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 Chocolate_duck.png rather than Chocolate duck.png for instance. The File: prefix does not need to be included.

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

Multiple images

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

Label

{ "type": "Feature", "properties": { "shape": "Text", "label": "Romeo", "class": "lbl-bg-grey", "direction": "left", "mapID": 0, "plane": 0, }, "geometry": { "type": "Point", "coordinates": [ 3210, 3425 ] } },

Circle marker

The size of a circle marker is relative to the viewer, and therefore maintains its size as you zoom.

{ "type": "Feature", "properties": { "subType": "CircleMarker", "radius": 15, "mapID": 0, "plane": 0, }, "geometry": { "type": "Point", "coordinates": [ 3296, 3876 ] } },

Circle

The size of a regular circle is relative to the map, and therefore changes in size as you zoom.

{ "type": "Feature", "properties": { "shape": "Circle", "radius": 10, "mapID": 0, "plane": 0, }, "geometry": { "type": "Point", "coordinates": [ 2400, 3104 ] } },

Dot

{ "type": "Feature", "properties": { "shape": "Dot", "fill": "#FF007F", "mapID": 0, "plane": 0, }, "geometry": { "type": "Point", "coordinates": [ 2511, 3511 ] } },

Polygons

Simple polygon

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

~ Complex polygon ~

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

Lines

Single line

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

Multiple lines

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

Pop-ups

A pop-up can be added to any feature, simply by including a title and description among its properties. Regular wikitext markup can be used to format the text inside the pop-up.

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

Styling

Borderless, coloured, transparent background

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

Wide, coloured, opaque line

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

Transclusion

When adding a GeoJSON map, create a new page in the Map: 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 {{Ghosts Ahoy locations}} 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

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