Web AppBuilder for ArcGIS (Developer Edition)

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