User:CKoerner (WMF)/Help:Maps

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




 * 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).

Mapframe
This is a how-to guide for creating simple but beautiful maps that use OpenStreetMap data and Wikimedia tile images and are embedded within a page. We've recently created a method to add maps to articles and wanted to provide a step-by-step guide for new users. This new method is called mapframe 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</tt> - this makes it easy for us to add in a mapframe</tt>, 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: 40.377117, -105.525514</tt>.

Add an embedded map 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 an embedded map to your articles or media.

Additional information about your interactive map
 * * Each map that is embedded on the page, when the map is clicked on, will open in a new tab (or window).
 * * The map that is displayed within the page is not interactive - it is a static image to allow for fast page loading.
 * * Once a user clicks on the map - it will be fully interactive; it can be zoomed in and out or panned to view different areas.
 * * Each interactive 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</tt> button that displays additional ways to display the map: satellite, topological, terrain, aerial or other external service providers (as available). The more details</tt> 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</tt> 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).

Maplink
Just a link with coordinates:

A link with custom text:

A link with custom text without a map icon in your article:

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

Mapframe
<mapframe latitude="40.377117" longitude="-105.525514" text="A custom zoom level map of Estes Park, CO" zoom="15" width="300" height="350" /> Just a map:
 * The easiest way to add a map for Estes Park is adding the following code in the page. This will display a static map that, when clicked, will open up map in your browser.



A map with custom text and setting the zoom level for the map, once it's opened:
 * Let's now set a zoom level for the interactive map, since you might want to display your map closer into the city:



Maplink
Add a marker to your map:
 * Click edit source on this page to view the code for creating this map.

Add a marker and article link to your map:
 * 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:



Add a Wikidata ID to highlight a state (geoshape):
 * 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):
 * Click edit source on this page to view the code for creating this map.

Add a number to a map marker:
 * Click edit source on this page to view the code for creating this map.

Add a letter to a map 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:
 * Click edit source on this page to view the code for creating this map.

Add groups of different colored map markers and different counters:
 * Click edit source on this page to view the code for creating this map.

Mapframe
Add a custom icon marker, article link and image to your map: <mapframe text="Colorado State Capital with a town hall marker, article link and image" latitude="39.73939" longitude="-104.98491" zoom="17" width="300" height="350"> { "type": "Feature", "properties": { "marker-symbol": "town-hall", "marker-color": "46ea5f", "marker-size": "medium", "title": "Colorado State Capital", "description": ""}, "geometry": { "type": "Point", "coordinates": [-104.98485267162323, 39.73928364167763] }}

Add a Wikidata ID to highlight a state (geoshape):

Add a Wikidata ID to mask everything but a state (geomask):

Add several map markers in different sizes using a feature collection: <mapframe text="Denver Amusements" latitude="39.74956567318853" longitude="-105.01247406005858" zoom="14" width="300" height="350"> {"type": "FeatureCollection", "features": }

