OpenLayers OpenLayers

Map Viewer Service

MetaCarta's "Map Viewer Service" is a way for anyone to create a map, displaying markers with content which can be viewed in a popup. It supports a number of different URL paramaters to control the display of the map, and the Map Viewer Service can then be included in an iframe to display the data that is needed.

Parameters

  • controls: controls selects the controls to be used on the Map. Defaults to "panzoom,mouse". The options are:
    • panzoom -- the normal pan/zoom controls, good for small maps
    • panzoombar -- The zoombar control, allows you to drag a slider to select a zoom level. Good for use on larger maps.
    • mouse -- the mouse dragging controls: Without these, the map cannot be moved by clicking and dragging. This may be useful where you want a map to only show one area.
  • center: Location for center of map. Format is "lat,lon", ex. center=42,-71
  • zoom: zoom level, starting from the whole world at level 0. Integer value from 0->16. Ex: zoom=10
  • data: URL of data file. Data file format described below.

Example query string: 

?controls=panzoombar,mouse&center=42,-71&zoom=10&data=http://www.openlayers.org/dev/examples/textfile.txt

Data File

The data file is powered by OpenLayers.Layer.Text?. This Layer creates markers and appropriate popups for files in a tab-seperate-values format. Microsoft Excel or OpenOffice Calc can export this file format.

The first row of the data file should be a header line, with the column names of the data. Each column should be delimited by a tab space. The possible columns are:

  • point: lat,lon of the point where a marker is to be placed
  • lat: Latitude of the point where a marker is to be placed
  • lon: Longitude of the point where a marker is to be placed
  • iconURL: URL of marker icon to use.
  • iconSize: Size of Icon to use.
  • iconOffset: Where the top-left corner of the icon is to be placed relative to the latitude and longitude of the point.
  • title: The text of the 'title' is placed inside an 'h2' marker inside a popup, which opens when the marker is clicked.
  • description: The text of the 'description' is placed below the h2 in the popup. this can be plain text or HTML.

Example Datafile: 

lat	lon	title	description	iconSize	iconOffset	icon
10	20	title	description	21,25		-10,-25		http://www.openlayers.org/dev/img/marker.png

Another Example Datafile: (using a default marker) 

point   title   description
536014.688747043,12772225.5456489       My title        My description

Creating MVS in an iframe

Once you have created your MVS query string, you can create an iframe which contains the MVS page, which will display a map inside your page. Example code: 

<iframe 
src="http://www.openlayers.org/viewer/?controls=panzoom,mouse&center=42,-71&zoom=10&data=http://www.openlayers.org/dev/examples/textfile.txt" 
style="width:400px; height:400px"></iframe>