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.

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

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

Add to your page
1. Just a map 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: and it'll look like this:

that will automatically convert the latitude and longitude into degrees, minutes and seconds.

2. Map link with custom text

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

, which will look like this:



Good things to know

 * Maps will open up in your existing browser tab
 * You can 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 should be prefixed with a in order to work after copying and pasting the example text.