ArcGIS Maps SDK for JavaScript Popups

Question

ArcGIS Maps SDK for JavaScript Popups

26 Views Asked by user1541219 At 06 March 2024 at 14:43

I have ArcGIS for javascript 4.24 and the following code where i want to display a popup if the user clicks outside of a polygon.

view.on("click", function (evt) {
            view.hitTest(evt).then((response) => {
                // check if an existing marker is selected
                if (response.results.length  && response.results[0].graphic.popupTemplate != null) {
                    // do nothing as the popup is set to automatically open on click event
                } else {
                   
                        let newPoint = view.toMap({
                            x: evt.x,
                            y: evt.y
                        });
                        let newMarker = new Graphic(newPoint, markerSymbol);
                        positionLayer.removeAll();

                        if (!geometryEngine.contains(boundaryPolygon, newPoint)) {
                  
                           view.openPopup({
                             title: "some title",
                             content: "This location is outside the boundary",
                             location: newPoint  
                           });
        
                           
                
                        } else {
                            // Custom data handling
                            
                        }
                    
                }
            });
        });

However the openPopup function is only available in ArcGIS v 4.27

How do I open a popup in ArcGIS v 4.24? I tried the following and it doesn't work either:

view.popup.open({
                             title: "some title",
                             content: "This location is outside the boundary",
                             location: newPoint  
                           });

Original Q&A

There are 1 best solutions below

**cabesuon** · Answer 1 · 2024-03-14T17:43:26.850000

I think you just need to disable popup auto open by changing the popup property autoOpenEnabled to false.

<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>
        Code Popup Open 4.24
    </title>

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

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

    <script>
        require([
            "esri/Map",
            "esri/views/MapView",
            "esri/layers/GraphicsLayer",
            "esri/Graphic"
        ], (Map, MapView, GraphicsLayer, Graphic) => {
            const map = new Map({
                basemap: "satellite"
            });

            const view = new MapView({
                container: "viewDiv",
                map: map,
                zoom: 5,
                center: [-101.94981250000075, 41.20977753557709]
            });
            
            const graphicsLayer = new GraphicsLayer();

            const graphic = new Graphic({
                geometry: {
                    type: "point",
                    x: -101.94981250000075,
                    y: 41.20977753557709
                },
                symbol: {
                    type: "picture-marker",
                    url: "https://developers.arcgis.com/javascript/latest/sample-code/satellites-3d/live/satellite.png",
                    width: 64,
                    height: 64
                }
            });
            
            view.popup.autoOpenEnabled = false; // <-- deactivate popup auto open

            graphicsLayer.add(graphic);
            map.add(graphicsLayer);
            view.on("click", function (evt) {
                view.hitTest(evt).then((response) => {
                    if (response.results.length === 0) {
                        view.popup.open({
                            title: "Miss",
                            content: "You need to click the satellite!.",
                            location: evt.mapPoint
                        });
                    } else {
                        view.popup.feature = graphic;
                        view.popup.open({
                            title: "On Target",
                            content: "You click the satellite!.",
                            location: evt.mapPoint
                        });
                    }
                });
            });
        });
    </script>
</head>

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

</html>

Important: The action needed to disable popup auto open change from the popup (like mention above) to the view (property popupEnabled) in version 4.27 (to be fair it is bit different the logic also).

ArcGIS Maps SDK for JavaScript Popups

There are 1 best solutions below

Related Questions in POPUP

Related Questions in ARCGIS-JS-API

Trending Questions

Popular # Hahtags

Popular Questions