Community Central
Register
Community Central
This extension is enabled by default on Fandom.

Interactive Maps is a feature available on Fandom that enables communities to design their own customized maps. It is available to any community that wishes to use it.

Getting Started

Map creation and editing is currently limited to those with the user right editinteractivemap, which is automatically given to administrators and Fandom Staff. There is an "Interactive map tester" usergroup that administrators can give to users to enable them to create and edit Maps.

Once you have the permission to edit Maps, you can find a link "Interactive Maps" in the Explore menu of the top navigation, or you can directly navigate to the creation tool by visiting Special:AllMaps on your wiki, where you can create your own Map and find a list of every Map that exists on your community.

All Interactive Maps live in the Map: content namespace, e.g. /wiki/Map:My_New_Map. Maps created in any other namespace, including as a userspace subpage, will not be correctly generated. When creating a Map via the button on Special:AllMaps, this namespace is automatically added, omitting the need to make this part of the page title.

Unless you have set your preferences to use the source editor, the "Edit" button at the top right of any page in the Map namespace will open the visual Interactive Maps Editor, which is a user-friendly option to edit Maps quickly and easily. Clicking "Edit source" from the dropdown menu will instead take you to the source editor and load the base JSON (JavaScript Object Notation) structure for the Map. If you have the source editor selected as your preference, these options are reversed and the button in the dropdown reads "Edit map". Clicking the pencil icon present on the map itself will always open the visual Interactive Maps Editor, regardless of your preferred editor. While inside the visual Interactive Maps Editor, hovering over the button with the three vertical dots will open a dropdown with the option to "edit source".

Building a Map using Interactive Maps Editor

Map Theme Designer

Interactive Maps Theme Designer

Map Display

This section allows you to view your Map name, upload a Map image as your background, and group markers that are in close proximity.

  • Map Name: This is the title of your Map. Your Map will be viewable using the URL /wiki/Map:My_New_Map, where My New Map is the name that you chose. If you wish to change the name after the Map's creation, hover over the button with the three vertical dots in the top right-hand corner on the Map itself and select the option "move". This will close the Interactive Maps Editor and take you to Special:MovePage.
  • Map Image: Click on this area to upload the image you would like to use for your Map. You can upload a .jpg, .jpeg, .png, or .svg. The maximum file size is 10 MB.
  • Group Markers: Toggle this option "on" to simplify the number of markers on a Map by grouping ones that are in close proximity. If you click on a grouped location, it will zoom in and show a sub-group or individual markers in a selected location. We recommend grouping large numbers of markers for a better viewing experience.

Categories

Organize markers of a similar kind by grouping them into categories. This list will appear next to the Map and allows you to filter markers by categories. Click the "Add Category" button to create a new one, click on the color to the left of the category to change the color of the category, and grab hold of the horizontal bars on the right of the category to re-order the categories in the list. Clicking anywhere on the category will transform the horizontal bar to a trashcan icon to give you the option to delete the category.

Markers

To add a marker to your Map, click the pin icon in the top right-hand corner. Move your cursor to the desired placement on the Map and click to drop it. After you place the marker, a menu will come up with several options that control how your marker will appear on the Map:

  • Title: This is the name of your marker/location. It must be 50 characters or less.
  • Description (optional): This description will be displayed under your title in the pop-up window when your marker is clicked on. It must be 150 characters or less.
  • Link (optional): You have the option to link to any article on your wiki (perhaps one that gives more detail on the selected marker/location).
    • Page title: Put the name of the article you would like to link in this field. It does not matter whether you use spaces or underscores for article names.
    • Link display text: Choose how you would like the link text to be displayed. It could be the same name as the article or something like "See more". This field is required if you link a page title.
  • Category: Select which category you would like your marker to be grouped in. Each marker must be associated with a category to better group similar markers.

Once a marker is created, you can drag it to a different location on the Map if you so choose. You can also click on the marker and hover over the three vertical dots to bring up options to edit or delete the marker.

Additional Functions

  • Zooming: Use the + and - buttons in the bottom right corner to zoom in and out of your Map. You can also use the scroll/mouse wheel.

Hovering over the button with the three vertical dots will open a dropdown. Depending on your user rights, you will always get the option to "edit source", "history", and "move" the Map.

  • Edit source: Clicking this will take you out the visual Interactive Maps Editor and to the JSON code of the Map. If you wish to return to the visual Interactive Maps Editor, you need to exit the source mode and click the edit pencil on the Map again.
  • History: This will take you out of the editor and to the page history of the Map, showing you all edits and changes made by anyone and giving you the option to undo them if necessary.
  • Move: This will close the Interactive Maps Editor and take you to Special:MovePage, where you can choose a new name for your Map.

The following options are only available to those with the content moderator right or higher.

  • Protect: It opens the options for protecting your Map.
  • Delete: This will delete your Map. You can always restore it if you did this by accident.

