Putting a map in a web page is easy with OpenLayers. This tutorial is primarily for people who simply want to put a free map on their web page as quickly as possible. If you're a JavaScript developer, you might want to look at the OpenLayers JavaScript API as well.
Below are some basic examples for adding OpenLayers to your web page. In addition to using the map controls in the upper left corner of each map, you can also drag and/or double-click on the map itself to pan and zoom.
There is documentation for the URL params of the Map Viewer Service, to allow you to set the controls, the center of the map, or data to load.
|
Simply include the following in your page:
<iframe
src="http://openlayers.org/viewer/"
width="450" height="300"
scrolling="no"
marginwidth="0" marginheight="0"
frameborder="0">
</iframe>
|
|
|
You can also change the height and width.
<iframe
src="http://openlayers.org/viewer/"
width="300" height="200"
scrolling="no" frameborder="0"></iframe>
|
|
|
You can specify a center coordinate in latitude and longitude, along with
a zoom level using the
center and zoom URL
parameters. For example, this bit of HTML displays a map centered approximately
on Boston, Massachusetts:
<iframe
src="http://openlayers.org/viewer/?center=42.3,-71&zoom=6"
width="100%" height="250"
scrolling="no"
marginwidth="0" marginheight="0"
frameborder="0"></iframe>
The OpenLayers MapViewerService supports zoom levels from 0 (the
whole world) down to 16, which is nearly street level.
|