OpenLayers OpenLayers

  1. Welcome to the User Guide
  2. OpenLayers.Map
  3. OpenLayers.Control
  4. OpenLayers.Layer
    1. OpenLayers.Layer.Markers
    2. OpenLayers.Layer.WMS

Welcome to the User Guide

Here you can find and contribute solutions and code samples using OpenLayers.

OpenLayers.Map

Here is an example that will create a page containing a full screen OpenLayers map. This is not the most basic of maps, but will work if you copy and paste the html content. 

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="EN">
	<head>
	<style>
		html,body {
			height: 99%;
			width: 99%;
		}
		#map {
			width: 100%;
			height: 100%;
			border: 1px solid black;
		}	
	</style>
	<script src='http://openlayers.org/api/OpenLayers.js'></script>
	</head>
	<body>
		<div id='map'></div>
		<script type="text/javascript">
			var map = new OpenLayers.Map('map',{maxResolution: 0.703125} );
			var wmscURL = [
				"http://wmsc1.terrapages.net/getmap?",
				"http://wmsc2.terrapages.net/getmap?",
				"http://wmsc3.terrapages.net/getmap?",
				"http://wmsc4.terrapages.net/getmap?"
			];
			var terrapagesStreetLayer = new OpenLayers.Layer.WMS( 'TerraPages Street',wmscURL, {layers: 'UnprojectedStreet', format: 'image/jpeg' }, {buffer: 1, isBaseLayer: true} );
			map.addLayer(terrapagesStreetLayer);
			map.zoomToMaxExtent();		
		</script>
	</body>
</html>

OpenLayers.Control

TODO

OpenLayers.Layer

TODO

OpenLayers.Layer.Markers

Below is an example of how to create a Markers Layer, and add a single marker on that layer at the specified lon and lat. This will also apply an offest to the icon image, so that is can be aligned horizontally centered, vertically bottom over the position. 

var markersLayer = new OpenLayers.Layer.Markers("My Marker Layer");
var iconSize =  new OpenLayers.Size(20,20);
var iconOffset = new OpenLayers.Pixel(-(iconSize.w/2), -iconSize.h);
var marker = new OpenLayers.Marker(
	new OpenLayers.LonLat(<<lon>>,<<lat>>),
	new OpenLayers.Icon(<<iconURL>>,iconSize,iconOffset)
);
markersLayer.setVisibility(true);
markersLayer.addMarker(marker);
map.addLayer(markersLayer);

OpenLayers.Layer.WMS

TODO