topic Re: how to customize popup functionality of webmap created via code? in ArcGIS JavaScript Maps SDK Questions

how to customize popup functionality of webmap created via code?

JoanSteinbacher — Tue, 29 Oct 2013 19:26:47 GMT

I have downloaded the basic template viewer and have created the webmap via code. See below for snippet of how I define the layers.

           //Existing Land Use (popup)
           { "url": "http://gis.tpcmaps.org/ArcGIS/rest/services/LandUse/Existing_Land_Use/MapServer/0",
             "visibility": true,
             "opacity": 0,
             "mode": 2,  //Selection-only
             "layerDefinition": {
              "minScale": 100000,
              "maxScale": 0,
             },
             "title": "popup Existing Land Use",
             "id": "popelu",
             "popupInfo": {
          "title": "Existing Land Use",        
          "fieldInfos": [
            {'fieldName': "JURISDICTION","label": "Jurisdiction","visible": true,},
            {"fieldName": "ELUSHADE","label": "Existing LU","visible": true,},           
            {"fieldName": "ELU2_DESC","label": "Description","visible": true,}           
          ],
             "description": null
             }
           }, 
           //Existing Land Use (display tiled service)
           { "url": "http://gis.tpcmaps.org/ArcGIS/rest/services/LandUse/Existing_Land_Use/MapServer",
             "visibility": false,
             "opacity": 0.75,
             "title": "Existing Land Use",
             "id": "elu",
             "description": null
           }, 
           //TT Zoning (popup)
           { "url": "http://gis.tpcmaps.org/ArcGIS/rest/services/Rezoning/Zoning/MapServer/0",
             "visibility": true,
             "opacity": 0,
             "mode": 2, //Selection-only                        
             "title": "popup TT Zoning",
             "id": "popttzon",
             "popupInfo": {
          "title": "TT Zoning",
          "fieldInfos": [
            {"fieldName": "ZONING","label": "Zoning","visible": true,},                              
          ],       
             "description": null
             }
           },             
           //TT Zoning (display dynamic service, set visibleLayers)                                  
           { "url": "http://gis.tpcmaps.org/ArcGIS/rest/services/Rezoning/Zoning/MapServer",
             "visibility": false,
             "opacity": 0.75,
             "visibleLayers": [0], //set layer to Zoning
             "title": "TT Zoning",
             "id": "ttzon",
             "description": null
           },

As you can see, I'm having to load the map service for display purposes and the individual layer for the popup functionality.

The default behavior of clicking on the map opens the popup infowindow. The issue is that there are around 20 individual layers in the webmap so the popup returns a lot of results (which is slow and/or more than the user is interested in).

Instead, when the user clicks on the map, I'd like to query the visible layers (map services), create a list of the corresponding popup layers, and use that list in the popup functionality. But where in the code would I set the layer list that the popup uses? Can that list be "refreshed" every time the user clicks on the map?

Am I over-complicating things? Is there an easier way to accomplish what I'm trying to do?

Thanks

Re: how to customize popup functionality of webmap created via code?

JoanSteinbacher — Sat, 11 Dec 2021 08:49:02 GMT

Here's what I came up with to keep the visible display layers in sync with the popup layers.

First define your layers (note the naming convention with the ids).

        webmap.itemData = {
         //IMPORTANT: Make sure the id of the popup and display layers are consistent! 
         //All popup layers need be named "pop" + {name of display layer}
         //e.g. for Existing LU, the display layer id = "elu" and the corresponding popup layer id = "popelu"
         //IMPORTANT: Make sure the popup and display layers are set to the same visibility (i.e., both 'true' or both 'false')
          "operationalLayers": [
           //Existing Land Use (popup)
           { "url": "http://gis.tpcmaps.org/ArcGIS/rest/services/LandUse/Existing_Land_Use/MapServer/0",
             "visibility": false,
             "opacity": 0,
             "mode": 2,  //Selection-only
             "layerDefinition": {
              "minScale": 100000,
              "maxScale": 0,
             },
             "title": "popup Existing Land Use",
             "id": "popelu",
             "popupInfo": {
          "title": "Existing Land Use",         
          "fieldInfos": [
            {'fieldName': "JURISDICTION","label": "Jurisdiction","visible": true,},
            {"fieldName": "ELUSHADE","label": "Existing LU","visible": true,},           
            {"fieldName": "ELU2_DESC","label": "Description","visible": true,}           
          ],
             "description": null
             }
           }, 
           //Existing Land Use (display tiled service)
           { "url": "http://gis.tpcmaps.org/ArcGIS/rest/services/LandUse/Existing_Land_Use/MapServer",
             "visibility": false,
             "opacity": 0.75,
             "title": "Existing Land Use",
             "id": "elu",
             "description": null
           },

Then in the addLayerList function, I added the indented code within the onChange function:

        dojo.forEach(layerList, function (layer) {
            menu.addChild(new dijit.CheckedMenuItem({
                label: layer.title,
                checked: layer.visible,
                onChange: function () {
                    if (layer.layer.featureCollection) {
                        //turn off all the layers in the feature collection even
                        //though only the  main layer is listed in the layer list 
                        dojo.forEach(layer.layer.featureCollection.layers, function (layer) {
                            layer.layerObject.setVisibility(!layer.layerObject.visible);
                        });
                    } else {
                        layer.layer.setVisibility(!layer.layer.visible);  //this is where the layer's visibility is toggled on/off.


[INDENT]                 //ADDITIONAL CODE    
 //Add the following to toggle the corresponding popup layer(s) in sync with the display layer. 11/20/13 jms
                        //This way the popup box functionality will only return results from visible layers. (Too many layers in the list slows down the popup functionality otherwise...)
                        //Important! Make sure in the create webmap that the popup and display layers are set to the same visibility (i.e., both 'true' or both 'false')
                     console.log("layer: '" + layer.layer.id + "', visibility changed to '" + layer.layer.visible + "'");

                 //console.log("popupid: " + map.getLayer("popelu").id);
                 //var popupId = "popelu";
                 var popupId = "pop" + layer.layer.id;
                 var popupLayer = map.getLayer(popupId);
                 popupLayer.setVisibility(!popupLayer.visible);
                 console.log("popupLayer: '" + popupLayer.id + "', visibility changed to '" + popupLayer.visible + "'");[/INDENT]                    //END OF ADDITIONAL CODE
                                       
                    }
                }
            }));
        });

Maybe not an elegant solution, but it seems to work. Hope that might help someone else.

Joan