More on markers

 * 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.
 * This page shows examples and names of all markers 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</tt> (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.

Available location icons
This page lists the set of icons (Maki) as they appear on Wikimedia Maps.

Note: Some icons are not available and the coordinates do not matter. (See ).

<mapframe text="Maki Icons" width="550" height="425" align="center" zoom="10" longitude="0.28" latitude="-0.22"> { "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0, 0] }, "properties": { "title":"Maki Icon: aerialway", "marker-symbol":"aerialway"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.05, 0] }, "properties": { "title":"Maki Icon: airfield", "marker-symbol":"airfield"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.1, 0] }, "properties": { "title":"Maki Icon: airport", "marker-symbol":"airport"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.15, 0] }, "properties": { "title":"Maki Icon: alcohol-shop", "marker-symbol":"alcohol-shop"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.2, 0] }, "properties": { "title":"Maki Icon: america-football", "marker-symbol":"america-football"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.25, 0] }, "properties": { "title":"Maki Icon: art-gallery", "marker-symbol":"art-gallery"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.3, 0] }, "properties": { "title":"Maki Icon: bakery", "marker-symbol":"bakery"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.35, 0] }, "properties": { "title":"Maki Icon: bank", "marker-symbol":"bank"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.4, 0] }, "properties": { "title":"Maki Icon: bar", "marker-symbol":"bar"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.45, 0] }, "properties": { "title":"Maki Icon: baseball", "marker-symbol":"baseball"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.5, 0] }, "properties": { "title":"Maki Icon: basketball", "marker-symbol":"basketball"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.55, 0] }, "properties": { "title":"Maki Icon: beer", "marker-symbol":"beer"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0, -0.05] }, "properties": { "title":"Maki Icon: bicycle", "marker-symbol":"bicycle"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.05, -0.05] }, "properties": { "title":"Maki Icon: building", "marker-symbol":"building"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.1, -0.05] }, "properties": { "title":"Maki Icon: bus", "marker-symbol":"bus"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.15, -0.05] }, "properties": { "title":"Maki Icon: cafe", "marker-symbol":"cafe"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.2, -0.05] }, "properties": { "title":"Maki Icon: camera", "marker-symbol":"camera"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.25, -0.05] }, "properties": { "title":"Maki Icon: campsite", "marker-symbol":"campsite"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.3, -0.05] }, "properties": { "title":"Maki Icon: car", "marker-symbol":"car"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.35, -0.05] }, "properties": { "title":"Maki Icon: cemetery", "marker-symbol":"cemetery"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.4, -0.05] }, "properties": { "title":"Maki Icon: chemist", "marker-symbol":"chemist"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.45, -0.05] }, "properties": { "title":"Maki Icon: cinema", "marker-symbol":"cinema"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.5, -0.05] }, "properties": { "title":"Maki Icon: circle", "marker-symbol":"circle"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.55, -0.05] }, "properties": { "title":"Maki Icon: circle-stroked", "marker-symbol":"circle-stroked"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0, -0.1] }, "properties": { "title":"Maki Icon: city", "marker-symbol":"city"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.05, -0.1] }, "properties": { "title":"Maki Icon: clothing-store", "marker-symbol":"clothing-store"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.1, -0.1] }, "properties": { "title":"Maki Icon: college", "marker-symbol":"college"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.15, -0.1] }, "properties": { "title":"Maki Icon: commercial", "marker-symbol":"commercial"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.2, -0.1] }, "properties": { "title":"Maki Icon: cricket", "marker-symbol":"cricket"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.25, -0.1] }, "properties": { "title":"Maki Icon: cross", "marker-symbol":"cross"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.3, -0.1] }, "properties": { "title":"Maki Icon: dam", "marker-symbol":"dam"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.35, -0.1] }, "properties": { "title":"Maki Icon: danger", "marker-symbol":"danger"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.4, -0.1] }, "properties": { "title":"Maki Icon: dentist", "marker-symbol":"dentist"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.45, -0.1] }, "properties": { "title":"Maki Icon: disability", "marker-symbol":"disability"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.5, -0.1] }, "properties": { "title":"Maki Icon: dog-park", "marker-symbol":"dog-park"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.55, -0.1] }, "properties": { "title":"Maki Icon: embassy", "marker-symbol":"embassy"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0, -0.15] }, "properties": { "title":"Maki Icon: emergency-telephone", "marker-symbol":"emergency-telephone"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.05, -0.15] }, "properties": { "title":"Maki Icon: entrance", "marker-symbol":"entrance"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.1, -0.15] }, "properties": { "title":"Maki Icon: farm", "marker-symbol":"farm"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.15, -0.15] }, "properties": { "title":"Maki Icon: fast-food", "marker-symbol":"fast-food"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.2, -0.15] }, "properties": { "title":"Maki Icon: ferry", "marker-symbol":"ferry"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.25, -0.15] }, "properties": { "title":"Maki Icon: fire-station", "marker-symbol":"fire-station"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.3, -0.15] }, "properties": { "title":"Maki Icon: fuel", "marker-symbol":"fuel"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.35, -0.15] }, "properties": { "title":"Maki Icon: garden", "marker-symbol":"garden"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.4, -0.15] }, "properties": { "title":"Maki Icon: gift", "marker-symbol":"gift"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.45, -0.15] }, "properties": { "title":"Maki Icon: golf", "marker-symbol":"golf"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.5, -0.15] }, "properties": { "title":"Maki Icon: grocery", "marker-symbol":"grocery"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.55, -0.15] }, "properties": { "title":"Maki Icon: hairdresser", "marker-symbol":"hairdresser"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0, -0.2] }, "properties": { "title":"Maki Icon: harbor", "marker-symbol":"harbor"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.05, -0.2] }, "properties": { "title":"Maki Icon: heart", "marker-symbol":"heart"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.1, -0.2] }, "properties": { "title":"Maki Icon: heliport", "marker-symbol":"heliport"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.15, -0.2] }, "properties": { "title":"Maki Icon: hospital", "marker-symbol":"hospital"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.2, -0.2] }, "properties": { "title":"Maki Icon: ice-cream", "marker-symbol":"ice-cream"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.25, -0.2] }, "properties": { "title":"Maki Icon: industrial", "marker-symbol":"industrial"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.3, -0.2] }, "properties": { "title":"Maki Icon: land-use", "marker-symbol":"land-use"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.35, -0.2] }, "properties": { "title":"Maki Icon: laundry", "marker-symbol":"laundry"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.4, -0.2] }, "properties": { "title":"Maki Icon: library", "marker-symbol":"library"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.45, -0.2] }, "properties": { "title":"Maki Icon: lighthouse", "marker-symbol":"lighthouse"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.5, -0.2] }, "properties": { "title":"Maki Icon: lodging", "marker-symbol":"lodging"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.55, -0.2] }, "properties": { "title":"Maki Icon: logging", "marker-symbol":"logging"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0, -0.25] }, "properties": { "title":"Maki Icon: london-underground", "marker-symbol":"london-underground"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.05, -0.25] }, "properties": { "title":"Maki Icon: marker", "marker-symbol":"marker"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.1, -0.25] }, "properties": { "title":"Maki Icon: marker-stroked", "marker-symbol":"marker-stroked"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.15, -0.25] }, "properties": { "title":"Maki Icon: minefield", "marker-symbol":"minefield"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.2, -0.25] }, "properties": { "title":"Maki Icon: mobilephone", "marker-symbol":"mobilephone"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.25, -0.25] }, "properties": { "title":"Maki Icon: monument", "marker-symbol":"monument"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.3, -0.25] }, "properties": { "title":"Maki Icon: museum", "marker-symbol":"museum"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.35, -0.25] }, "properties": { "title":"Maki Icon: music", "marker-symbol":"music"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.4, -0.25] }, "properties": { "title":"Maki Icon: oil-well", "marker-symbol":"oil-well"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.45, -0.25] }, "properties": { "title":"Maki Icon: park", "marker-symbol":"park"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.5, -0.25] }, "properties": { "title":"Maki Icon: parking", "marker-symbol":"parking"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.55, -0.25] }, "properties": { "title":"Maki Icon: parking-garage", "marker-symbol":"parking-garage"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0, -0.3] }, "properties": { "title":"Maki Icon: pharmacy", "marker-symbol":"pharmacy"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.05, -0.3] }, "properties": { "title":"Maki Icon: pitch", "marker-symbol":"pitch"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.1, -0.3] }, "properties": { "title":"Maki Icon: place-of-worship", "marker-symbol":"place-of-worship"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.15, -0.3] }, "properties": { "title":"Maki Icon: playground", "marker-symbol":"playground"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.2, -0.3] }, "properties": { "title":"Maki Icon: police", "marker-symbol":"police"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.25, -0.3] }, "properties": { "title":"Maki Icon: polling-place", "marker-symbol":"polling-place"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.3, -0.3] }, "properties": { "title":"Maki Icon: post", "marker-symbol":"post"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.35, -0.3] }, "properties": { "title":"Maki Icon: prison", "marker-symbol":"prison"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.4, -0.3] }, "properties": { "title":"Maki Icon: rail", "marker-symbol":"rail"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.45, -0.3] }, "properties": { "title":"Maki Icon: rail-above", "marker-symbol":"rail-above"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.5, -0.3] }, "properties": { "title":"Maki Icon: rail-light", "marker-symbol":"rail-light"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.55, -0.3] }, "properties": { "title":"Maki Icon: rail-metro", "marker-symbol":"rail-metro"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0, -0.35] }, "properties": { "title":"Maki Icon: rail-underground", "marker-symbol":"rail-underground"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.05, -0.35] }, "properties": { "title":"Maki Icon: religious-christian", "marker-symbol":"religious-christian"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.1, -0.35] }, "properties": { "title":"Maki Icon: religious-jewish", "marker-symbol":"religious-jewish"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.15, -0.35] }, "properties": { "title":"Maki Icon: religious-muslim", "marker-symbol":"religious-muslim"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.2, -0.35] }, "properties": { "title":"Maki Icon: restaurant", "marker-symbol":"restaurant"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.25, -0.35] }, "properties": { "title":"Maki Icon: roadblock", "marker-symbol":"roadblock"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.3, -0.35] }, "properties": { "title":"Maki Icon: rocket", "marker-symbol":"rocket"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.35, -0.35] }, "properties": { "title":"Maki Icon: school", "marker-symbol":"school"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.4, -0.35] }, "properties": { "title":"Maki Icon: scooter", "marker-symbol":"scooter"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.45, -0.35] }, "properties": { "title":"Maki Icon: shop", "marker-symbol":"shop"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.5, -0.35] }, "properties": { "title":"Maki Icon: skiing", "marker-symbol":"skiing"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.55, -0.35] }, "properties": { "title":"Maki Icon: slaughterhouse", "marker-symbol":"slaughterhouse"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0, -0.4] }, "properties": { "title":"Maki Icon: soccer", "marker-symbol":"soccer"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.05, -0.4] }, "properties": { "title":"Maki Icon: square", "marker-symbol":"square"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.1, -0.4] }, "properties": { "title":"Maki Icon: square-stroked", "marker-symbol":"square-stroked"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.15, -0.4] }, "properties": { "title":"Maki Icon: star", "marker-symbol":"star"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.2, -0.4] }, "properties": { "title":"Maki Icon: star-stroked", "marker-symbol":"star-stroked"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.25, -0.4] }, "properties": { "title":"Maki Icon: suitcase", "marker-symbol":"suitcase"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.3, -0.4] }, "properties": { "title":"Maki Icon: swimming", "marker-symbol":"swimming"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.35, -0.4] }, "properties": { "title":"Maki Icon: telephone", "marker-symbol":"telephone"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.4, -0.4] }, "properties": { "title":"Maki Icon: tennis", "marker-symbol":"tennis"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.45, -0.4] }, "properties": { "title":"Maki Icon: theatre", "marker-symbol":"theatre"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.5, -0.4] }, "properties": { "title":"Maki Icon: toilets", "marker-symbol":"toilets"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.55, -0.4] }, "properties": { "title":"Maki Icon: town", "marker-symbol":"town"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0, -0.45] }, "properties": { "title":"Maki Icon: town-hall", "marker-symbol":"town-hall"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.05, -0.45] }, "properties": { "title":"Maki Icon: triangle", "marker-symbol":"triangle"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.1, -0.45] }, "properties": { "title":"Maki Icon: triangle-stroked", "marker-symbol":"triangle-stroked"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.15, -0.45] }, "properties": { "title":"Maki Icon: village", "marker-symbol":"village"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.2, -0.45] }, "properties": { "title":"Maki Icon: warehouse", "marker-symbol":"warehouse"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.25, -0.45] }, "properties": { "title":"Maki Icon: waste-basket", "marker-symbol":"waste-basket"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.3, -0.45] }, "properties": { "title":"Maki Icon: water", "marker-symbol":"water"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.35, -0.45] }, "properties": { "title":"Maki Icon: wetland", "marker-symbol":"wetland"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.4, -0.45] }, "properties": { "title":"Maki Icon: zoo", "marker-symbol":"zoo"} } ] }

Sizes
<mapframe text="Three sizes: small / medium / large" width="225" height="200" align="center" zoom="10" longitude="0.05" latitude="0"> { "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0, 0] }, "properties": { "title":"\"marker-size\": \"small\"", "marker-size":"small", "marker-symbol":"airport"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.05, 0] }, "properties": { "title":"\"marker-size\": \"medium\"", "marker-size":"medium", "marker-symbol":"airport"} }, { "type": "Feature", "geometry":  { "type":"Point", "coordinates":[0.1, 0] }, "properties": { "title":"\"marker-size\": \"large\"", "marker-size":"large", "marker-symbol":"airport"} } ] }

