Maps/how to: maps

From MediaWiki.org
Jump to: navigation, search
Screenshot of an easy to create map of Estes Park, CO

Let's add interactive maps for a richer experience using maplink[edit]

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 detailed information about the Maps project 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.
Easy map - more details
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 a map link 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.

Additional information about your map

* Each map that you create, once the link is clicked on, will open in a new tab (or window).
* Every map is fully interactive - it can be zoomed in and out or panned to view different areas.
* Each map will have a caption below the map that will contain (by default) the center of the map coordinates or custom text.
* There is a more details button that displays additional ways to display the map: satellite, topological, terrain, aerial or other external service providers (as available). The more details button is meant as a replacement for the GeoHack templated map service.
* Each map will have a attribute line with a link to the OpenStreetMap copyright and license as well as a link to the Wikimedia maps terms of use and licensing page.
* The interactive map can be closed by clicking the X in the top right hand corner of the map, clicking your browser's back button (if the map opened in your existing browser tab) or closing the tab (if the map opened in a new tab or window).

Easy map link samples[edit]

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

Just a link with coordinates: 40°22′38″N 105°31′32″W

The easiest way to add a new link to a map for Estes Park is adding the following code in the page. This displays a link that will automatically convert the latitude and longitude into degrees, minutes and seconds.
<maplink latitude="40.377117" longitude="-105.525514" />

A link with custom text: Estes Park, CO

You can also add in custom text to display something like this:
<maplink latitude="40.377117" longitude="-105.525514" text="Estes Park, CO" />

A link with custom text without a map icon in your article: An interactive map of Estes Park, CO

If you would prefer your map link to display without the map icon, you can edit your code to be something like this:
<maplink latitude="40.377117" longitude="-105.525514" text="An interactive map of Estes Park, CO" class="no-icon" />

Set a custom zoom level for the map, once it's opened: A custom zoom level map of Estes Park, CO

Let's now set a zoom level for the interactive map, since you might want to display your map closer into the city:
<maplink latitude="40.377117" longitude="-105.525514" text="A custom zoom level map of Estes Park, CO" zoom="15" />


Cool but complex things you can do with a map[edit]

Complex map - marker, article link and image

Add a marker to your map: Colorado State Capital with marker icon

Click edit source on this page to view the code for creating this map.

Add a marker and article link to your map: Colorado State Capital with marker and article link

Click edit source on this page to view the code for creating this map.

Add a custom icon marker, article link and image to your map: Colorado State Capital with a town hall marker, article link and image

<maplink text="Colorado State Capital with a town hall marker, article link and image" latitude="39.73939" longitude="-104.98491" zoom="17">
{
      "type": "Feature",
      "properties": { "marker-symbol": "town-hall", "marker-color": "46ea5f", "marker-size": "medium", "title": "[[wikipedia:Colorado_State_Capitol|Colorado State Capital]]", "description": "[[File:Coloradocapitolhill2.JPG|150px]]"},
      "geometry": { "type": "Point", "coordinates": [-104.98485267162323, 39.73928364167763] }
}
</maplink>
Complex map sample with several map markers in different sizes using a feature collection

Add a Wikidata ID to highlight a state (geoshape): State of Colorado, outlined

Click edit source on this page to view the code for creating this map.

Add a Wikidata ID to mask everything but a state (geomask): State of Colorado, highlighted

Click edit source on this page to view the code for creating this map.

Add a number to a map marker: Colorado State Capital with a number marker

Click edit source on this page to view the code for creating this map.

Add a letter to a map marker: Colorado State Capital with a letter marker

Click edit source on this page to view the code for creating this map.

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

Click edit source on this page to view the code for creating this map.

Add groups of different colored map markers and different counters: Add groups of different colored markers and different counters

Click edit source on this page to view the code for creating this map.

Good things to know about using map links[edit]

  • Map zoom levels are between 0 (zero) and 18 (eighteen).
  • Map markers can use any color that has a RBG value (a quick internet search of "rgb color picker" will show several options).
  • Markers can be one of three different sizes: small, medium or large.
  • All speciality icons can be viewed at Maki Icons, however, refer here to find ones that work with our maps.
  • Some of the more complex map links will have a different link display.
  • GeoJSON that is created elsewhere can be copied (in accordance with licensing and copyright restrictions) and then pasted into maplink (for example)
  • If you are creating maps on Wikivoyage, it might be a good idea to use Groups for more information.
  • If you want to learn more about adding external data to your map, this is a good place to start.

See also[edit]