Nasrul Hazim Bin Mohamad

OpenLayers – Custom Style for Individual Features

Mar
12

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

OpenLayers – Disable Mouse Wheel

Feb
24
var controls = map.getControlsByClass('OpenLayers.Control.Navigation');
 
for(var i = 0; i < controls.length; ++i)
{
	controls[i].disableZoomWheel();
}

Reference: Click Here

GeoServer, OpenLayers, PostGis – WFS-T

Jan
21

A good tutorial on WFS-T. Didn’t try it yet, but will try it soon.

http://www.gistutor.com/openlayers/22-advanced-openlayers-tutorials/47-openlayers-wfs-t-using-a-geoserver-hosted-postgis-layer.html

OpenLayers – Hover on Feature

Jan
15

Use the following to have your own custom on hover feature.

OpenLayers.Control.Hover = OpenLayers.Class(OpenLayers.Control,
	{
		defaultHandlerOptions :
		{
			'delay' : 500,
			'pixelTolerance' : null,
			'stopMove' : false
		},

		initialize : function (options)
		{
			this.handlerOptions = OpenLayers.Util.extend(
				{}, this.defaultHandlerOptions);
			OpenLayers.Control.prototype.initialize.apply(
				this, arguments);
			this.handler = new OpenLayers.Handler.Hover(
					this,
				{
					'pause' : this.onPause,
					'move' : this.onMove
				},
					this.handlerOptions);
		},

		onPause : function (e)
		{
			var target = e.target;
			if (target._featureId)
			{
				var ft = OpenLayers.Map.getLayer(target._featureId);
				var xy = e.xy;

				// do something with feature;

				// display custom info window for the feature;

				// or display label for the feature

				// position the info window using `xy`
			}
		},

		onMove : function (e)
		{
			//do something
		}
	}
);
Custom Hover on Feature and Info Window

Custom Hover on Feature and Info Window

OpenLayers – Set Layer Ordering

Jan
15

We just need to use the following in order to set the layer ordering.

var layer = map.getLayer(id);
map.setLayerZIndex(layer,1000);

Please take note, the following are the base z-index of each components in OpenLayers:

OpenLayers.Map.Z_INDEX_BASE  =
{
BaseLayer : 100,
Overlay : 325,
Feature : 725,
Popup : 750,
Control : 1000
}

Most of the layer overlays start it’s z-index from 725 + zIdx * 5(see OpenLayers.Map.setLayerZIndex() method. So if you pass a zIdx of 5, then the ordering of the overylay is 725 + (5 * 5) = 750.

You maybe have two or more layers need to be set their ordering (probably you have the mechanism of drag and drop interface for setting up layer ordering, or some sort of it), this little tips should work, as long you be able to grab the target layers – and do the swap method to change it’s ordering(use OpenLayers.Layer.getZIndex() to get the Z-Index of the particular layer).

Hope you got the idea. Please let me know if my explanation is confusing. I’ll further explain, if needed. ūüôā

OpenLayers – Capture Layer Visibility Changes

Jan
15

Solution: Use `changelayer` event to capture layer visibility changes.

map.events.register('changelayer', null, function (e)
{
	if (e.property === 'visibility')
	{
		// do something
	}
}
);

OpenLayers – Accessing Feature using `featureadded` Event.

Jan
14

We might need to alter a feature or to extract a particular attributes upon feature added to the layer. So we need to register an event named `featureadded` for the target layer.

function newVectorLayer(name, option)
{
	var n = new OpenLayers.Layer.Vector(name, option);
	n.events.register('featureadded', null, function (e)
	{
		// do something
	}
	);
	return n;
}

p/s: use `featuresadded` if you need to access when all features are added.

OpenLayers – Custom Feature Style

Jan
14
OpenLayers: Custom Feature Style

OpenLayers: Custom Feature Style

Topic: OpenLayers РCustom Feature Style
Descriptions: To enable custom style to a particular feature by using renderIntent & adding new styleMap.

  1. Get Feature; var o = target_layer.features[3];
  2. Set Style Name; var styleName = o.id + '_style';
  3. Set render intent; o.renderIntent = styleName;
  4. Set the custom style; var style = new OpenLayers.Style({externalGraphic:'icons/marker_1.png'});
  5. Add new style to styleMap; o.layer.styleMap.styles[styleName] = style;
  6. Assign back to the layer’s feature; target_layer.features[3] = o;
  7. Call redraw method in o.layer; o.layer.redraw();