This how-to guide will focus on embedding a map into your page using Visual Editor's Map template and mapframe. If you'd like to add a map link to your page using wiki markup, like this: An interactive map of Estes Park, CO, see this page for detailed information.

Let's add interactive maps for a richer experience using Visual Editor and the Map template

This is a quick guide for getting started to create simple but beautiful maps that use OpenStreetMap data and Wikimedia tile images.

We've recently created a new method called mapframe to embed maps into pages that can be clicked on to view an interactive map. More detailed information about the Maps project can be found here.

Using the Map template

Adding a map to your page can be done using Visual Editor - by selecting "Map" from the "Insert" menu. Adding a map in this manner gives you the ability to:

* define physical size and alignment as displayed on the page

* coordinates of the center of the map - it's latitude and longitude

* zoom level of the map

* addition of push-pin markers, lines and polygons

* copy and paste GeoJSON data

VE map template current position and markers added

How-to video

View a quick video showing how to use the Map template to add an embedded map to a page.

Editing the map data

Once you've created your base map, you'll probably have some edits that you'd like to do to it, like change the color of an icon or add in an article link. Click here to find out how to edit the mapframe data for more complex maps.

Important notes

The map template is currently only available on certain wiki projects - MediaWiki and WikiVoyage.
Map frame usage is currently only available on Russian, Hebrew and Catalan Wikipedias.
When using mapframe, there will always be a static map image in the article page
- Clicking on the static map image will open up the interactive map in your existing tab, or - right click on the map image and open in a new tab or window.

Map frame simple sample

Downtown San Francisco

The following simple code sample shows how to add a map that is embedded into your page, with a link to a Wikipedia article.

<mapframe text="Downtown [[wikipedia:San Francisco|San Francisco]]" width=250 height=250 zoom=13 longitude=-122.3988 latitude=37.8013 />

More complex mapframe samples (using wiki markup) can be found here.

User:DTankersley (WMF)/misc/how to: map template

Contents