Nasrul Hazim Bin Mohamad

Other than the subject, what’s included here, as following:

1. Add Google Map as base map
2. How to create vector layer
3. How to add features to vector layer
4. How to use WKT and display it on Map
5. How to create dynamic label, radius & fill in OpenLayers Style
6. How to display label based on zoom level

// Create Map
var map = new OpenLayers.Map('map');

// Add Google Map as base layer
var base_layers = [
	new OpenLayers.Layer.Google("Google Physical",
	{
		type : google.maps.MapTypeId.TERRAIN
	}
	),
	new OpenLayers.Layer.Google("Google Streets", // the default
	{
		numZoomLevels : 20
	}
	),
	new OpenLayers.Layer.Google("Google Hybrid",
	{
		type : google.maps.MapTypeId.HYBRID,
		numZoomLevels : 20
	}
	),
	new OpenLayers.Layer.Google("Google Satellite",
	{
		type : google.maps.MapTypeId.SATELLITE,
		numZoomLevels : 22
	}
	)];

// Add Base map to Map
map.addLayers(base_layers);

// Create a vector layer & add to the Map
var v = new OpenLayers.Layer.Vector('Vector Layer');
map.addLayer(v);

// Create a WKT, Read WKT and assign it's attributes / data
var wkt = new OpenLayers.Format.WKT();
var feature = wkt.read('POINT(101.073433 4.665741)');

feature.attributes.label = 'this is label';
feature.attributes.radius = 10;
feature.attributes.fill = '#ff0000';

// Create a custom style for above WKT
// fillColor will fetch it's value from feature.attributes.fill using context.getFill
// label will fetch it's value from feature.attributes.label using context.getLabel
// pointRadius will fetch it's value from feature.attributes.radius using context.getRadius

var style = new OpenLayers.Style(
	{
		strokeColor : "#FFFFFF",
		strokeOpacity : 1,
		strokeWidth : 1,
		fillColor : "${getFill}",
		fillOpacity : 0.75,
		pointRadius : "${getRadius}",
		pointerEvents : "visiblePainted",
		label : "${getLabel}"
	},
	{
		context :
		{
			getLabel : function (f)
			{
				// display label if the zoom level more than 12
				if(f.layer.map.getZoom() > 12) {
					return feature.attributes.label;
				}
				
				return '';
			},
			getRadius : function (f)
			{
				return parseInt(f.attributes.radius);
			},
			getFill : function (f)
			{
				return f.attributes.fill;
			}
		}
	}
	);

// set style name for this feature's style
var styleName = 'custom_style';

// set styleName to feature.renderIntent
feature.renderIntent = styleName;

// add style to Vector layer style map
v.styleMap.styles[styleName] = style;

// add feature to Vector layer
v.addFeatures([feature]);

// redraw the Vector layer
v.redraw();

// set center & zoom level
map.setCenter(new OpenLayers.LonLat(101.073433,4.665741).transform('EPSG:4326', 'EPSG:900913'), 7);