User:DTankersley (WMF)/misc/how to: maps

Let's add interactive maps for a richer experience!


This is a how-to guide for creating simple but beautiful maps that use OpenStreetMap data and Wikimedia tile images. We've recently created a method to add maps to articles - using a link for users to click and view an interactive map - and wanted to have a step-by-step guide for new users. This new method is called maplink and more information can be found here.

Find an article to update with a map
 * Let’s find an article that the addition of the map would make it just that much richer in content, an easy article would be the city that you live in, or a notable location nearby. For purposes of this guide and for the easy map samples, we'll use the small but very scenic town of Estes Park located in the state of Colorado in the USA.

Find the coordinates (latitude and longitude) for your map
 * The article for Estes Park has coordinates (latitude and longitude) in the information section - 40°22′38″N 105°31′32″W - this makes it easy for us to add in a maplink, in which to display an interactive map using Wikimedia tiles and map data from OSM.


 * If you click on the coordinates on the page, a new page is opened up that contains the GeoHack information for Estes Park. We’ll need to copy the coordinates that are in decimal degrees as displayed: 40.377117, -105.525514.

Add maplink to your page
 * Now that you know where you want to add a map and have the coordinates, it's time to have fun adding links to interactive maps to your articles or media.

Easy map samples
Just a link with coordinates:

A link with custom text:

A link with custom text without a map icon:

Set a custom zoom level for the map, once it's opened:

Cool but complex things you can do with a map
Add a marker to your map:

Add a marker and article link to your map:

Add a custom icon marker, article link and image to your map:

Add a Wikidata ID to highlight a state (geoshape):

Add a Wikidata ID to mask everything but a state (geomask):

Add a number to a map marker:

Add a letter to a map marker:

Add several map markers in different sizes using a feature collection:

Add groups of different colored map markers and different counters:

Good things to know about using links to interactive maps in your pages

 * When a user clicks on the link, the map will open up in your existing browser tab; right click (or control shift + click) on the link to open the map in a new tab or window.
 * The interactive map can be closed by hitting your browser's back button or the "X" at the top right of the map.
 * Zoom levels are between 0 (zero) and 18 (eighteen).
 * Map markers can use any color that has a RBG value (a quick search of "rgb color picker" will show several options).
 * Markers can be one of these sizes: small, medium or large.
 * All available speciality icons can be viewed at Maki Icons.
 * Some links will take on the color of the icons that it is displaying
 * If you are creating maps on Wikivoyage, it might be a good idea to use Groups.
 * If you want to learn more about adding external data to your map, this is a good place to start.