AnsweredAssumed Answered

Receiving an error on spatial reference for geolocation

Question asked by csergent08 Champion on Nov 18, 2014
Latest reply on Nov 19, 2014 by csergent08

I am receiving this error when I attempt to use geolocation:

Map: Geometry (wkid: 4326) cannot be converted to spatial reference of the map (wkid: 3435)

 

What do I need to add in my following code to make this work?

<!DOCTYPE html>

<html>

    <head>

        <title>Create a Map</title>

        <meta http-equiv="content-type" content="text/html; charset=utf-8">

        <meta name="viewport" content="initial-scale=1,maximum-scale=1, user-scalable=no">

        <link rel="stylesheet" href="http://js.arcgis.com/3.11/dijit/themes/claro/claro.css">

        <link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">

        <style>

            html, body, #mapDiv

            {

                padding:0;

                margin:0;

                height:100%;

                width:100%;

            }

           

            @-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>

        <script src="http://js.arcgis.com/3.11/"></script>

        <script>

            var map;

            var graphic;

            var currLocation;

            var watchId;

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

                     "esri/Color",

                     "esri/geometry/Extent",

                     "esri/geometry/Point",

                     "esri/graphic",

                     "esri/layers/ArcGISDynamicMapServiceLayer",

                     "esri/layers/ArcGISTiledMapServiceLayer",

                     "esri/symbols/SimpleLineSymbol",

                     "esri/symbols/SimpleMarkerSymbol",

                     "esri/tasks/GeometryService",

                     "dojo/dom",

                     "dojo/on",

                     "dojo/parser",

                     "dojo/domReady!"], function (Map, esriConfig, Color, Extent, Point, Graphic,

                                                  ArcGISDynamicMapServiceLayer, ArcGISTiledMapServiceLayer,

                                                  SimpleLineSymbol, SimpleMarkerSymbol, GeometryService, dom, on, parser

            ) {

                         // 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 ArcGISTiledMapServiceLayer("http://maps.decaturil.gov/arcgis/rest/services/Aerial_2014_Tiled/MapServer");

                         map.addLayer(tiled);

                         // set operational layers

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

                         // add operational layers

                         map.addLayer(operationalLayer);

 

 

                         // declare geometry service

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

 

 

                        

                         // 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 pt = new Point(location.coords.longitude, location.coords.latitude);

                             addGraphic(pt);

                             map.centerAndZoom(pt, 12);

                         }

 

 

 

 

                         function showLocation(location) {

                             //zoom to the users location and add a graphic

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

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

                         }

 

 

                     }

                    

            );

        </script>

    </head>

    <body onorientationchange="orientationChanged();" class="soria">

        <div id="mapDiv"></div>

    </body>

</html>

Outcomes