Skip to content
This repository has been archived by the owner on May 6, 2021. It is now read-only.

SpatialSelectorField Form Widget for MapStore

Lorenzo Natali edited this page Jun 30, 2014 · 7 revisions

A pluggable and configurable Form Fieldset, providing several ways to setup a Region Of Interest on the Map Viewport.

The widget allows to enable/disable different methods selectable through a combo-box:

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

Example Usage

me.roiFieldSet = {
ref: 'roiFieldSet',
xtype:'gxp_spatial_selector_field',
mapPanel: this.target.mapPanel,
loadingMaskId: 'change-matrix-form-panel',
wpsManager: this.wpsManager,
wpsUnionProcessID: "JTS:union",
wpsBufferProcessID: "JTS:buffer",
wfsBaseURL: "http://localhost:8180/geoserver/wfs?",
spatialOutputCRS: "EPSG:4326",
showSelectionSummary: true,
zoomToCurrentExtent: true,
defaultStyle: {
 "fillColor"   : "#FFFFFF",
 "strokeColor" : "#FF0000",
 "fillOpacity" : 0.5,
 "strokeWidth" : 1
},
selectStyle: {
  "fillColor"   : "#FFFFFF",
  "strokeColor" : "#FF0000",
  "fillOpacity" : 0.5,
  "strokeWidth" : 1
},
temporaryStyle: {
  "strokeColor": "#ee9900",
  "fillColor": "#ee9900",
  "fillOpacity": 0.4,
  "strokeWidth": 1
},
labelStyle: {
  "fontColor": "#a52505",
  "fontSize": "18px",
  "fontFamily": "Courier New, monospace",
  "fontWeight": "bold",
  "label": "${label}",
  "labelOutlineColor": "white",
  "labelOutlineWidth": 5
},
bufferOptions: {
  "minValue": 1,
  "maxValue": 1000000,
  "decimalPrecision": 2,
  "distanceUnits": "m"
},
geocoderTypeName : "it.geosolutions:geocoder",
geocoderTypeTpl : "<tpl for=\".\"><hr><div class=\"search-item\"><h3>{name}</span></h3>Parent: {custom}</div></tpl>",
geocoderTypeRecordModel:[
 {
   "name":"id",
   "mapping":"id"
 },
 {
   "name":"name",
   "mapping":"properties.name"
 },
 {
   "name":"custom",
   "mapping":"properties.parent"
 },
 {
   "name":"geometry",
   "mapping":"geometry"
 }
],
geocoderTypeSortBy:"name",
geocoderTypeQueriableAttributes:[
   "name"
 ]
};

gxp.widgets.form.SpatialSelectorField

inherits from

  • Ext.form.FieldSet

Summary

Properties

