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  and more information can be found here.

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, we'll use the small but very scenic town of Estes Park located in the state of Colorado in the USA.
 * Find an article to update with a map

The article for Estes Park has coordinates (latitude and longitude) in the information section -  - this makes it easy for us to add in a , in which to display an interactive map using Wikimedia tiles and map data from OSM.
 * Find the coordinates (latitude and longitude) for your map

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

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.
 * Add  to your page

Map examples
1. Just a link with coordinates

The easiest way to add a new link to a map for Estes Park is adding the following code in the page: that will automatically convert the latitude and longitude into degrees, minutes and seconds.

2. A link with custom text

You can also add in custom text to display something like this:

B. Add a marker and article link to your map

C. Add an marker, article link and image to your map

D. Add a number to a map marker

E. Add a letter to a map marker

F. Add several map markers in different sizes using a feature collection

G. Add a Wikidata ID to highlight a state

Good things to know about using 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
 * All  examples on this page can be viewed (via edit source), copied, and pasted in an article to help jump start creation of your own interactive maps.
 * 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.
 * 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.