Receiving an error on spatial reference for geolocation

ChrisSergent · ‎11-18-2014

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>

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

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>

</html>

MattDriscoll · ‎11-18-2014

That won't work. the location will always be returned in 4326 coordinates.

So in showLocation() you just need to convert that point into your map's spatial reference with esri.config.geometryService.project();

Project a point | ArcGIS API for JavaScript

geometryservice-amd | API Reference | ArcGIS API for JavaScript

 function showLocation(location) {
                             //zoom to the users location and add a graphic
                             var pt = new Point(location.coords.longitude, location.coords.latitude); // this is 4326
// project this point here
// then after it's projected, add it to map
                             if (!graphic) {
                                 addGraphic(pt);
                             } else { // move the graphic if it already exists
                                 graphic.setGeometry(pt);
                             }
                             map.centerAt(pt);
                         }

ChrisSergent · ‎11-19-2014

I added the information in the require statement and the declarations and changed my code as follows (what am I doing wrong?):

// modified code starts here

function zoomToLocation(location) {

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

var params = new ProjectParameters();

params.geometries = [pt];

params.outSR = "3435";

params.transformation = "4326";

esriConfig.defaults.geometryService.project(params);

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

var params = new ProjectParameters();

params.geometries = [pt];

params.outSR = "3435";

params.transformation = "4326";

esriConfig.defaults.geometryService.project(params);

addGraphic(pt);

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

graphic.setGeometry(pt);

}

map.centerAt(pt);

}

// modified code ends here

RobertScheitlin__GISP · ‎11-19-2014

Chris,

Your issue is the the project method is an async method and you have to wait for its response before the pnt is actually projected. Your next issue is that the outSR is not expecting a string, but an actual SpatialReference object. The final issue is you are assigning a transformation (as you should be) but you are using the wkid of 4326, which is not a transformation wkid.

Here is your code updated:

<!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;
    var pt;

    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",
                     "esri/tasks/ProjectParameters",
                     "esri/SpatialReference",
                     "dojo/dom",
                     "dojo/on",
                     "dojo/parser",
                     "dojo/domReady!"], function (Map, esriConfig, Color, Extent, Point, Graphic,
      ArcGISDynamicMapServiceLayer, ArcGISTiledMapServiceLayer,
      SimpleLineSymbol, SimpleMarkerSymbol, GeometryService, ProjectParameters, SpatialReference, 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 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);
        });
      }

      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);
      }
    });
  </script>
</head>

<body onorientationchange="orientationChanged();" class="soria">
  <div id="mapDiv"></div>
</body>
</html>

ChrisSergent · ‎11-19-2014

This works. Thanks. Where does the 108190 from?

RobertScheitlin__GISP · ‎11-19-2014

Chris,

Here is info about geo tranformations

If you click on the last link "GIS Projection Engine 10.1 Datum transformation methods and appropriate geographic areas" you will get a zip file that has a pdf listing all transformations.

ReneRubalcava · ‎11-18-2014

Haha, Matt's right. My head was totally somewhere else her, sorry Chris.

ChrisSergent · ‎11-19-2014

Thanks, I documented that in my code so I would have a reference.