OpenLayers: Create an OpenLayers map in Spherical Mercator projection, project some points from geographic coordinates and add them to the map.

Task:Create an OpenLayers map in Spherical Mercator projection, project some points from geographic coordinates and add them to the map.
I needed to make an OpenLayers map to show some study areas as points. This would be easy if I didn't live in Alaska but a geographic map really compresses features this far north so I needed a good projection. Spherical Mercator works well and OpenLayers has a lot of built in support for the projection so I decided to use it. My points are stored in a database in geographic (lat/lon) coordinates so I needed a way to convert them to Spherical Mercator. The functioning web page below shows how I solved the problem.
  <title>OpenLayers Example</title>
    <script src="Openlayers/OpenLayers.js"></script>

<script defer="defer" type='text/javascript'>
	var map; // make a map
	// set up the boundaries
	bounds = new OpenLayers.Bounds(-19088463.92375,7690175.07625,-15174888.07625,11603750.92375 );
	// main function
	function init() {
		// define the map
		map = new OpenLayers.Map('map_element', {
			projection: 'EPSG:900913',
			maxExtent: bounds,
			maxResolution: 156543.0339,
			units: 'm',
			zoomLevel: 8
		// Setup OSGeo background map
		var OSGeoLayer = new OpenLayers.Layer.WMS(
			'OSGeo Basic Map',
			{layers: 'basic'},
			{isBaseLayer: true}

		// add the OSGeo map
		// zoom and center
		// add layer switcher control
		map.addControl(new OpenLayers.Control.LayerSwitcher({}));
		// create a study sites layer
		var StudySitesLayer = new OpenLayers.Layer.Vector("Study Sites");
		// add a few points to the sites layer
	 // Accepts geographic coordinates (Lon, Lat) and returns an 
	 // OpenLayers.Geometry.Point in Spherical Mercator projection
	 function CreateSphericalMercatorFeatureFromGeographicCoordinates(Lon, Lat){
		// to add geographic points to the study sites layer 
		// we need to convert them to spherical mercator
		var fromProjection = new OpenLayers.Projection("EPSG:4326");
		var toProjection = new OpenLayers.Projection("EPSG:900913");
		var convertedPoint = new OpenLayers.LonLat(Lon, Lat);
		convertedPoint.transform(fromProjection, toProjection);
		var feature = new OpenLayers.Feature.Vector(
			new OpenLayers.Geometry.Point(convertedPoint.lon,,
		return feature

<body onload="init();">
	<!-- the map div -->
	<div style="width:400; height:400" id="map_element"></div>
Back to Index