Search results
Jun 28, 2018 · Now, maps like the one below —which no longer shows a babel of languages and alphabets—can be displayed on almost all Wikimedia wikis.* The same map after internationalization. All labels are in the language of the wiki—English, in this case. Visit the dynamic map, and read more about its copyright licenses.
Jun 28, 2018 · Now, maps like the one below —which no longer shows a babel of languages and alphabets—can be displayed on almost all Wikimedia wikis.*. The same map after internationalization. All labels are in the language of the wiki—English, in this case. Visit the dynamic map, and read more about its copyright licenses.
May 14, 2024 · Maps has been maintained since 2009, is installed on 1000+ wikis and is used by NASA. Note that the maps used on Wikimedia sites such as Wikipedia and Wikivoyage are generated by the Kartographer extension, not the Maps extension.
- Overview
- Getting Started
- Building a Map using Interactive Maps Editor
- Building a Map using JSON in Source Editor
- Viewing a Map
- Maps and SEO
- Embedding a Map
- Linking to Markers
- Reporting Markers
- CSS customization
Interactive Maps is a feature available on Fandom that enables communities to design their own customized maps. It is available to any community that wants to use it.
Map creation and editing is open to all users. You can find the "Interactive Maps" link 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.
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 Description (optional): This will add a text description above your Map in the Map namespace to tell viewers as well as Google what this Map is about and how it fits into the context of your wiki. It will also feed future map search results. This field supports wikitext, and the character limit is 200. •Map Image: Click on this area to upload or select the image you would like to use for your Map. The permitted file types are .jpg, .jpeg, .png, and .svg. The maximum file size is 10 MB. Once uploaded, there is an option to replace the image, but doing so may require you to reposition markers placed on the Map. Note that saving a Map without a background image will result in the loading of a blank page. •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. •Creating categories: Click the "+ Add Category" button to create a new category. •Renaming categories: Click on the category name to change it. •Re-ordering categories: Grab hold of the horizontal bars on the right of the category and drag to re-order the categories in the list. •Deleting categories: Clicking on the category name will transform the horizontal bar into a trashcan icon to give you the option to delete the category. •Customizing category markers: Click the pin icon on the left of the category to open a menu that allows you to customize how markers are displayed for that category. •Background color: This will change the color of the marker icon. Click on the colored square to select a color using the color slider or input a hex code in the field to the right. •Emoji or Character: You may choose to add an emoji or single character as a customization option within category markers. This field has a 1-character limit. After adding an emoji or character, it will be displayed inside the default marker icon in place of the dot in the center. To delete the emoji or character, click the X on the right of the input field. •Custom icon: Click on this area to upload an image file as a custom icon image for the category, which will replace the default pin icon. The permitted file types are .jpg, .jpeg, .png, and .svg. The file size for the icon should be between 32x32px and 64x64px. Once uploaded, there is an option to replace or delete each custom icon individually. Know that all markers pins are lined up at the bottom center, regardless of their shape. So if you use a round marker rather than a pin, you'll have to align it yourself at the bottom center and not the middle of the circle. •While the options to either upload a custom icon or use an emoji/character are always enabled, both cannot be active at the same time. In order for the emoji or character to be displayed, you cannot have a custom icon image in use. Uploading an icon image after choosing an emoji will override the emoji and replace it with an image.
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. This field supports wikitext, so all wikitext specific characters will be displayed in standard wikitext format. The description is limited to 300 characters or less, including wikitext characters that will not be shown in the final marker tooltip. You must save your changes to the marker tooltip in order to see your wikitext rendered. •Image (optional) Click on this area to upload or select an image to use in this marker's popup. The permitted file types are .jpg, .jpeg, .png, and .svg. The maximum file size is 10 MB. Once added, there is an option to replace the image, or remove it from the marker. The image will be placed under the title and description and above the link. The image is automatically sized to fit inside the pop-up container, at a width of 264px. •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. Do not put the entire url here, just the page title. •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. •Custom Marker Icon: Adds a custom icon to a specific map marker within a category. This overwrites the chosen icon for the category in general. The permitted file types are .svg, .png, and .jpg, and the icon size should be between 32x32px and 64x64px. Know that all markers pins are lined up at the bottom center, regardless of their shape. So if you use a round marker rather than a pin, you'll have to align it yourself at the bottom center and not the middle of the circle.
Every Interactive Map is defined in JSON (JavaScript Object Notation). The following fields should be defined in order to generate the Map:
•mapImage (required, string) – Name of the file that will be used as the map background image (with or without the "File:" namespace prefix). 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, array of number) – Bounds defining the edges of the map, given as a 2x2 matrix of numbers.
•The first (lower) coordinate defines the minimum point at which marker positions will start (modified by origin, be it top-left or bottom-left), and the second (upper) coordinate defines the maximum point in the opposite corner (top-right if origin is "bottom-left", or bottom-right if origin is "top-left"). A marker at the first coordinate will always be positioned at the origin, which will always be in the top-left/bottom-left corner of the mapImage.
•In a typical setup, the lower coordinate is [0, 0], and the upper coordinate is the size of the mapImage, or a size with an equivalent aspect ratio. While the bounds does not limit the resolution of the mapImage, it does affect the percieved minimum and maximum zoom level, as a map with a bounds of [[0, 0], [3840, 2160]], will appear twice the size at same zoom level as a map of an upper bound of [[0, 0], [1920, 1080]]. Scaling the bounds by a non-power-of-two will affect the default zoom and the size of each zoom step.
•Bounds may be used to shift the coordinate system so that 0,0 is not the origin, which may be more meaningful for the coordinates on hand. For example if 0,0 should be the center of a map at a size of 1920x1080, mapBounds should be [[-960, -540], [960, 540]], and all original coordinates that were previously defined in a range of x 0-1920 and y 0-1080 should have half of the width and height subtracted from their x and y position accordingly.
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.
Markers
Markers identify points of interest on the map, and can be selected to display the associated popup. Markers are created in HTML in the same order in which they were created in the visual editor, or the order in which they are present in the markers array of the JSON. This influences the sort order; the Z-order that markers are displayed in from back-to-front. For example, a marker defined last in the JSON will overlap all other markers that may be surrounding it. It is common practice to sort markers by their Y position, in ascending order (when using an origin of top-left) or descending order (when using an origin of bottom-left), so that markers towards the top of the map are shown behind markers towards the bottom. The marker order also influences the tab order; the order in which focus is cycled when pressing Tab (↹) and Shift-Tab.
Marker Clusters
For ease of display, markers may be grouped locally into clusters. This causes markers that are near to each other (at the current zoom level) to be grouped into a single node, which when clicked will zoom into that area and expand the cluster to reveal the markers underneath it. Hovering over a cluster will show an outline of the area of the markers contained within that cluster, with the number indicating the quantity. Marker clustering may be enabled by toggling the "Marker Grouping" option to "on" in the Interactive Maps Editor, or with "useMarkerClustering": true in the JSON. There is currently no way to adjust the sensitivity of the clustering.
To ensure maximum discoverability and improve the SEO of your custom Maps through Google and other search engines, make sure to utilize the Map Description on each individual Map to its fullest potential. By adding a text description above your Map in the Map namespace, you can tell viewers as well as the search engine crawlers what this specific Map is about and how it fits into the context of your wiki. This field supports wikitext, and the character limit is 200.
In addition to adding descriptions to individual Maps, the Special:AllMaps page has a generic description that you can also customize to be more specific to your wiki. To do this, contact Fandom Staff to change MediaWiki:All-maps-dashboard-description for you with the desired text.
Aligning and Placement
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 element or table, which allows you to specify alignment, width, and other properties. The height of the map is always 65% of the viewport height, or 500px if the viewport width is greater than 1280px. This height cannot be specified in wikitext, but may be changed in CSS with the rules .interactive-maps-container { height: inherit; } .interactive-maps-container .interactive-maps__map { height: 600px; } For maps placed next to an infobox or other floating elements, the map will automatically shrink to fit within the free space. You can also force the embed to fit flexibly using style="display:flow-root" or style="overflow:hidden" in a surrounding div. Alternatively you can move it below floating elements (so that it appears after the infobox) with style="clear:both", or a before the embed. Maps can also be embedded in a tabber, which may be useful when displaying multiple maps on the same page without taking up too much vertical space. One such use case is for a series of maps that represent different floors in a building. Note, however, that Tabber is not supported on mobile, where the maps will be shown one above the other instead. Also, you can place a Map inside an infobox, although this will greatly limit its functionality.
Map markers can be directly linked to by including the URL query parameter marker=marker_id in an external link to the map, where marker_id is the ID of the marker that should be displayed.
As an example, on the Avatar Wiki, the following link will link to a marker with the ID 42 on the Avatar world map: https://avatar.fandom.com/wiki/Map:Avatar_world_map?marker=42. This can be generated in wikitext using the fullurl magic word. For example:
•{{fullurl:Map:Avatar world map|marker=42}} → https://avatar.fandom.com/wiki/Map:Avatar_world_map?marker=42
•[{{fullurl:Map:Avatar world map|marker=42}} Jang Hui] → Jang Hui
This works when linking to the map page itself, or on any page where the map is embedded. If multiple maps exist on the page being linked to, the marker matching the ID across all embedded maps on said page will be focused, not just the first. If multiple markers exist with the same ID, linking to a marker using this ID may yield unexpected results.
Note that marker links can be used with a page anchor ('#'), as long as the anchor tag goes after the query string. However, the anchor will be ignored, and the map will be automatically scrolled to instead, assuming the marker ID is valid and the map is visible when the page loads. This may be used in a Tabber-embedded map to switch to the specific tab, scroll to the map (and not the start of the tab since maps override anchoring), and then focus on a marker at the same time (for example).
Logged-in users can report a marker by clicking the three vertical dots (⋮) on the marker pop-up and selecting the "Report Marker" button. A successful report is indicated by a banner notification in the bottom left corner, and the "Report Marker" option in the menu will change to "Already Reported". This is only visible to the user who reported that marker. A previously dismissed marker cannot be reported again by the same user as long as the reports have not been cleared from Special:Reports. Trying this will result in the error message "There was a problem reporting this marker. Please try again."
Anonymous users cannot report a marker at all. While they see the "Report Marker" option, clicking that results in a pop-up prompting them to create an account.
Interactive Maps inherit many of the styles and colors from the Theme Designer. Should you wish to further change the look and feel of your maps, the following rules cover some common customizations that can be set in community CSS. Note that most of these rules apply to all maps on your wiki:
Change the background color of maps
Sets the background color shown behind the background image, both on the map page and in the Interactive Map Editor.
All skins:
Different color for light and dark mode:
Center custom marker icons
WikiProject Maps encourages the creation of free maps and their upload on Wikimedia Commons. On the project's pages can be found advice, tools, links to resources, and map conventions. The project suggests some web-friendly map conventions that may help to make maps more readable.
Sep 24, 2024 · Since August 2021 third-party wikis API queries on Wikimedia's Maps service are blocked. Maps project may refer to: Wikimedia Maps – where developments relating to Wikimedia maps are announced and discussed after July of 2018.
People also ask
Can a wiki map be displayed on all wikis?
Can third-party wikis use Wikimedia's Maps service?
What wiki extensions are used to add maps to wiki pages?
What is WikiProject maps?
What is the difference between maps and MediaWiki?
How many mapframe maps are on wiki pages?
Mapframe is a feature that enables users to easily display interactive maps right on wiki pages. Currently, most Wikipedias don’t have mapframe. But fifteen Wikipedias, along with literally all the other wiki projects, are using mapframe today to display maps on hundreds of thousands of pages.
