1

Let's consider this code from the reference (https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Popup.html#open):

view.on("click", function(evt){
  view.popup.open({
  location: evt.mapPoint,  // location of the click on the view
  title: "Some title",
});

This works. But how to open a popup at the point, specified by predefined lng,lat coords?

First try:

var point = new Point({latitude:lat,longitude:lng});
view.popup.open({
  location: point,
  title: "Some title"
});

This does not work. The reason is that created point currently disconnected from map view. Is there a way to receive screen coords (x,y) of the current view by specified (lng,lat)? In google maps api there're methods like latLngToDivPixel, latLngToDivPoint, so what argis offers for this task?

Kasheftin
  • 7,509
  • 11
  • 41
  • 68

2 Answers2

2

Looks like you're having a SpatialReference issue. Since you're creating the point via lat/lng, it's not in WebMercator, so when you add it to the map it's going to the wrong place. Here's a fixed code for you:

// this works, but needs to be in webmercator:
// var point = new Point({x:-9035831.315416021, y:3095345.196351918});
// as an alternative you can translate to webmercator on the fly:
var point = webMercatorUtils.geographicToWebMercator(new Point({latitude:28.526622,longitude:-81.914063}));
view.popup.open({
    location: point,
  title: "Some title"
});

Here is the above code in an example.

GavinR
  • 6,094
  • 7
  • 33
  • 44
  • An alternative to using the webMercatorUtils would be to use the latitude and longitude properties on the Point - see https://developers.arcgis.com/javascript/latest/api-reference/esri-geometry-Point.html. – Bjorn Svensson Aug 30 '16 at 23:17
1

The answer/issue above was correct for version 4.0 and 4.1.

However, for the newly released version 4.2, this has been simplified. Popup.location now automatically converts WGS84 (latitude, longitude) points to web mercator when map is in web mercator projection. 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <meta name="description" content="[Define custom Popup actions - 4.2]">
  <!-- 
  ArcGIS API for JavaScript, https://js.arcgis.com
  For more information about the popup-actions sample, read the original sample description at developers.arcgis.com.
  https://developers.arcgis.com/javascript/latest/popup-actions/index.html  
  -->
  <title>Define custom Popup actions - 4.2</title>

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.2/esri/css/main.css">
  <script src="https://js.arcgis.com/4.2/"></script>

  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/geometry/Point",
      "dojo/domReady!"
    ], function(
      Map,
      MapView,
      Point
    ) {

      // Create the Map
      var map = new Map({
        basemap: "topo"
      });

      // Create the MapView
      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-117, 34],
        zoom: 9
      });

      view.then(function() {
        var peak = new Point({
          latitude: 34.09916,
          longitude: -116.82485
        });
        view.popup.open({
          location: peak,
          title: "San Gorgonio Mountain",
          content: "Tallest peak in Southern California"
        });
      });
    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
</body>

</html>

https://jsbin.com/heqotom/edit?html,output

Bjorn Svensson
  • 815
  • 8
  • 21
  • what about if we have multiple points or markers on the map and we need to show popup for each. Can you please help me out at this question: https://stackoverflow.com/questions/69630872/display-info-window-on-the-multiple-coordinates-on-the-arcgis-map-in-next-js – Deep Kakkar Oct 20 '21 at 14:42