« Previous Chapter 11: SelectionAPI    Back to Index

Chapter 12: GeometryFilter

The class IWGeometryFilter supports features to filter geometries from an layer, draw them on a map and style them with different render options. The following chapter demonstrates the usage of this class. An example can be seen here: view example

12.1 Load Module and initialize

To use the IWGeometryFilter you need to load the module and initialize the class in the 'onmoduleload' listener with following code snippet:

var geometryFilter;
	
IWEventManager.addListener(IWLoader, 'onmoduleload', function(event) {
	if (event.name == 'geometryfilter') {
		geometryFilter = new IWGeometryFilter();	
		//now you can use geometryFilter
	}
});

IWLoader.loadModules(['geometryfilter']);

12.2 Get layers

To get all supported layers which are available for this module you can call the function getLayers(callback). The parameter 'callback' is a function which is called when the result is available. The following example shows how you can show the available layers in an selectbox:
geometryFilter.getLayers(function(success,layers) {
if(success) {
	var layersSelect = document.getElementById('layersSelectBox');

	for(var i=0; i<layers.length; i++) {
		var option = document.createElement("option");
		var textnode = document.createTextNode(layers[i].layerName);
		option.appendChild(textnode);                
		layersSelectBox.appendChild(option);
	}	
}
'Success' shows whether the layers are successfully loaded or not. The 'result' parameter contains the layers and has following format:
[
    {
        layerName: "Gemeinden",
        layerId: "Gemeinden"
    },
    {
        layerName: "Bundesländer",
        layerId: "Bundesländer"
    }
]

12.3 Request geometries and attributes from a layer.

The requested geometries and attributes can be bounded to an given area and can be filtered. The result is a list of geometries with the associated attributes. The following code snippet select geometries in an given boundingbox with a prefix filter that select only postal codes starting with 5.
var layerId = 'PLZ';
var zoom = 10;
var area = {topleft: "697526,6759257", bottomright: "789250,6667533"};
var filters = [{type: "prefix", key: "PLZ", value: "5"}];

geometryFilter.getLayer(layerId, area, filters, zoom, function(success, result) {
	if (success) 
	{
	//do something with the result
	}
});
The result has following format (javascript array):
[
    {
        id: "PLZ.3507",
        parts: [
            {
                coordinates: "890703,6523679,18,-179, ...",
                holes: []
            }
        ],
        values: {
            ID: "50127",
            NAME: "Bergheim"
        },
        boundingBox: {
        	bottomright: {
        		x: 1674401,
        		y: 6475995
        	},
        	topleft: {
        		x: 1211400,
        		y: 6810561
        	}
        }
    }
]

"Parts" can be used to draw the polygons for example with an IWMapRenderer. The list of coordinates is compressed while only the offset values of the first both entries is listed. The attribute "holes" can be used to draw complex polygons (see IWMapRenderer.drawComplexPolygon). These coordinates are also listed with the offset values.

"Values" contains all attributes of this geometry.

12.4 Get only attributes from a layer

In some cases you don't need the geometry, but only the attributes. E.g. for a list of items of a layer. The following example filtered the requested items to only postalcodes which started with 5. From this set we want the first 10 hits (parameter offset and limit can be used for pagination!).
var layerId = 'PLZ';
var filters = [{type: "prefix", key: "ID", value: "5"}];

geometryFilter.getLayerAttributes(layerId, filters, 0, 10, function(success,result) {
	if(succes) {
		//do something with the result
	}
}); 
The result has following format:
[
    {
        id: "PLZ.3507",
        values: {
            ID: "50127",
            NAME: "Bergheim"
        }
    },
    {
    ...
    }
]

12.5 Draw a layer on the map

If you don't want to draw the requested geometries yourself on the map, you can use the function drawLayer(). drawlayer initialize a IWMapRenderer and draw the requested geometries on the map. Therefore you can set rendering options to style the polygons. With rendering options for highlighting the style changes on mouseOver. If no render option is set a random render option for every polyon is selected. With the parameter 'options' you can set textAttributes (draw values in the center of a polygon) and change the content of tooltips

With following code snippet you select geometries in an given boundingbox with a prefix filter that select only postal codes starting with 5. In the center of each polygon we write the name attribute

var layerId = 'PLZ';
var area = {topleft: "697526,6759257", bottomright: "789250,6667533"};
var filters = [{
	type: "prefix", 
	key: "ID", 
	value: "5"
}];

var renderOptions = {
	fill: 'rgb(255,255,255)',
	strokeWidth: '2',
	fillOpacity: '0.2'
};

var highlightOptions = {
	fill: 'rgb(255,0,0)',
	strokeWidth: '3',
	fillOpacity: '0.5'
};

var options = {};
options.textAttributes = {value:'NAME',
	renderOptions: {
		fill: 'red',
		fontSize: '15px'
	},
	boxAttributes: {
		fill: 'white'
	}
};
options.tooltip = {value:'$ID$ $NAME$'}


geometryFilter.drawLayer(layer, area, filters, renderOptions, highlightOptions, map, function(result) {
	//do additional things with the result
}, options);

if you have already initialize a IWGeometryFilter you can reset it (clear all renderers and shapes) with the function clear().

   « Previous Chapter 11: SelectionAPI    Back to Index