popup not showing on a dynamic layer

Jose_GregorioRincon_Albarracin · ‎05-11-2020

Not sure if this is a bug, or the right forum, but think it is more API related.

I am loading a dynamic layer built from an SQL query with JS API 4.15. I'm using a QueryTableDataSource, the layer is build and visualised correctly, but trying to show a popup does not retrieve anything (lines 112-124).

Has anyone else seen this behavior, and if so, is there any workaround?

Thanks again,

Robert Scheitlin, GISP‌

Kristian Ekenes‌

Rene Rubalcava‌

<html>

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

    <title>MapImageLayer - Explore data from a dynamic workspace - 4.15</title>

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

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

    <script src="https://js.arcgis.com/4.15/"></script>

    <script>
        require([
            "esri/Map",
            "esri/views/MapView",
            "esri/layers/MapImageLayer",
            "esri/renderers/smartMapping/creators/color",
            "esri/widgets/LayerList",
            "esri/core/watchUtils"
        ], function (
            Map,
            MapView,
            MapImageLayer,
            colorRendererCreator,
            LayerList,
            watchUtils
        ) {

            const map = new Map({
                basemap: "gray-vector"
            });

            const view = new MapView({
                container: "viewDiv",
                map: map,
                zoom: 5,
                center: [-74.088, 4.969]
            });

            var queryString = "select D.*, S.EVENTOS from CONSULTA.DEPARTAMENTOS D " +
                "left join ( SELECT DPTO_NCDGO, SUM(RUV_NEVENTOS) AS EVENTOS FROM CONSULTA.RUV WHERE RUV_CVIGENCIA = '2019' GROUP BY DPTO_NCDGO HAVING SUM(RUV_NEVENTOS) > 0 ) S " +
                "on D.DPTO_NCDGO = S.DPTO_NCDGO";

            const visorLayer = new MapImageLayer({
                url: "https://vgv.unidadvictimas.gov.co/server/rest/services/RUV/Visor/MapServer",
                title: "RUV",
                listMode: "hide-children",
                sublayers: [{
                    title: "Eventos en el RUV para el año 2019",
                    id: 4,
                    opacity: 0.8,
                    source: {
                        type: "data-layer",
                        dataSource: {
                            type: "query-table",
                            workspaceId: "DataRUV",
                            query: queryString,
                            geometryType: "polygon",
                            oidFields: "objectid"
                        }
                    }
                }]
            });

            const eventosSublayer = visorLayer.sublayers.find(function (sublayer) {
                return sublayer.title === "Eventos en el RUV para el año 2019";
            });

            watchUtils.whenFalseOnce(view, "updating", function () {
                eventosSublayer
                    .createFeatureLayer()
                    .then(function (eventosFeatureLayer) {
                        return eventosFeatureLayer.load();
                    })
                    .then(createRenderer);
            });

            function createRenderer(featureLayer) {
                console.log(featureLayer.fields);

                const params = {
                    layer: featureLayer,
                    field: "EVENTOS",
                    view: view,
                    classificationMethod: "quantile"
                };

                colorRendererCreator
                    .createClassBreaksRenderer(params)
                    .then(function (response) {
                        eventosSublayer.renderer = response.renderer;

                        if (!map.layers.includes(visorLayer)) {
                            map.add(visorLayer);
                        }

                        // FALLO POPUP
                        // 1ra PRUEBA
                        eventosSublayer.popupTemplate = {
                            title: 'TITULO',
                            content: 'CONTENIDO'
                        };

                        // 2da PRUEBA
                        // eventosSublayer.popupTemplate = {
                        //     title: "{DPTO_CNMBR}",
                        //     content: [{
                        //         type: "text",
                        //         text: "Los eventos en el año 2019, fueron {EVENTOS}"
                        //     }]
                        // };

                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            }

            const layerList = new LayerList({
                view: view,
                listItemCreatedFunction: function (event) {
                    const item = event.item;
                    item.panel = {
                        content: [document.getElementById("infoDiv"), "legend"],
                        open: true
                    };
                }
            });
            view.ui.add(layerList, "top-right");
        });
    </script>
</head>

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

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

TanuHoque · ‎05-12-2020

Hi Jose,

Noah Sager‌ (thank) looped me in and I looked at this from the map service side. Without having direct access to the data, it looks like some kind of spatial reference issue, or might be a bug in the map service.

The app makes a request like the one below and the map service does not return any features.
https://vgv.unidadvictimas.gov.co/server/rest/services/RUV/Visor/MapServer/dynamicLayer/query?layer=... And nothing appears to be wrong in that request.

Could you pls reach out to Esri Support and open a ticket with data? And I can take a look at that when it comes to me.

In the meantime, I'd recommend you to follow a relatively new pattern. With that approach (a) you can author such layer with dynamic aggregation in ArcGIS Pro and the share as a map service, and (b) there is no read to write any special JS API code on the client side. You can even consume that right away in agol/portal map viewer.

Please read this blog and the help links provided in there for more info:

Blog: Dynamic Spatiotemporal Exploratory Analysis with Aggregated Results Using Time Series Data in ...

This blog covers something extra info. Looking at the sql you specified in this post, it does not look like you need those extra stuffs.

we also have two sample map services that performs dynamic aggregation. You can take a look at them as well.

Please let me know if you have any question.

Thanks.
Tanu