AnsweredAssumed Answered

popup not showing on a dynamic layer

Question asked by jose.rincon on May 11, 2020
Latest reply on May 12, 2020 by ahoque-esristaff

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>

Outcomes