LocateButton works sporadically after combining with main application.

ChrisSergent · ‎11-20-2014

I have a LocateButton in my application that was working before I added my measurement tool and now it's working sometimes and sometimes not. Is there something I need to do. The Locate button script is near the end of my JavaScript:

<!DOCTYPE html>

<html>

<head>

<title>Decatur GIS Template</title>

<style>

html,

body,

#mapDiv {

padding: 0;

margin: 0;

height: 100%;

width:100%;

}

#titlePane

{

width:240px;

position:absolute;

right:20px;

bottom:50px;

background-color:White;

border-color:Black;

z-index:50;

}

.soria .dijitTitlePaneTitle {

background: #fff;

font-weight:600;

border: none;

border-bottom:solid 1px #29201A;

border-top:solid 1px #29201A;

}

.soria .dijitTitlePaneTitleHover

{

background:#eee;

}

.soria .dijitTitlePaneTitleActive

{

background:#808775;

}

.soria .dijitTitlePaneContentOuter

{

border-right: none;

border-bottom: none;

border-left: none;

}

#HomeButton {

position: absolute;

top: 95px;

left: 20px;

z-index: 50;

}

#LocateButton {

position: absolute;

top: 140px;

left: 20px;

z-index: 50;

}

#search {

display:block;

position:absolute;

z-index:3;

top:20px;

left:75px;

}

.esriScalebarLine, .esriScalebarMetricLine

{

border-color:White;

}

.esriScalebarLabel, .esriScalebarLineLabel,.esriScalebarSecondNumber, .esriScaleLabelDiv

{

text-shadow:-1px -1px 0 #fff,

1px -1px 0 #fff,

-1px 1px 0 #fff,

1px 1px 0 #fff;

}

@-webkit-keyframes

pulse