<mapframe text="The White House in Washington DC" latitude="38.8977" longitude="-77.0365" zoom="15" width="400" height="300"> {     "type": "Feature", "properties": { "marker-symbol": "town-hall", "marker-color": "46ea5f", "marker-size": "medium", "title": "The White House"}, "geometry": { "type": "Point", "coordinates": [-77.0365, 38.8977] } }

Adding maps with the visual editor



 * This how-to guide will focus on embedding a map into your page using Visual Editor's Map template and mapframe</tt>. If you'd like to add a map link to your page using wiki markup, like this: <maplink latitude="40.377117" longitude="-105.525514" text="An interactive map of Estes Park, CO" />, see this page for detailed information.

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</tt> 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



How-to video
View a quick video showing how to use the Map template to add an embedded 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</tt> data for more complex maps.

More complex mapframe</tt> samples (using wiki markup) can be found here.

Important notes

 * The map template is currently only available on certain wiki projects - MediaWiki and WikiVoyage.
 * Embedded maps are currently only available on certain projects - MediaWiki, Meta, Wikivoyage (all languages), and some Wikipedias (Catalan, Hebrew, Russian, Portuguese, Macedonian, French, Finnish, Norwegian, Swedish, Basque, Czech, Spanish).
 * When using mapframe</tt>, 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.

=See also =
 * Information on the Maps project
 * Terms of use and where the map data comes from
 * How to use objects from OpenStreetMap in your map
 * Kartographer, the MediaWiki extension used for maps
 * Kartotherian, the tile server implementation
 * How to use dynamic maps on Wikivoyage