How do I get my LocateButton widget to work with our TiledMapService?

ChrisSergent · ‎11-12-2014

I am receiving the following error when I click on the LocateButton widget: Map: Geometry (wkid: 4326) cannot be converted to spatial reference of the map (wkid: 3435)

The url for my application is at: Decatur GIS Template

What do I need to change for the locate button to work?

Here is my code:

<!DOCTYPE html>

<html>

<head>

<title>Decatur GIS Template</title>

<style>

html, body, #mapDiv

{

padding:0;

margin:0;

height:100%;

}

#HomeButton

{

position: absolute;

top: 250px;

left: 20px;

z-index: 50;

}

#LocateButton

{

position: absolute;

top: 300px;

left: 20px;

z-index: 50;

}

</style>

var map;

require(["esri/map",

"esri/dijit/HomeButton", "esri/dijit/LocateButton",

"esri/layers/ArcGISTiledMapServiceLayer",

"esri/layers/ArcGISDynamicMapServiceLayer",

"dojo/dom", "dojo/on", "dojo/parser",

"esri/geometry/Extent", "dojo/domReady!"], function (Map, HomeButton, LocateButton, Tiled, ArcGISDynamicMapServiceLayer, dom, on, parser, Extent

) {

// set custom extent

var initialExtent = new Extent({ "xmin": 777229.03, "ymin": 1133467.92, "xmax": 848340.14, "ymax": 1185634.58, "spatialReference": { "wkid": 3435}});

map = new Map("mapDiv", {

showAttribution: false,

sliderStyle: "large",

extent:initialExtent

});

// add imagery

var tiled = new Tiled("http://maps.decaturil.gov/arcgis/rest/services/Aerial_2014_Tiled/MapServer");

map.addLayer(tiled);

// add operational layer

var operationalLayer = new ArcGISDynamicMapServiceLayer("http://maps.decaturil.gov/arcgis/rest/services/Public/InternetVector/MapServer", { "opacity": 0.5 });

map.addLayer(operationalLayer);

// add home button to get full extent

var home = new HomeButton({

map: map

}, "HomeButton");

home.startup();

// add geolocate button to find the location of the current user

geoLocate = new LocateButton({

map: map,

highlightLocation:true

}, "LocateButton");

geoLocate.startup();

}

);

</script>

</head>

</div>

</body>

</html>

DaveTimmins · ‎11-12-2014

You just need to set the default geometry service url in the esriConfig

So define

define([

'esri/config',

'esri/tasks/GeometryService',

],

function (

esriConfig,

GeometryService

) {

and then before you initialise your LocateButton dijit

esriConfig.defaults.geometryService = new GeometryService(url);

View solution in original post

DaveTimmins · ‎11-12-2014

You just need to set the default geometry service url in the esriConfig

So define

define([

'esri/config',

'esri/tasks/GeometryService',

],

function (

esriConfig,

GeometryService

) {

and then before you initialise your LocateButton dijit

esriConfig.defaults.geometryService = new GeometryService(url);

ChrisSergent · ‎11-12-2014

I updated in my AMD code. It works! Thanks Dave.

Here is my updated code for anyone that needs it:

<!DOCTYPE html>

<html>

<head>

<title>Decatur GIS Template</title>

<style>

html, body, #mapDiv

{

padding:0;

margin:0;

height:100%;

}

#HomeButton

{

position: absolute;

top: 250px;

left: 20px;

z-index: 50;

}

#LocateButton

{

position: absolute;

top: 300px;

left: 20px;

z-index: 50;

}

</style>

var map;

require(["esri/map", "esri/config",

"esri/dijit/HomeButton", "esri/dijit/LocateButton",

"esri/layers/ArcGISTiledMapServiceLayer",

"esri/layers/ArcGISDynamicMapServiceLayer",

"esri/tasks/GeometryService",

"dojo/dom", "dojo/on", "dojo/parser",

"esri/geometry/Extent", "dojo/domReady!"], function (Map, esriConfig, HomeButton, LocateButton, Tiled, ArcGISDynamicMapServiceLayer, GeometryService, dom, on, parser, Extent

) {

// set custom extent

var initialExtent = new Extent({ "xmin": 777229.03, "ymin": 1133467.92, "xmax": 848340.14, "ymax": 1185634.58, "spatialReference": { "wkid": 3435} });

map = new Map("mapDiv", {

showAttribution: false,

sliderStyle: "large",

extent: initialExtent

});

// add imagery

var tiled = new Tiled("http://maps.decaturil.gov/arcgis/rest/services/Aerial_2014_Tiled/MapServer");

map.addLayer(tiled);

// add operational layer

var operationalLayer = new ArcGISDynamicMapServiceLayer("http://maps.decaturil.gov/arcgis/rest/services/Public/InternetVector/MapServer", { "opacity": 0.5 });

map.addLayer(operationalLayer);

// declare geometry service

esriConfig.defaults.geometryService = new GeometryService("http://maps.decaturil.gov/arcgis/rest/services/Utilities/Geometry/GeometryServer");

// add home button to get full extent

var home = new HomeButton({

map: map

}, "HomeButton");

home.startup();

// add geolocate button to find the location of the current user

geoLocate = new LocateButton({

map: map,

highlightLocation: true

}, "LocateButton");

geoLocate.startup();

}

);

</script>

</head>

</div>

</body>

</html>