nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Project geolocation coords to State Plane

RobertMartin2

Hi all,

I have a State Plane-based map to which I'd like to add a point (WGS84) for the user's location. This is my code:

if (navigator.geolocation) {  navigator.geolocation.getCurrentPosition(function(location) {   gpsPoint.setLatitude(location.coords.latitude);   gpsPoint.setLongitude(location.coords.longitude);      gpsGraphic.setGeometry(gpsPoint);   gpsGraphic.setSymbol(gpsSymbol);    map.graphics.add(gpsGraphic);   map.centerAndZoom(gpsPoint, 12);    gpsIsOn = true;   }); }

So far I'm getting the error:

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

Specifically it's the centerAndZoom call that is throwing the error. I found this post which suggested using a geometry service to reproject the point:

// Project gpsPoint to State Plane var projectParams = new esri.tasks.ProjectParameters(); projectParams.geometries = [gpsPoint]; projectParams.outSR = map.spatialReference;  var defer = geometryService.project(projectParams); dojo.when(  defer,  function(projectedGeometry) {   if (projectedGeometry.length > 0) {    gpsPoint = projectedGeometry[0];   }  });

But that gives the error:

Uncaught TypeError: Cannot read property 'query' of undefined

No idea where that's coming from! I've checked the projectParams object and both the geometry and outSR look fine. Can anyone tell what I'm doing wrong here, or what a better method might be?

Many thanks

Finde mehr Beiträge mit dem Tag

Accepted answers

JasonZou

Which JSAPI version are you using?

This is the excerpt of the api source for project method:

project : function(_1e, _1f, _20, _21) {  var _22 = _2.mixin({}, this._url.query, {   f : "json"  }), _23; ...

From the source, the error message means this._url is not defined. Check the code where geometryService is defined, making sure the correct url is fed into the constructor.

All comments

JasonZou

To be able to overlay a graphic onto a map with different spatial reference correctly, reproject has to be done. Either JASPI can take care of it for us, or else we have to handle that ourselves. To figure out whether JSAPI takes the responsibility, the best way is to look at the source. We can also try it out though.

But nevertheless, I do agree that since map and the graphic to be added both have the spatial reference provided, it will be better for the JSAPI to take care of the reproject for us.

RobertMartin2

Well this is embarrassing... I thought GeometryService was a utility class that would do the projection locally. Now I see it wants a URL, so I tried the ArcGIS Online one and it works! Thanks for the snippet Jason, that was a big help.

I'm still wondering though, is this really the only way to add geometry with a different spatial reference? Seems like a lot of overhead for something so simple...

JasonZou

Which JSAPI version are you using?

This is the excerpt of the api source for project method:

project : function(_1e, _1f, _20, _21) {  var _22 = _2.mixin({}, this._url.query, {   f : "json"  }), _23; ...

From the source, the error message means this._url is not defined. Check the code where geometryService is defined, making sure the correct url is fed into the constructor.

RobertMartin2

Thanks for the tip Jason, I dropped your code in but I'm still getting "Cannot read property 'query' of undefined" when it calls geometryService.project. I can't figure out for the life of me why there's a query here... I do have a couple of query tasks initiated but I'm not using them here. And yes, all the variables are globals so they should be visible throughout.

JasonZou

I would reproject the gpsPoint after set its lat/lon. The code will look like this.

if (navigator.geolocation) {
 navigator.geolocation.getCurrentPosition(function(location) {
  gpsPoint.setLatitude(location.coords.latitude);
  gpsPoint.setLongitude(location.coords.longitude);
  
                projectToMapCoords(gpsPoint);
        });
}

function projectToMapCoords(gpsPoint) {
    // Project gpsPoint to State Plane
    var projectParams = new esri.tasks.ProjectParameters();
    projectParams.geometries = [gpsPoint];
    projectParams.outSR = map.spatialReference;

    geometryService.project(projectParams, projectCallback);
}

function projectCallback(projectParams) {
        var newPoint;

 if (projectParams.length > 0) {
  newPoint= projectParams[0];
                gpsGraphic.setGeometry(newPoint);
         gpsGraphic.setSymbol(gpsSymbol);

          map.graphics.add(gpsGraphic);
         map.centerAndZoom(newPoint, 12);

         gpsIsOn = true; 
        }
}

The code assumes that map, gpsPoint, geometryService, gpsSymbol, and gpsIsOn are global variables. If not, change the code accordingly to apply the variable scope.

Nimm an der Unterhaltung teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.