Skip To Content ArcGIS for Developers Sign In Dashboard

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