As you are making edits, the preview window will display your changes in real time, so you can see how your Map will look before you save it. When you are finished, click the "Save" button and your new Map will now appear on the wiki!

Building a Map using JSON in Source Editor

Every Interactive Map is defined in JSON (JavaScript Object Notation). The following fields should be defined in order to generate the Map:

  • mapImage (required) – name of the file that will be used as the map background image. The image must be uploaded to the wiki (e.g. using Special:Upload). The following file extensions are supported: jpg / jpeg / png / svg.
  • mapBounds (required) – bounds defining the edges of the map, given as a 2x2 matrix of integers.
  • categories (required) – list of categories that will be displayed in the filters list (the dropdown menu found top-left of the map).
  • markers (required) – list of markers that will be displayed on the map. Each marker must be associated with a defined category.
  • origin (required) – location of the origin point [0,0] in the coordinate system.
    • Possible values: bottom-left (default) or top-left.
  • pageCategories (optional) – category of the page. ["Foo"] will put the map into "Category:Foo".
  • defaultSort (optional) – ?
  • coordinateOrder (required) – order of coordinates used in defining map bounds and marker positions.
    • Possible values: xy (default) or yx.

Categories

Categories are a group of markers of the same kind. Each marker category is defined through the following fields:

  • id (required) – uniquely defined ID for each category, matched with the categoryId property of each marker. Any string is valid as an "id".
  • listId (required) – ?
  • name (required) – name of the category, which will be displayed in the filters list.
  • color (required) – color each marker category will appear with, which can be given in hex colors or named colors. Categories with an invalid color field will display as black.

Markers

Each individual marker is defined through the following fields:

  • categoryId (required) – category associated to the marker.
  • position (required) – coordinate position of the marker, within the given mapBounds and in the order defined by coordinateOrder.
  • popup (required) – properties of the pop-up box that appears when a marker is clicked on:
    • title (required) – title of the marker. Each marker title has a strict 50 character limit.
    • description (required) – description to be displayed in the pop-up. Each marker description has a strict 150 character limit.
    • link (optional) – article link to be added to the pop-up. Marker links are optional, but if included must be defined with both a url (the article title to be linked to) and a label (the link text to be displayed). The URL can link to both full articles and article sections.

Example

{
	"mapImage": "File:MapBackground.jpg",
	"pageCategories": ["Maps"],
	"defaultSort": "",
	"coordinateOrder": "xy",
	"mapBounds": [[0, 0], [1000, 1000]],
	"origin": "bottom-left",
	"useMarkerClustering": true,
	"categories": [
		{ "id": "1", "name": "Artifacts", "color": "#ff00ff" },
		{ "id": "2", "name": "Dungeons", "color": "#00ff00" }
	],
	"markers": [
		{
			"categoryId": "1",
			"position": [500, 300],
			"popup": {
				"title": "A Sword",
				"description": "Very important artifact",
				"link": {
					"url": "Article about a sword",
					"label": "See more"
				}
			} 
		},
		{
			"categoryId": "2",
			"position": [300, 500],
			"popup": {
				"title": "A Cave",
				"description": "Very scary dungeon",
				"link": {
					"url": "Article about a cave",
					"label": "See more"
				}
			} 
		}
	] 
}

Viewing a Map

Marker clusters

For ease of display, markers are grouped locally into clusters. Hovering over a cluster will show an outline of the area of the markers contained within that cluster, with the number indicating the quantity. Clicking on a cluster will zoom into that area.

There is currently no way to adjust the sensitivity of the clustering.

Filters

Maps have a filters menu that allows them to show or hide a specific marker category, if you want to see only a specific one. Select "Select all" to show all map markers, or select specific categories to only see markers from that category.

Embedding a Map

To get more eyes on your Map, you can embed it into a mainspace article if you wish. Once the Map has been created, it can be transcluded into an article using {{Map:My_New_Map}} wikitext syntax.

Like templates, more than one Map can be embedded in an article. Maps embedded in articles will have an edit button at the top right of the Map. Clicking this will open the Interactive Maps Editor in a new tab, allowing it to be edited directly.

Aligning

By default, the map will take up 100% width of the containing element (i.e. if it's placed in the middle of an article, it will expand to the full width of the page). You can manipulate its placement by embedding it inside a <div> element or table, which allows you to specify alignment, width, and other properties.

Note that in order for a map inside such an element to fit in the article properly, it must be 530px wide or less.

Also, you can place a Map inside an infobox, although this will greatly limit its functionality.

Useful links

Map examples

See also

  • Help:ImageMap, a default MediaWiki extension for embedding maps based on image coordinates.
  • Help:Maps Extension, a default MediaWiki extension for embedding real-world maps.

Further help and feedback