xtype : 'gxp_spatial_selector_field'


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

	/** api: config[mapPanel]
	 *  ``Object``
	 *  The OL Map object reference.
	 */
	map : null

	/** api: config[currentExtent]
	 *  ``Object``
	 *  The Spatial Extent summary projected to the output CRS.
	 */
	currentExtent : null

	/** api: config[loadingMaskId]
	 *  ``Object``
	 *  Super-panel ID for Loading Mask.
	 */
	loadingMaskId: 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[zoomToCurrentExtent]
	 *  ``Boolean``
	 *  Whether we want to automatically zoom to the current extent.
	 */
	zoomToCurrentExtent : false

	/** api: config[bufferOptions]
	 *  ``Object``
	 * Buffer spatial selector options.
	 */
	bufferOptions : {
		"minValue": 1,
		"maxValue": 1000,
		"decimalPrecision": 2,
		"distanceUnits": "m"
	 }

	/** 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  : 'Circle',
		label : 'Circle',
		value : 'circle'
	}, {
		name  : 'Buffer',
		label : 'Buffer',
		value : 'buffer'
	}, {
		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.
	 */
	spatialOutputCRS : 'EPSG:900913'

	/** 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
	}

	/** api: config[labelStyle]
	 *  ``Object``
	 */
	labelStyle : {
		'fontColor': '#a52505',
		'fontSize': "14px",
		'fontFamily': "Courier New, monospace",
		'fontWeight': "bold",
		'label': '${label}',
		'labelOutlineColor': "white",
		'labelOutlineWidth': 5
	}
	
	// Begin pluggable services.
	/** api: config[wpsManager]
	 *  ``Object``
	 *  WPS Manager Plugin .
	 */
	wpsManager : 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[wfsBaseURL]
	 *  ``String``
	 *  WFS Base URL .
	 */
	wfsBaseURL : "http://localhost:8180/geoserver/wfs?"
	// End pluggable services.

	// //////////////////////////////////////////////////////////////
	// GeoCoding Panel Config
	// //////////////////////////////////////////////////////////////
	
	/** api: config[geocoderTypeName]
	 *  ``String``
	 *  geocoderTypeName .
	 */
	geocoderTypeName : "it.geosolutions:geocoder_limits"

	/** api: config[geocoderTypeTpl]
	 *  ``String``
	 *  geocoderTypeTpl .
	 */
	geocoderTypeTpl : "<tpl for=\".\"><hr><div class=\"search-item\"><h3>{name}</span></h3>{custom}</div></tpl>"
	
	/** api: config[geocoderTypeRecordModel]
	 *  ``Object``
	 *  geocoderTypeRecordModel .
	 */
	geocoderTypeRecordModel:[
 		{
		    name:"id",
		    mapping:"id"
		},
		{
	   		name:"name",
	   		mapping:"properties.name"
		},
		{
	   		name:"custom",
	   		mapping:"properties.parent"
		},
		{
	   		name:"geometry",
	   		mapping:"geometry"
		}
 	]

	/** api: config[geocoderTypeSortBy]
	 *  ``String``
	 *  geocoderTypeSortBy .
	 */
	geocoderTypeSortBy:"name"

	/** api: config[geocoderTypeQueriableAttributes]
	 *  ``Object``
	 *  geocoderTypeQueriableAttributes .
	 */
	geocoderTypeQueriableAttributes:[
		"name"
	]

	/** api: config[geocoderTypeDisplayField]
	 *  ``String``
	 *  geocoderTypeDisplayField .
	 */
	geocoderTypeDisplayField:"name"

	/** api: config[geocoderTypePageSize]
	 *  ``Integer``
	 *  geocoderTypePageSize .
	 */
	geocoderTypePageSize : 10
	
	// //////////////////////////////////////////////////////////////
	// END - GeoCoding Panel Config
	// //////////////////////////////////////////////////////////////

	// 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
	}

