Hide Table of Contents
esri
esri/arcgis
esri/dijit
esri/dijit/analysis
esri/dijit/geoenrichment
esri/dijit/geoenrichment/ReportPlayer
esri/geometry
esri/layers
esri/renderers
esri/symbols
esri/tasks
esri/tasks/datareviewer
esri/tasks/geoenrichment
esri/tasks/locationproviders
Class: LocateButton
[ AMD Module Require | Legacy Module Require ]
require(["esri/dijit/LocateButton"], function(LocateButton) { /* code goes here */ });
Description
(Added at v3.7)
LocateButton provides a simple button to locate and zoom to the user's location.
The Locate widget is only supported on secure web pages (https) and localhost.
As of version 3.19, the Locate Button no longer displays on non-secure web apps. At version 3.18 this only applied to Google Chrome. Note that
As of version 3.19, the Locate Button no longer displays on non-secure web apps. At version 3.18 this only applied to Google Chrome. Note that
localhost is considered "potentially secure" and can be used for easy testing.
If the spatial reference of the map is not Web Mercator (wkid 3857) or WGS84 (wkid 4326) then you must set a default GeometryService in the default API configurations of esri/config so the user's location can be reprojected to the spatial reference of the map.
esriConfig.defaults.geometryService = new GeometryService("http://yourdomain.com/geometryService");Samples
Search for samples that use this class.Constructors
| Name | Summary |
|---|---|
| new LocateButton(params, srcNodeRef) | Creates a new LocateButton dijit using the given DOM node. |
CSS
esri/dijit/LocateButton | Download source
| Name | Description |
|---|---|
| loading | Class put onto the button while extent is loading. |
| locateContainer | Containing class for the widget's node. |
| tracking | Class for styling the tracking icon when the widget is actively tracking. Only applies if useTracking is set to true. |
| zoomLocateButton | Class for the button. |
Properties
| Name | Type | Summary |
|---|---|---|
| centerAt | Boolean | Centers the map to the location when a new position is returned. |
| clearOnTrackingStop | Boolean | Removes existing graphic when tracking stops. |
| geolocationOptions | Object | The HTML5 Geolocation Position options for locating. |
| graphicsLayer | GraphicsLayer | Layer in which the highlighted graphic is set to. |
| highlightLocation | Boolean | If true, the users location will be highlighted with a point. |
| infoTemplate | InfoTemplate | The infoTemplate used for the highlight graphic. |
| loaded | Boolean | Whether the widget has been loaded. |
| map | Map | Map object that this dijit is associated with. |
| scale | Number | The scale to zoom to when a users location has been found. |
| setScale | Boolean | Sets the maps scale when a new position is returned. |
| symbol | Symbol | The symbol used on the highlight graphic to highlight the users location on the map. |
| theme | String | Class used for styling the widget. |
| tracking | Boolean | Shows the current tracking state. |
| useTracking | Boolean | When enabled, the button becomes a toggle that creates an event to watch for location changes. |
| visible | Boolean | Whether the widget is visible. |
Methods
| Name | Return type | Summary |
|---|---|---|
| clear() | None | Clears the point graphic. |
| destroy() | None | Destroys the widget. |
| hide() | None | Hides the widget. |
| locate() | Promise | Goes to the users extent. |
| show() | None | Shows the widget. |
| startup() | None | Finalizes the creation of this dijit. |
Events
[ On Style Events | Connect Style Event ]
All On Style event listeners receive a single event object. Additionally, the event object also contains a 'target' property whose value is the object which fired the event.
Events
| Name | Event Object | Summary |
|---|---|---|
| load | Fires when the widget has been loaded. | |
| locate | {
error: < | Fires when the locate method has been called. |
Constructor Details
Creates a new LocateButton dijit using the given DOM node.
Parameters:
< |
Required | Various parameters to configure this dijit. See the list below for details. |
< |
Required | Reference or id of a HTML element that this dijit is rendered into. |
params properties: < |
Optional | Centers the map to the location when a new position is returned. Defaults to true. |
< |
Optional | The HTML5 Geolocation Position options for locating. Default value is { maximumAge: 0, timeout: 15000, enableHighAccuracy: true }. |
< |
Optional | If highlightLocation is on and this property is set then a graphic will be added to this layer instead of map.graphics. If you supply a graphicsLayer you can have a renderer set for printing this layer. |
< |
Optional | If true, the users location will be highlighted with a point. Default value is true. |
< |
Optional | The infoTemplate used for the highlight graphic. Default value is null. |
< |
Required | Map object that this dijit is associated with. Required. |
< |
Optional | The scale to zoom to when a users location has been found. By default scale is according to accuracy in meters returned from geolocation. |
< |
Optional | Sets the maps scale when a new position is returned. Defaults to true. |
< |
Optional | The symbol used on the highlight graphic to highlight the users location on the map. Default value is PictureMarkerSymbol(require.toUrl("esri/dijit") + '/images/blue-dot.png', 21, 21). |
< |
Optional | Class used for styling the widget. Default value is "LocateButton". |
< |
Optional | When enabled, the button becomes a toggle that creates an event to watch for location changes. Defaults to false. |
< |
Optional | Whether the widget is visible by default. Default value is true. |
Sample:
var locateButton = new LocateButton({
map: map
}, "<dom_id>");Property Details
<Boolean
BooleanCenters the map to the location when a new position is returned. (Added at v3.8)
Known values:
true | falseDefault value:
true<Boolean
BooleanRemoves existing graphic when tracking stops. (Added at v3.11)
Known values:
true | falseDefault value:
false<Object
ObjectThe HTML5 Geolocation Position options for locating. Refer to Geolocation API Specification for details.
Default value:
{ maximumAge: 0, timeout: 15000, enableHighAccuracy: true}<GraphicsLayer
GraphicsLayerLayer in which the highlighted graphic is set to. If
null, highlighted graphic will be added to map.graphics. (Added at v3.9)<Boolean
BooleanIf true, the users location will be highlighted with a point.
Known values:
true | falseDefault value:
true<InfoTemplate
InfoTemplateThe infoTemplate used for the highlight graphic.
<Map
MapMap object that this dijit is associated with.
<Boolean
BooleanSets the maps scale when a new position is returned. (Added at v3.8)
Known values:
true | falseDefault value:
true<Symbol
SymbolThe symbol used on the highlight graphic to highlight the users location on the map.
Default value:
PictureMarkerSymbol(require.toUrl("esri/dijit") + '/images/blue-dot.png', 21, 21)<Boolean
BooleanShows the current tracking state. If the widget is currently watching for new positions or not. (Added at v3.8)
Known values:
true | false<Boolean
BooleanWhen enabled, the button becomes a toggle that creates an event to watch for location changes. (Added at v3.8)
Known values:
true | falseDefault value:
falseMethod Details
Finalizes the creation of this dijit. This method should be called after the constructor for this dijit is called and before letting the users interact with it.
Event Details
[ On Style Events | Connect Style Event ]
Fires when the locate method has been called.