Overview

Create a full customizable and pluggable Form widget for GeoSpatial selection with GeoCoder

• Overview
• Motivation
• Proposal
• Feedback
• Backwards Compatibility
• Voting

Proposed By

Alessio Fabiani (afabiani)

Assigned to Release

TBD, tentatively 1.5 or 1.6

State

Choose one of: Under Discussion, In Progress, Completed, Rejected, Deferred

Motivation

Developing MapStore for several customers, we identified a commonly used and required form widget very useful on a wide variety of projects.

What we propose to implement basically, is a pluggable and configurable form widget providing a set of selectors allowing the MapStore user to create a "Region Of Interest" on the map.

The widget will be fully pluggable and will allow a user to draw a ROI on the map using different methods selectable through a combo-box:

1. Square Bounding Box selection
2. Custom Polygon
3. A Circle
4. A Buffer
5. A GeoCoder

Square Bounding Box selection

The user will be able to drow a sqaure bounding box on the map. The ROI will be represented by the LL-UR coordinates of the ebvelope.

Custom Polygon

The user will be able to draw a polygon on the map. The double click will close the selection. The ROI will be represented by the geometry.

A Circle

The user will be able to draw a circle on the map by selecting the center first and then the radius. The ROI will be represented by the geometry.

A Buffer

The user will be asked for a point on the map and a buffer size in meters. The pluggable WPS service will compute the buffer and the new geometry will be drawn on the map. The ROI will be represented by the geometry.

A GeoCoder

The GeoCoder will make use of the pluggable GeoServer WFS service. The user will be able to choose between a single free-text location or an address plus a number. Once the service has found the records, a drop-down list will be shown to the user. A click on the selected voice will add the geocoded geometry to a grid.

The grid shows all the geocoded locations selected by the user. The latter will be able to remove one or all the records from the grid, or add more records through the controller above.

If 2 or more geometries are present on the grid (selected by the user) the widget will make use of a pluggable GeoServer WPS JTS-Union process to create a single geometry collection. The ROI will be represented by the geometry.

Proposal

The SpatialSelectorField

The widget will be a collapsible form FieldSet containing the selection modes and pluggable services.

The proposed interface is like the following

Ext.namespace('gxp.widgets.form');
gxp.widgets.form.SpatialSelectorField = Ext.extend(Ext.form.FieldSet, {

	xtype : 'gxp_spatial_selector_field',

	/** api: config[mapPanel]
	 *  ``Object``
	 *  The MapStore viewport object reference.
	 */
	mapPanel : null,
	/** Private **/
	map : null,

	/** api: config[showSelectionSummary]
	 *  ``Boolean``
	 *  Whether we want to show or not the selection summary as a pop-up on the map.
	 */
	showSelectionSummary : true,

	/** api: config[geodesic]
	 *  ``Boolean``
	 * Whether to use geodesic area adjustement or not.
	 */
	geodesic : true,

	/** api: config[spatialSelectors]
	 *  ``Object``
	 * Enable/disable spatial selectors options.
	 */
	spatialSelectors : [{
		name : 'BBOX',
		label : 'Bounding Box',
		value : 'bbox'
	}, {
		name : 'Polygon',
		label : 'Polygon',
		value : 'polygon'
	}, {
		name : 'GeoCoder',
		label : 'Administrative Areas',
		value : 'geocoder'
	}],

	/** api: config[spatialFilterOptions]
	 *  ``String``
	 * The target CRS used to transform the geometry selection.
	 * If null no transformation will be applied.
	 */
	spatialSourceCRS : 'EPSG:4326',

	/** api: config[spatialFilterOptions ]
	 *  ``Object``
	 * Default CRS limits if not selection has been made. Must be compliant with the map CRS.
	 */
	spatialFilterOptions : {
		lonMax : 20037508.34, //90,
		lonMin : -20037508.34, //-90,
		latMax : 20037508.34, //180,
		latMin : -20037508.34 //-180
	},

	/** api: config[defaultStyle]
	 *  ``Object``
	 */
	defaultStyle : {
		"strokeColor" : "#ee9900",
		"fillColor" : "#ee9900",
		"fillOpacity" : 0.4,
		"strokeWidth" : 1
	},

	/** api: config[selectStyle]
	 *  ``Object``
	 */
	selectStyle : {
		"strokeColor" : "#ee9900",
		"fillColor" : "#ee9900",
		"fillOpacity" : 0.4,
		"strokeWidth" : 1
	},

	/** api: config[temporaryStyle]
	 *  ``Object``
	 */
	temporaryStyle : {
		"pointRadius" : 6,
		"fillColor" : "#FF00FF",
		"strokeColor" : "#FF00FF",
		"label" : "Select",
		"graphicZIndex" : 2
	},

	// Begin pluggable services.
	/** api: config[wpsManagerID]
	 *  ``String``
	 *  WPS Manager Plugin ID .
	 */
	wpsManagerID : null,

	/** api: config[wpsUnionProcessID]
	 *  ``String``
	 *  ID of the WPS Union Process .
	 */
	wpsUnionProcessID : 'JTS:union',

	/** api: config[wpsBufferProcessID]
	 *  ``String``
	 *  ID of the WPS Buffer Process .
	 */
	wpsBufferProcessID : 'JTS:buffer',

	/** api: config[wpsBaseURL]
	 *  ``String``
	 *  WPS Base URL .
	 */
	wpsBaseURL : null,

	/** api: config[wfsBaseURL]
	 *  ``String``
	 *  WFS Base URL .
	 */
	wfsBaseURL : null,
	// End pluggable services.

	// Begin default FieldSet layout config.
	autoHeight : true,
	hidden : false,
	autoWidth : true,
	collapsed : false,
	checkboxToggle : true,
	autoHeight : true,
	layout : 'table',
	bodyCssClass : 'aoi-fields',
	layoutConfig : {
		columns : 1
	},
	// End default FieldSet layout config.

	// Begin i18n.
        /* i18n section here ... */

The widget can be attached to any Form or Panel with the following syntax:

	{
		xtype:'gxp_spatial_selector_field',
		mapPanel: this.target.mapPanel,
		showSelectionSummary: this.showSelectionSummary,
		defaultStyle: this.defaultStyle,
		selectStyle: this.selectStyle,
		temporaryStyle: this.temporaryStyle
		// more config options here (see APIs) ...
	}],

Feedback

This section should contain feedback provided by members who may have a problem with the proposal.

Backwards Compatibility

The new code will be compatible with GXP and MapPanel. Should be therefore backward compatible with all versions of MapStore.

Notice that for the Buffer and GeoCode selectors, the widget will need the WPSClientManager connected to a GeoServer WPS instance and the WFSDataStore connected to a GeoServer WFS instance.

Voting

Alessio Fabiani: +1
Mauro Bartolomeoli: +1
Lorenzo Pini: +1
Tobia Di Pisa: +1