JavaScript, OpenLayers

OpenLayers – Custom Style for Individual Features

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);

2 thoughts on “OpenLayers – Custom Style for Individual Features

  1. Hi
    Its nice post.
    I am competing my academic project using geoserver+http apache+post GIS+ext ..
    In my project i want to add google map as base layer but don’t know how to fetch google map to my code.I am using open street map but ..its not looking good….can u please help me to complete my academic project. Thanks in advance

Leave a Reply

Your email address will not be published. Required fields are marked *

three × three =