CODEWITHSUNDEEP
arcgis-js-api
Maxime
Maxime

Reputation: 357

How to get data out of a popup on a map with a feature layer from ArcGIS-api for javascript and reuse that data?

I am using a map with feature layers from ArcGIS and the popup to see some data when the user click on a symbol (feature). Is there a way to style the popups exactly the way we want ? In other words, how could I get the data out of the popup, not display the popup but open a modal with that data instead ? Is that even possible ?

Upvotes: 0

Views: 760

Answers (1)

cabesuon
cabesuon

Reputation: 5270

This are actually two questions, can you style the popup?, and can you use your own "popup"?.

For the first one, I would say it is pretty customizable, but obviously it depends what you need.

For the second, you just need to stop the default behavior of the view popup, that is to open on right click, and then catch the event yourself to do what you want. Here is an example I made for you that shows that,

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
    <title>PopupTemplate - Auto Open False</title>

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

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

        #features {
            margin: 20px;
            height: 500px;
            width: 100%;
            overflow: auto;
        }
    </style>

    <script>
        var populationChange;
        require(["esri/Map", "esri/views/MapView", "esri/layers/Layer"], function (
            Map,
            MapView,
            Layer
        ) {
            const map = new Map({
                basemap: "dark-gray"
            });
            const view = new MapView({
                container: "viewDiv",
                map: map,
                zoom: 7,
                center: [-87, 34]
            });
            Layer.fromPortalItem({
                portalItem: {
                    id: "e8f85b4982a24210b9c8aa20ba4e1bf7"
                }
            }).then(function (layer) {
                map.add(layer);
                view.popup.autoOpenEnabled = false; // <- disable view popup auto open
                view.on("click", function (event) { // <- listen to view click event
                    if (event.button === 0) { // <- check that was left button or touch
                        view.whenLayerView(layer).then(function (layerView) {
                            const query = layerView.layer.createQuery();
                            query.geometry = view.toMap(event);
                            query.distance = 1;
                            query.units = "meters";
                            layerView.queryFeatures(query).then(
                                response => {
                                    document.getElementById("features").innerText = JSON.stringify(response.features);
                                    console.error(response);
                                },
                                err => {
                                    document.getElementById("features").innerText = "Query returns an error, check console to see what happen!.";
                                    console.error(err);
                                }
                            );
                        });
                    }
                });
            });
        });
    </script>
</head>

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

</html>

Upvotes: 1

Related Questions