ArcGISDynamicMapServiceLayer + LayerList + Popup?

3769
7
Jump to solution
10-14-2015 11:58 AM
alexmoore
New Contributor II

Hello, first time posting question here so apologies if I omit something obvious or format incorrectly.

I am attempting to convert a Flex web application I inherited at work to a JavaScript application for enhanced functionality and better future stability.

I require my end users to be able to click on points/polylines to get their attributes, and to be able to toggle layers contained in an ArcGISDynamicMapServiceLayer (contains 10+ individual layers).

I've achieved both these functionalities in separate dev projects (one project using a LayerList widget allowing toggling of individual layers within the map service, and the other project using a popup while using an executeIdentifyTask with a map.on("click") function to get feature attributes.

Once I attempt to combine these functionalities, I run into buggy issues, ex:

     - Each LayerList widget containing layers from ALL my ArcGISDynamicMapServiceLayers (I have 4, attempting to separate their toggle-ability into separate AccordionContainers to keep them organized.

     - All layers seem to be out of scale, even if they are set to be viewable at any scale.

     - LayerList check boxes have no functionality behind them.

Is it possible to combine the functionalities of a ArcGISDynamicMapServiceLayer, LayerList, and popup + identify task upon "click"?

I tried using FeatureLayers, but performance suffered to the point of not being usable.

Thanks for any and all responses!

Will attempt to post sample code. New to JavaScript.

FYI I am working in NetBeans 8.0.2.

EDIT: script post attempt below:

var popup = new Popup({

        lineSymbol: new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,

                new Color([0, 245, 255, 0.85]), 8),

        markerSymbol: new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 10,

                new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, 10,

                                new Color([0, 255, 0, 0.25]),

                                new Color([0, 245, 255, 0])))

    }, domConstruct.create("div"));

...

var map = new Map("mapDiv", {

        basemap: "national-geographic",

        center: [-83.7, 33.9],

        zoom: 6,

        infoWindow: popup

    });

    map.on("load", mapReady);

...

var IT_ml = "MapService_URL";

    map.addLayer(new ArcGISDynamicMapServiceLayer(IT_ml));

...

var LL1 = new LayerList({

        map: map,

        layer: [ArcGISDynamicMapServiceLayer(IT_ml)]

    }, "ow_layers");

    LL1.startup();

...

function mapReady() {
        map.on("click", executeIdentifyTask);
        //create identify tasks and setup parameters
        identifyTask = new IdentifyTask(IT_ml);
        identifyParams = new IdentifyParameters();
        identifyParams.tolerance = 3;
        identifyParams.returnGeometry = true;
        identifyParams.layerIds = [0, 2, 3, 10];
        identifyParams.layerOption = IdentifyParameters.LAYER_OPTION_VISIBLE;
        identifyParams.width = map.width;
        identifyParams.height = map.height;
    }

    function executeIdentifyTask(event) {
        identifyParams.geometry = event.mapPoint;
        identifyParams.mapExtent = map.extent;
        var deferred = identifyTask
                .execute(identifyParams)
                .addCallback(function (response) {
                    return arrayUtils.map(response, function (result) {
                        var feature = result.feature;
                        var layerName = result.layerName;
                        feature.attributes.layerName = layerName;
                        if (layerName === xxx) {
                            var xxxTemplate = new InfoTemplate("xxx",
                                    "field1: ${field1}</br>field2: ${field2}");
                            feature.setInfoTemplate(xxxTemplate);
                        }

return feature;

                    });

                });

        map.infoWindow.setFeatures([deferred]);

        map.infoWindow.show(event.mapPoint);

    }

0 Kudos
1 Solution

Accepted Solutions
BenCamp
New Contributor III

Is this the functionality you're looking for?

Edit fiddle - JSFiddle

View solution in original post

7 Replies
KenBuja
MVP Esteemed Contributor

Instead of using the LayerList, take a look at this widget: http://www.arcgis.com/home/item.html?id=9b6280a6bfb0430f8d1ebc969276b109

It has scale dependency and the ability to show a subset of the layers in a service.

As for the IdentifyTask, one thing to do is to use the layer's vislbleLayers property for the layerIds property.

alexmoore
New Contributor II

Thank you for the suggestion. I did stumble upon that option when initially searching for a TOC / Layer List functionality, however with my lack of JS experience the Layer List dijit provided on ESRI's JS API reference looked much easier to enable with less configuring.

I will attempt to implement this TOC widget, though I was hoping to have "multiple" layer lists / TOC in separate content panes to keep the ArcGISDynamicMapServiceLayer services separate. Not sure if that is an option with this. A readme file would certainly help with this widget...not very intuitive IMO.

0 Kudos
alexmoore
New Contributor II

I am still very new to JS, this widget is way over my comprehension level especially with no real instructions on how to go about implementing it.

I will have to find another way.

0 Kudos
BenCamp
New Contributor III

Yes it's possible. I've combined all of them in my web app. However, I don't use the LayerList widget. Instead, I manually create a list of "toggleable" layers in an accordion. But, I'm still using the 3.12 API.

Is there any way you can post a jsfiddle?

alexmoore
New Contributor II

I would love to know how you combined all the functionalities!

Here is the link to a JS Fiddle that demonstrates the problems I am having.

Edit fiddle - JSFiddle

Had to replace my map service layers with sample ESRI layers because mine are not accessible outside the company network. Same issues persist though.

Layer List displays individual layers inside an ArcGISDynamicMapServiceLayer, and lets you check / uncheck them. However it does nothing, the default visibility published in the MXD seems to override.

Still able to click on the map and get layer attributes in a popup.

0 Kudos
BenCamp
New Contributor III

Is this the functionality you're looking for?

Edit fiddle - JSFiddle

alexmoore
New Contributor II

Yes this is exactly what I was looking for.

I was initially on the right track, I had used the ImageParameters to set default layers to be visible and allow me query their attributes with a click, yet when I tried to combine that working sample with another working sample, it threw a fit. Thought they were incompatible with each other or something. Guess it was just a matter of syntax. Still have a lot to learn.

Thank you for the assistance!

0 Kudos