i18n

	/** api: config[title]
	 * ``String``
	 * Text for ROI FieldSet Title (i18n).
	 */
	title : "Region Of Interest"

	/** api: config[title]
	 * ``String``
	 * Text for ROI FieldSet Title (i18n).
	 */
	selectionMethodLabel : "Selection Method"

	/** api: config[comboEmptyText]
	 * ``String``
	 * Text for empty Combo Selection Method (i18n).
	 */
	comboEmptyText : "Select a method.."

	/** api: config[comboSelectionMethodLabel]
	 * ``String``
	 * Text for Label Combo Selection Method (i18n).
	 */
	comboSelectionMethodLabel : "Selection"

	/** api: config[northLabel]
	 * ``String``
	 * Text for Label North (i18n).
	 */
	northLabel : "North"

	/** api: config[westLabel]
	 * ``String``
	 * Text for Label West (i18n).
	 */
	westLabel : "West"

	/** api: config[eastLabel]
	 * ``String``
	 * Text for Label East (i18n).
	 */
	eastLabel : "East"

	/** api: config[southLabel]
	 * ``String``
	 * Text for Label South (i18n).
	 */
	southLabel : "South"

	/** api: config[setAoiTitle]
	 * ``String``
	 * Text for Bounding Box fieldset (i18n).
	 */
	setAoiTitle : "Bounding Box"

	/** api: config[setAoiText]
	 * ``String``
	 * Text for Bounding Box Draw button (i18n).
	 */
	setAoiText : "Draw Box"

	/** api: config[setAoiTooltip]
	 * ``String``
	 * Text for empty Combo Selection Method (i18n).
	 */
	setAoiTooltip : 'Enable the SetBox control to draw a ROI (Bounding Box) on the map'

	/** api: config[areaLabel]
	 * ``String``
	 * Text for the Selection Summary Area Label (i18n).
	 */
	areaLabel : "Area"

	/** api: config[perimeterLabel]
	 * ``String``
	 * Text for the Selection Summary Perimeter Label (i18n).
	 */
	perimeterLabel : "Perimeter"

	/** api: config[radiusLabel]
	 * ``String``
	 * Text for the Selection Summary Radius Label (i18n).
	 */
	radiusLabel : "Radius"

	/** api: config[centroidLabel]
	 * ``String``
	 * Text for the Selection Summary Centroid Label (i18n).
	 */
	centroidLabel : "Centroid"
	
    /**
     * Property: latitudeEmptyText
     * {string} emptyText of the latitude field
     */
    latitudeEmptyText : 'Y'
	 
    /**
     * Property: longitudeEmptyText
     * {string} emptyText of the longitude field
     */
    longitudeEmptyText : 'X'

	/** api: config[geocodingFieldSetTitle]
	 * ``String``
	 * Text for the Geocoding FieldSet Title (i18n).
	 */
	geocodingFieldSetTitle : "GeoCoder"
	
	/** api: config[geocodingPanelTitle]
	 * ``String``
	 * Text for the Geocoding Panel Title (i18n).
	 */
	geocodingPanelTitle : "Selected Locations"
	
	/** api: config[geocodingPanelBtnRefreshTxt]
	 * ``String``
	 * Text for the Geocoding Panel Button Refresh (i18n).
	 */
	geocodingPanelBtnRefreshTxt : "Show Geometries"
	
	/** api: config[geocodingPanelBtnDestroyTxt]
	 * ``String``
	 * Text for the Geocoding Panel Button Destroy (i18n).
	 */
	geocodingPanelBtnDestroyTxt : "Hide Geometries"
	
	/** api: config[geocodingPanelBtnDeleteTxt]
	 * ``String``
	 * Text for the Geocoding Panel Button Delete (i18n).
	 */
	geocodingPanelBtnDeleteTxt : "Delete Location"
	
	/** api: config[geocodingPanelLocationHeader]
	 * ``String``
	 * Text for the Geocoding Panel Location Column Header (i18n).
	 */
	geocodingPanelLocationHeader: "Location",
	geocodingPanelLocationSize:90,
	geocodingPanelLocationSortable:true,
	
	/** api: config[geocodingPanelCustomHeader]
	 * ``String``
	 * Text for the Geocoding Panel Custom Column Header (i18n).
	 */
	geocodingPanelCustomHeader: "Parent"
	geocodingPanelCustomSize: 100
	geocodingPanelCustomSortable: true
	
	
	/** api: config[geocodingPanelGeometryHeader]
	 * ``String``
	 * Text for the Geocoding Panel Geometry Column Header (i18n).
	 */
	geocodingPanelGeometryHeader: "Geometry WKT"
	geocodingPanelGeometrySize: 30
	geocodingPanelGeometrySortable: false
	
	/** api: config[geocodingPanelBtnSelectAllTxt]
	 * ``String``
	 * Text for the Geocoding Panel Button Select All (i18n).
	 */
	geocodingPanelBtnSelectAllTxt : "Check All" 

	/** api: config[geocodingPanelBtnDeSelectAllTxt]
	 * ``String``
	 * Text for the Geocoding Panel Button Select All (i18n).
	 */
	geocodingPanelBtnDeSelectAllTxt : "Uncheck All"

	/** api: config[geocodingPanelMsgRemRunningTitle]
	 * ``String``
	 * Text for the Geocoding Panel Button Delete (i18n).
	 */
	geocodingPanelMsgRemRunningTitle : "Remove a Locations"

	/** api: config[geocodingPanelMsgRemRunningMsg]
	 * ``String``
	 * Text for the Geocoding Panel Button Delete (i18n).
	 */
	geocodingPanelMsgRemRunningMsg : "Would you like to remove the selected locations from the list?"
	
	/** api: config[geocodingFieldLabel]
	 * ``String``
	 * Text for the Geocoding Location Field Label (i18n).
	 */
	geocodingFieldLabel : "Search a Location"
	
	/** api: config[geocodingFieldEmptyText]
	 * ``String``
	 * Text for the Geocoding Location Field Empty-Text (i18n).
	 */
	geocodingFieldEmptyText : "Type Location here..."
	
	/** api: config[geocodingFieldBtnAddTooltip]
	 * ``String``
	 * Text for the Geocoding Location Field Button Add Tooltip (i18n).
	 */
	geocodingFieldBtnAddTooltip : "Add Location to the List"
	
	/** api: config[geocodingFieldBtnDelTooltip]
	 * ``String``
	 * Text for the Geocoding Location Field Button Delete Tooltip (i18n).
	 */
	geocodingFieldBtnDelTooltip : "Clear Field"

	/** api: config[selectionSummary]
	 * ``String``
	 * Text for the Selection Summary (i18n).
	 */
	selectionSummary : "Selection Summary"

