CoordinateControl class

The CoordinateControl class allows coordinates to be consumed and parsed in multiple formats and notation styles.

AMD Module Require

require(['jimu/dijit/CoordinateControl'], function(CoordinateControl) { /* code goes here */ });

Constructor


new CoordinateControl(params) Creates a CoordinateControl dijit. Parameters: <widget> parentWidget—Required. The widget in which the dijit will be used. <bool> input—Optional. Accepts input coordinates or converts coordinates to another format. The default is true. <string> label—Optional. Provides a title above the coordinate control. If this parameter is not set, no title will be provided. <bool> showCopyButton—Optional. Displays the Copy button. The default is false. <bool> showFormatButton—Optional. Displays the Format button. The default is false. <number> zoomScale—Optional. The scale at which the Zoom button displays. <bool> showDeleteButton—Optional. Displays the Delete button. The default is true. Note: <bool> showDeleteButton is only used if <bool> input is false. <bool> showExpandButton—Optional. Displays the Expand button. The default is true. Note: <bool> showExpandButton is only used if <bool> input is false. <string> drawButtonLabel—Optional. Provides a label for the Draw button. The default is false. <string> drawToolTip—Optional. A ToolTip message appears when you hover the pointer over the Draw Point tool. If this parameter is not set, the default ToolTip message from the main NLS file is used. <graphicsLayer> graphicsLayer—Optional. The graphics layer that displays map points. If this parameter is not set, no graphics will be displayed on the map. <string> type—Optional. Available notation formats are DD, DDM, DMS, GARS, GEOREF, MGRS, USNG, UTM, and UTM_H. If this parameter is not set, the default notation type of DD is used. Example 1: Create a coordinate control with all input buttons available. `require(['jimu/dijit/CoordinateControl'], function(CoordinateControl){ var cc1 = new CoordinateControl({ parentWidget: this, label: 'Input With All Buttons', showCopyButton: true, showFormatButton: true, drawButtonLabel: 'Add Point', drawToolTip: 'Click on map', zoomScale: '50000', graphicsLayer: this.graphicsLayer }); cc1.placeAt(this.srcNodeRef); })` Example 2: Create a coordinate control with the Draw button available. `require(['jimu/dijit/CoordinateControl'], function(CoordinateControl){ var cc2 = new CoordinateControl({ parentWidget: this, label: 'Input With Just Draw Button', drawButtonLabel: 'Add Point', drawToolTip: 'Click on map', graphicsLayer: this.graphicsLayer }); cc2.placeAt(this.srcNodeRef, 'last'); })` Example 3: Create a coordinate control with the Copy, Format, Coordinate, and Draw buttons. `require(['jimu/dijit/CoordinateControl'], function(CoordinateControl){ var cc3 = new CoordinateControl({ parentWidget: this, label: 'Input With Copy, Format and Draw Button', showCopyButton: true, showFormatButton: true, drawButtonLabel: 'Add Point', drawToolTip: 'Click on map', graphicsLayer: this.graphicsLayer }); cc3.placeAt(this.srcNodeRef, 'last'); })` Example 4: Create a coordinate control with the Copy and Format buttons. `require(['jimu/dijit/CoordinateControl'], function(CoordinateControl){ var cc4 = new CoordinateControl({ input: false, parentWidget: this, label: 'Output with copy and format buttons', showCopyButton: true, showDeleteButton: false, showFormatButton: true, drawButtonLabel: 'Add Point', drawToolTip: 'Click on map' }); cc4.placeAt(this.srcNodeRef, 'last'); })` Example 5: Create a coordinate control with the Delete and Expand buttons. `require(['jimu/dijit/CoordinateControl'], function(CoordinateControl){ var cc5 = new CoordinateControl({ input: false, parentWidget: this, label: 'Output Delete and Expand Buttons', showDeleteButton: true, showExpandButton: true, drawButtonLabel: 'Add Point', drawToolTip: 'Click on map' }); cc5.placeAt(this.srcNodeRef, 'last'); })`

Methods


getFormattedCoordinateText() Returns the formatted coordinate. Return type: string.


getCurrentMapCoordinate() Returns the current map coordinate. Return type: Point.

Events

get-coordinate-complete Runs when the map is clicked with the Map Point tool. The coordinates are returned in the desired format. Example: `require(['dojo/on','esri/layers/GraphicsLayer', 'jimu/dijit/CoordinateControl'], function(on, GraphicsLayer, CoordinateControl){ var graphicsLayer = new GraphicsLayer(); ... var cc = new CoordinateControl({ parentWidget: this, label: "Input Coordinates", showFormatButton: true, drawButtonLabel: "Add Coordinate", drawToolTip: "Add Coordinate on Map", graphicsLayer: graphicsLayer }); cc.placeAt(this.srcNodeRef); ... on(cc,'get-coordinate-complete', function(coord){ console.log(coord); }); })`

get-coordinate-complete

Runs when the map is clicked with the Map Point tool. The coordinates are returned in the desired format.

Example:

require(['dojo/on','esri/layers/GraphicsLayer', 'jimu/dijit/CoordinateControl'], function(on, GraphicsLayer, CoordinateControl){
	var graphicsLayer = new GraphicsLayer();
	...
	var cc = new CoordinateControl({
		parentWidget: this,
		label: "Input Coordinates",
		showFormatButton: true,
		drawButtonLabel: "Add Coordinate",
		drawToolTip: "Add Coordinate on Map",
		graphicsLayer: graphicsLayer
	});
	cc.placeAt(this.srcNodeRef);
	...
	on(cc,'get-coordinate-complete', function(coord){
		console.log(coord);
	});
})