Create a map in web mercator projection, add a point in geographic coordinates, project the point and label it

OpenLayers: Create a map in web mercator projection, add a point in geographic coordinates, project the point and label it

Platform:

OpenLayers

Task:

Discussion:

Here is a functioning example of how to create a map in web mercator projection, add a point in geographic coordinates, project the point and label it. Make sure your page points to the OpenLayers.js file correctly.

Example:

<html>
<head>
  <title>OpenLayers: Label features 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 background layer
		map.addLayer(OSGeoLayer);
		// zoom and center
		if(!map.getCenter()){
			map.zoomToMaxExtent();
		}		
		
		//create a default style
		var MyDefaultStyle = new OpenLayers.Style({
			pointRadius: 4, 
			label: "${SiteName}", // Sitename is an attribute added to each feature
			labelXOffset: 46,
			fontFamily: "Verdana",
			fontSize: "10px",
			fillColor: "#ffffff",
			fontWeight: "normal",
			strokeColor: "#FF0000",
			strokeWidth: 1
		})
		
		//create a selected style for when feature is selected
		var MySelectedStyle = new OpenLayers.Style({
			pointRadius: 6, 
			label: "${SiteName}",
			fillColor: "#FF0000",
			strokeColor: "#ffffff",
			fontWeight: "bold",
			strokeWidth: 1
		})
			
		// create a stylemap
		var MyStyleMap = new OpenLayers.StyleMap({"default": MyDefaultStyle, "select": MySelectedStyle});
		
		// create a study sites layer
		var StudySitesLayer = new OpenLayers.Layer.Vector("Study Sites", {styleMap: MyStyleMap});
		map.addLayer(StudySitesLayer);
		
		// add a point
		// the code below submits geographic coordinates to the custom function below and gets an OpenLayers.LonLat 
		// object in return.  the code then creates a feature from the projected coordinates so it lines up with the 
		// background map in web mercator projection
		var MyLonLat = new GetWebMercatorLonLatFromWGS84GeographicCoordinates(-155,67); // see function below
		var MyPoint = new OpenLayers.Geometry.Point(MyLonLat.lon,MyLonLat.lat);
		var MyFeature = new OpenLayers.Feature.Vector(MyPoint,{SiteName: "My study site"});
		StudySitesLayer.addFeatures(MyFeature);
		
		// Create a select feature control and add it to the map.
        var select = new OpenLayers.Control.SelectFeature(StudySitesLayer, {hover: true});
        map.addControl(select);
        select.activate();
		
	}
	
	// accepts WGS84 geographic coordinates and returns
	// an OpenLayers.LonLat in Web Mercator projection
	function GetWebMercatorLonLatFromWGS84GeographicCoordinates(Lon, Lat){
		var WGS84Projection = new OpenLayers.Projection("EPSG:4326");
		var WebMercatorProjection = new OpenLayers.Projection("EPSG:900913");
		var WebMercatorLonLat = new OpenLayers.LonLat(Lon, Lat);
		WebMercatorLonLat.transform(WGS84Projection, WebMercatorProjection);
		return WebMercatorLonLat
	}
 </script>  

</head>
<body onload="init();">
	<div>This example shows a map in Web Mercator projection with a single labeled point.  The example shows how to project 
	the point from WGS84 geographic coordinates into Web Mercator projection and add it to the map.  The point is styled using an 
	OpenLayers.Style object and OpenLayers.StyleMap object.  The point's style changes if you hover over it according to the
	StyleMap.</div>
	<!-- the map div -->
	<div style="width:400; height:400" id="map_element"></div>
</body>
</html>