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

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

Platform:

OpenLayers

Task:

Discussion:

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.

Example:

<html>
<head>
  <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',
			'http://vmap0.tiles.osgeo.org/wms/vmap0',
			{layers: 'basic'},
			{isBaseLayer: true}
		);

		// add the OSGeo map
		map.addLayer(OSGeoLayer);
		
		// zoom and center
		if(!map.getCenter()){
			map.zoomToMaxExtent();
		}
		
		// 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
		StudySitesLayer.addFeatures(CreateSphericalMercatorFeatureFromGeographicCoordinates(-160,66));
		StudySitesLayer.addFeatures(CreateSphericalMercatorFeatureFromGeographicCoordinates(-151,64));
		StudySitesLayer.addFeatures(CreateSphericalMercatorFeatureFromGeographicCoordinates(-146,68));
		map.addLayer(StudySitesLayer);
	 }
	 
	 // 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, convertedPoint.lat),
				{some:'data'}
		);
		return feature
	 }
 </script>  

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