Functions

	/**
	 * api: method[reset]
	 * Fully reset the fieldset status and put it on its default configuration.
	 * 
	 */
	reset: function()

	/**
	 * api: method[addFeatureSummary]
	 * Shows a small pupup on the map near the geometry with the summary Area, Length and Centroids 
	 * whenever appliable.
	 * 
	 * @param outputValue Enum {'bbox','polygon','circle','buffer'}
	 * @param obj 
	 *    if outputValue == 'bbox': OpenLayers.Bounds
	 *    if outputValue == 'polygon','circle','buffer': OpenLayers.Feature.Vector
	 */
	addFeatureSummary : function(outputValue, obj)

	/**
	 * api: method[removeFeatureSummary]
	 * Removes the feature summary popup.
	 * 
	 */
	removeFeatureSummary : function()

	/**
	 * api: method[setCurrentExtent]
	 * Computes the current extent given the selected geometries. This method is internally called by 
	 * the selectors and also by the GeoCoder. The output value can be found on the currentExtent 
	 * property field.
	 * 
	 * @param outputValue Enum {'bbox','polygon','circle','buffer','geocoder','wps'}
	 * @param obj
	 *    if outputValue == 'bbox': OpenLayers.Bounds
	 *    if outputValue == 'geocoder': Ext.data.Store
	 *    if outputValue == 'polygon','circle','buffer','wps': OpenLayers.Feature.Vector
	 */
	setCurrentExtent : function(outputValue, obj)

	/**
	 * api: method[WPSUnionGeometriesRequest]
	 * Makes a call to the WPS Union Process trhough the WPS Manager and returns the Geometry 
	 * Collection.
	 * 
	 * @param geoms var geoms = [] of OpenLayers.Geometry
	 */
	WPSUnionGeometriesRequest : function(geoms)

Advanced Configuration Options

Unit of Measure and Reference System

The following configuration options allow to customize the

  • displayProjection: e.g. EPSG:4326 display coordinates in the indicated reference system. If null, use the map one. Available for

    • circle

    • BBOX

  • metricUnit: the unit of measure for distances and areas in the summary. default km. (other available are mi,nmi,m and so on...). Available for

    • circle

    • BBOX

  • infoSRS: display/hide the info link to spatial referenc for the bounding box srs. only for BBOX (default: true).

Clone this wiki locally