{

0%

{

opacity:1.0;

}

45%

{

opacity:.20;

}

{

100%

{

opacity:1.0;

}

@-moz-keyframes

pulse

{

0%

{

opacity:1.0;

}

45%

{

opacity:.20;

}

100%

{

opacity:1.0;

}

#map_graphics_layer {

-webkit-animation-duration: 3s;

-webkit-animation-iteration-count: infinite;

-webkit-animation-name: pulse;

-moz-animation-duration: 3s;

-moz-animation-iteration-count: infinite;

-moz-animation-name: pulse;

}

</style>

var map;

var graphic;

var currLocation;

var watchId;

var pt;

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

"esri/Color",

"esri/dijit/Geocoder",

"esri/dijit/HomeButton",

"esri/dijit/LocateButton",

"esri/dijit/Measurement",

"esri/dijit/OverviewMap",

"esri/dijit/Scalebar",

"esri/geometry/Extent",

"esri/geometry/Point",

"esri/geometry/screenUtils",

"esri/graphic",

"esri/layers/ArcGISTiledMapServiceLayer",

"esri/layers/ArcGISDynamicMapServiceLayer",

"esri/layers/LayerDrawingOptions",

"esri/renderers/SimpleRenderer",

"esri/SnappingManager",

"esri/sniff",

"esri/SpatialReference",

"esri/symbols/SimpleFillSymbol",

"esri/symbols/SimpleLineSymbol",

"esri/symbols/SimpleMarkerSymbol",

"esri/tasks/GeometryService",

"esri/tasks/ProjectParameters",

"dojo/dom",

"dojo/keys",

"dojo/on",

"dojo/parser",

"dojo/query",

"dojo/_base/Color",

"dijit/layout/BorderContainer",

"dijit/layout/ContentPane",

"dijit/TitlePane",

"dijit/form/CheckBox",

"dojo/domReady!"

], function (Map, esriConfig, Color, Geocoder,

HomeButton, LocateButton, Measurement, OverviewMap, Scalebar, Extent, Point, screenUtils, Graphic,

ArgGISTiledMapServiceLayer, ArcGISDynamicMapServiceLayer, LayerDrawingOptions, SimpleRenderer, SnappingManager, has,

SpatialReference, SimpleFillSymbol, SimpleLineSymbol, SimpleMarkerSymbol,

GeometryService, ProjectParameters, dom, keys, on, parser, query, Color

) {

parser.parse();

// set custom extent

var initialExtent = new Extent({

"xmin": 777229.03,

"ymin": 1133467.92,

"xmax": 848340.14,

"ymax": 1185634.58,

"spatialReference": {

"wkid": 3435

}

});

// create map and set slider style to small

map = new Map("mapDiv", {

showAttribution: false,

sliderStyle: "small",

extent: initialExtent

});

// add imagery

var tiled = new ArgGISTiledMapServiceLayer("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");

// begin geocoder

var geocoder = new Geocoder({

arcgisGeocoder: false,

geocoders: [{

url: "http://maps.decaturil.gov/arcgis/rest/services/Public/WebAddressLocator/GeocodeServer",

name: "Web Address Locator",

placeholder: "Find address",

outFields: "*"

}],

map: map,

autoComplete: true,

zoomScale: 600

}, dom.byId("search"));

geocoder.startup();

geocoder.on("select", showGeocodeLocation);

function showGeocodeLocation(evt) {

map.graphics.clear();

var point = evt.result.feature.geometry;

var symbol = new SimpleMarkerSymbol()

.setStyle("square")

.setColor([255, 0, 0, 0.5]);

var graphic = new Graphic(point, symbol);

map.graphics.add(graphic);

map.infoWindow.setTitle("Search Result");

map.infoWindow.setContent(evt.result.name);

map.infoWindow.show(evt.result.feature.geometry);

map.infoWindow.on('hide', function () {

map.graphics.clear();

});

}

// end geocoder

// geolocation functionality starts here

map.on("load", initFunc);

function orientationChanged() {

if (map) {

map.reposition();

map.resize();

}

function initFunc(map) {

if (navigator.geolocation) {

navigator.geolocation.getCurrentPosition(zoomToLocation, locationError);

watchId = navigator.geolocation.watchPosition(showLocation, locationError);

} else {

alert("Browser doesn't support Geolocation. Visit http://caniuse.com to see browser support for the Geolocation API.");

}

function locationError(error) {

//error occurred so stop watchPosition

if (navigator.geolocation) {

navigator.geolocation.clearWatch(watchId);

}

switch (error.code) {

case error.PERMISSION_DENIED:

alert("Location not provided");

break;

case error.POSITION_UNAVAILABLE:

alert("Current location not available");

break;

case error.TIMEOUT:

alert("Timeout");

break;

default:

alert("unknown error");

break;

}

function zoomToLocation(location) {

var geopt = new Point(location.coords.longitude, location.coords.latitude);

var params = new ProjectParameters();

params.geometries = [geopt];

params.outSR = new SpatialReference(3435);

params.transformation = 108190;

params.transformForward = true;

esriConfig.defaults.geometryService.project(params, function (projectedPoints) {

pt = projectedPoints[0];

addGraphic(pt);

map.centerAndZoom(pt, 12);

});

}

// WGS_1984_(ITRF00)_To_NAD_1983 uses the WKID of 108190 - information here: http://downloads2.esri.com/support/TechArticles/Geographic_Transformations_10.1.zip

function showLocation(location) {

//zoom to the users location and add a graphic

var geopt = new Point(location.coords.longitude, location.coords.latitude);

var params = new ProjectParameters();

params.geometries = [geopt];

params.outSR = new SpatialReference(3435);

params.transformation = 108190;

params.transformForward = true;

esriConfig.defaults.geometryService.project(params, function (projectedPoints) {

pt = projectedPoints[0];

if (!graphic) {

addGraphic(pt);

} else { // move the graphic if it already exists

graphic.setGeometry(pt);

}

map.centerAt(pt);

});

}

function addGraphic(pt) {

var symbol = new SimpleMarkerSymbol(

SimpleMarkerSymbol.STYLE_CIRCLE,

12,

new SimpleLineSymbol(

SimpleLineSymbol.STYLE_SOLID,

new Color([210, 105, 30, 0.5]),

8

),

new Color([210, 105, 30, 0.9])

);

graphic = new Graphic(pt, symbol);

map.graphics.add(graphic);

}

// geolocation functionality ends here

// add home button to get full extent

var home = new HomeButton({

map: map

}, "HomeButton");

home.startup();

// add overview map

var overviewMapDijit = new OverviewMap({

map: map,

visible: false

});

overviewMapDijit.startup();

// scalebar

var scalebar = new Scalebar({

map: map,

scalebarUnit: "dual"

});

// start measurement tool - the current layer we are measuring is the operational layer

var layerDrawingOptions = [];

var layerDrawingOption = new LayerDrawingOptions();

var sfs = new SimpleFillSymbol(

"solid",

new SimpleLineSymbol("solid", new Color([195, 176, 23]), 2),

null

);

layerDrawingOption.renderer = new SimpleRenderer(sfs);

// change 1 to the layer index that you want to modify:

layerDrawingOptions[1] = layerDrawingOption;

//dojo.keys.copyKey maps to CTRL on windows and Cmd on Mac., but has wrong code for Chrome on Mac

var snapManager = map.enableSnapping({

snapKey: has("mac") ? keys.META : keys.CTRL

});

var layerInfos = [{

layer: operationalLayer

}];

snapManager.setLayerInfos(layerInfos);

var measurement = new Measurement({

map: map

}, dom.byId("measurementDiv"));

measurement.startup();

// end measurement tool

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

geoLocate = new LocateButton({

map: map,

highlightLocation: true,

useTracking: true,

enableHighAccuracy: true

}, "LocateButton");

geoLocate.clearOnTrackingStop = true;

geoLocate.startup();

});

</script>

</head>

<span style="font-size:smaller;padding:5px 5px;">Press <b>CTRL</b> to enable snapping.</span>

</div>

</body>

</html>

ChrisSergent · ‎11-20-2014

I have based my code on other examples and integrated it all into this app. Do you think the orientation function would not work? Still learning AMD and JavaScript(all the time). For the other, see my response to Kelly above. It kind of works, but your app does the same thing that I was experiencing with my app.