Help:Maps

Saintapedia editors/contributors can show geographic data on wiki pages with interactive maps. There are three services options, Google Maps, OpenLayers, and Leaflet. The later two pull their information from OpenStreetMap. Editors can create custom maps that display general areas, one location, multiple locations, linked pins, pop-up information windows, and many other search features.

Enhanced editor must be used when adding or editing maps. VisualEditor does not allow you to make changes to maps.

The default mapping method has been changed from Google Maps to OpenLayers due to a limit in Google Maps API. This functionality was added to Saintapedia through Extension:Maps .

Basic examples

Most editors will want to add only a single location to a map. The easiest way to do this is with the street address of that location. If you have the coordinates of the location, they can also be used.

{{#display_points:
1600 Pennsylvania Avenue NW, Washington, DC 20500
}}

Loading map...

{"minzoom":false,"maxzoom":false,"mappingservice":"leaflet","width":"auto","height":"350px","centre":false,"title":"","label":"","icon":"","lines":[],"polygons":[],"circles":[],"rectangles":[],"copycoords":false,"static":false,"zoom":false,"defzoom":14,"layers":["OpenStreetMap"],"image layers":[],"overlays":[],"resizable":false,"fullscreen":false,"scrollwheelzoom":true,"cluster":false,"clustermaxzoom":20,"clusterzoomonclick":true,"clustermaxradius":80,"clusterspiderfy":true,"geojson":"","clicktarget":"","imageLayers":[],"locations":[{"text":"","title":"","link":"","lat":38.897699700000004,"lon":-77.03655315,"icon":""}],"imageoverlays":null}

Specify size

Since the full width option will not be optimal for most Saintapedia articles, you could specify the width. The example below is 500 pixels wide and 400 pixels tall.

{{#display_points:
1600 Pennsylvania Avenue NW, Washington, DC 20500
 |width=500|height=400
}}

Loading map...

{"minzoom":false,"maxzoom":false,"mappingservice":"leaflet","width":"500px","height":"400px","centre":false,"title":"","label":"","icon":"","lines":[],"polygons":[],"circles":[],"rectangles":[],"copycoords":false,"static":false,"zoom":false,"defzoom":14,"layers":["OpenStreetMap"],"image layers":[],"overlays":[],"resizable":false,"fullscreen":false,"scrollwheelzoom":true,"cluster":false,"clustermaxzoom":20,"clusterzoomonclick":true,"clustermaxradius":80,"clusterspiderfy":true,"geojson":"","clicktarget":"","imageLayers":[],"locations":[{"text":"","title":"","link":"","lat":38.897699700000004,"lon":-77.03655315,"icon":""}],"imageoverlays":null}

Right aligned table

Another cleaner, but slightly more complicated option is to put the map in a right aligned table. This can be done in only a few steps by creating a template using the Boilerplate template call "Map box."

See Category:Map box templates for a full list of Map box templates.

Steps

1. Come up with a name for the map, such as as "Los Alamos Field Office map"
2. Add the name of the template to the page you want to display the map surrounded by curly brackets, such as adding {{White House map}} on White House
3. Save the page
4. Click on the name of your map (a red link)
5. Select "Map box" from the Boilerplate template drop down list
6. Click on "Load"
7. Add the title "Map of.."
8. Replace "1600 Pennsylvania Avenue NW, Washington, DC 20500" with your location's mailing address or coordinates
9. Save the page

Optional

1. Add zoom by
   1. Add a line under the address/coordinates line
   2. Add " |zoom=7" to that line
   3. Increase or decrease the zoom (1 = maximum zoom out, 20 = max zoom in) - See Help:Maps (Zoom) for examples
2. "~[[White House]]" can be removed or replaced by the name of the location
3. "~West Wing" can be removed or replaced by a description of the location
4. Customize the Edit link by changing the template name, in the line above after fullurl: to match the title of the new map template
5. Add Documentation by copying the three lines below to the bottom of the template. When using the Boilerplate template, you will be reminded to add the documentation by a 3rd line in the table. Those templates created with this template that have not added documentation will be part of Category:Map templates without documentation.

Map editor

File:Map Editor Screenshot.png

Map Editor with labels

The Map editor, located at Special:MapEditor, allows editors to create maps more easily than using the wiki text.

Map View Toggle

• Map - shows the map view of Google Maps
• Satellite - shows the map view of default mapping service embedded over satellite images of the location

Action Menu

• Export to wiki code - Click on this menu item and copy its contents to add the map you created to the wiki
• Import from wiki code - Build on an existing map
• Edit map parameters - See #parameters
• Clear map - Start from the beginning with no data
• Add image overlay - Not working

Street View

Google Street View is a technology featured in Google Maps and Google Earth that provides panoramic views from positions along many streets in the world.

Zoom

• + zoom the map further in
• - zooms the map out

Data Entry Menu

Point data entry options

File:Map point details screenshot.png

Point options

File:Map point details screenshot - add link.png

Link options

• Hand (default) - Allows you to move the map by clicking and dragging
• Point - Click on a location on the map to add a data point (see the options below)
  • Popup with text
    • Title
    • Text
    • Icon
    • Group
    • Inline label
    • Visited icon
  • Link
    • Link
    • Icon
    • Group
    • Inline label
    • Visited icon
• Line
• Rectangle
• Circle
• Polygon

Additional options

There are a number of parameters that can be applied to Saintapedia's interactive maps. Multiple images is the most popular.

Mapping services

OpenLayers is default there are two other possible Mapping services (Google Maps and Leaflet).

Layers

These only works with Google Maps. |service=googlemaps needs to be added to any map

• Traffic
  • Added with |layers=traffic}
• Bike routes
  • Added with |layers=bicycling

Different mapping services

See Help:Maps (Open Layers examples) for Open Layers examples.

Basic map of DC

Maps allow just a city to be used. See Help:Maps (City) for more details.

Basic map of DC, Open Layers

See Help:Maps (Open Layers examples)#Basic map of DC

With address

Maps allow street addresses to be used. See Help:Maps (Address) for more details.

With address, open layers service

Moved to Help:Maps (Open Layers examples)#With address

Advanced

Maps also has built-in support for geocoding, displaying maps, displaying markers and geospatial shapes, adding pop-ups, and more and allows extensive customization per map, or for all maps on Saintapedia. Documentation and examples for these options have not yet been created.

Notes

• It seems as if a map fails to load, due to incorrect parameters, may prevent other maps further down the page from loading
• When listing multiple entries, you need to end each entry with an ";". This ";"needs to be omitted from the last entry.
• You will not be able to preview a map. It will say "Your browser is not compatible with Google Maps v3." You need to save your changes before you can see their effects.

Related

• Special:MapEditor - Creating maps made easy
• Help:Mapping services
• Help:Maps (Multiple locations)
• Help:Maps (Info boxes)
• Help:Maps (Centered)

Templates

• {{Map box}}

Examples

See

• Category:Pages with maps
• Category:Map box templates

External links

Could be used to improve our documentation:

• http://mapping.referata.com/wiki/Display_points#Parameters
• http://edutechwiki.unige.ch/en/Maps_(MediaWiki_extension)#Displaying_Maps_V_3.x

External examples

• specific examples (Semantic MediaWiki)
• Google Maps links (Semantic MediaWiki)