Maps/how to: map template
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
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.
- 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
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.
- Click here for step-by-step instructions on adding a map link to your page
- Click here for step-by-step instructions on adding embedded maps to your page
- How to use objects from OpenStreetMap in your map
- Click here for more information on the Discovery Maps project
- Click here to find out more about Kartographer
- Click here to find our more about the tile server implementation (Kartotherian)
- How to use dynamic maps on Wikivoyage