Search code examples
javascriptarcgisheatmapesriarcgis-js-api

Convert ArcGis Geographic Coordinates Lat Long wkid: 4326 to Projected Coordinates wkid: 102000/3857


When using JS ArcGis API, is it possible to create a point in ArcGis from lat and long like this

var testPoint = new Point(-98, 38);

or this

var testPoint = new Point(-98, 38, new SpatialReference({ wkid: 4326 }));

and convert it to a different SR so that its x and y are changed automatically? E.g. to wkid 102000/3857?

CONTEXT: (Maybe you can find a workaround)

I'm using heatmap.js to draw heatmapLayers on ArcGis maps. I found some examples and the way this API ingests data is using a variable data on the following format:

var data = [
  {
    attributes: {},
    geometry: {
      spatialReference: { wkid: ****},
      type: "point",
      x: -40,
      y: 50
    }
  },
  {another point....}
];

The API itself does some parsing over data variable and then uses this method

screenGeometry = esri.geometry.toScreenGeometry(this._map.extent, this._map.width, this._map.height, parsedData.data[xParsed][yParsed].dataPoint);

to transform the parsed point (parsedData.data[xParsed][yParsed].dataPoint) before finally drawing heatmap.

The main problem is that no matter what wkid I pass to the point (**** in the code before), it interprets it as wkid: 102000, that's why I wanted to do coordinate conversion myself beforehand.

I guess it should be esri.geometry.toScreenGeometry task to actually do that conversion, but, as I said, it ignores the wkid.

Thanks before hand,


Solution

  • esri.geometry.toScreenGeometry is not what you're looking for - that converts the supplied geometry into screen coordinates (ie. pixels), which you would presumably use if you were trying to do custom overlays on the map, or control HTML elements overlapping the map itself.

    The function you want is esri.geometry.webMercatorUtils.geographicToWebMercator, which takes in a geometry in lat/long and returns it in 102100 (or 3857) specifically so it can be added to a standard ESRI JS map. From the docco:

    require([
      "esri/geometry/webMercatorUtils", ... 
    ], function(webMercatorUtils, ... ) {
      var geom = webMercatorUtils.geographicToWebMercator(candidate.location);
      ...
    });
    

    (Amusingly, this is the opposite to most coordinate system questions on SO, where people ask "why doesn't my point appear on the map" when they feed in lat/long coordinates. Kudos for working out why it doesn't appear. :) )