Version 3 (modified by openlayers, 6 years ago)

Change mvs to viewer in the example code to make it work -- alex

MetaCarta's MapViewerService 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 MapViewerService 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. The possible columns are:

  • 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

Creating MVS in an iframe

One 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>