topic Re: Can 3D symbols in 4.2 get highlighted when clicking to see popup? in ArcGIS JavaScript Maps SDK Questions

Can 3D symbols in 4.2 get highlighted when clicking to see popup?

DavidChrest — Tue, 24 Jan 2017 13:28:59 GMT

Is there a way to have my 3D point symbols (primitive: "cube" in this case) highlighted in some way when I click them for a popup in the 3D SceneView?

Re: Can 3D symbols in 4.2 get highlighted when clicking to see popup?

RalucaNicola1 — Tue, 24 Jan 2017 15:52:30 GMT

Hi David,

Not yet, that's a long-awaited feature and we are currently working on it.

Depends on your use case, but for cube symbols you could imitate that behaviour by cloning the graphic when the user clicks on it and changing the color & size. You can get the clicked graphic using view.hitTest(). Then you add the new graphic to the view.graphics. That way it will look like the graphic is selected:

Re: Can 3D symbols in 4.2 get highlighted when clicking to see popup?

DavidChrest — Sun, 12 Dec 2021 03:38:28 GMT

OK, thanks so much Raluca. He is the code that worked for me. Code from David Coley at this post https://community.esri.com/message/636169-jsapi-40-popup-set-highlight-graphic-on-feature-layer-click?q=4%20highlight%20cli… helped as well.

view.on("click", function (event) { //hitTest used to create a selection graphic for the popup
                view.hitTest(event.screenPoint).then(function (response) { //screenPoint
                    var resultGraphic = response.results[0].graphic;
                    var symbol = new PointSymbol3D({
                        symbolLayers: [new ObjectSymbol3DLayer({
                            width: 400,
                            height: 400,
                            anchor: "bottom",
                            resource: {
                                primitive: "cube"
                            },
                            material: {
                                color: [85, 255, 0, 0.5]
                            }
                        })]
                    });
                    view.graphics.removeAll();
                    if (resultGraphic) {
                        var selectionGraphic = resultGraphic.clone();
                        selectionGraphic.symbol = symbol;
                        view.graphics.add(selectionGraphic);
                    }
                });
            });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