onClick on ArcGISDynamicMapServiceLayer

3394
6
Jump to solution
09-17-2015 02:25 PM
christianromero
New Contributor

Hi, I'm trying to replicate this Onclick event for a sublayer in a ArcGISDynamicMapServiceLayer  sample but i hadn't success.

Mine scenario are: I've a menu each action can show a different view of data (layers) one of those are a time TimeSlider, the time slider works fine but a need to add a function for display some data after doing a click on certain point on the map.

function inittimeSlider() {

    try{

        var opLayer = new esri.layers.ArcGISDynamicMapServiceLayer(document.getElementById('hUrl').value);

        opLayer.setVisibleLayers([CapaPosicion.FALLAS.value]);

        opLayer.id = 'timeSlider';

        opLayer.opacity = 0.6;              

       

        var component = dijit.registry.byId("timeSliderDiv");      

            if (component) {

                //destroy it

                dojo.domConstruct.destroy(component);

                dijit.registry.remove(timeSlider)

                timeSlider.destroy()

            }             

            timeSlider = new esri.dijit.TimeSlider({

                style: "width: 100%;"

            }, dojo.dom.byId("timeSliderDiv"));

            map.setTimeSlider(timeSlider);

            var timeExtent = new esri.TimeExtent();

            timeExtent.startTime = new Date("01/01/2015 UTC");

            timeExtent.endTime = new Date("08/31/2015 UTC");

            timeSlider.setThumbCount(2);

            timeSlider.createTimeStopsByTimeInterval(timeExtent, 1, "esriTimeUnitsMonths");

            timeSlider.setThumbIndexes([0, 1]);

            timeSlider.setThumbMovingRate(2000);

            timeSlider.startup();

            //add labels for every other time stop

            var labels = dojo._base.array.map(timeSlider.timeStops, function (timeStop, i) {

                //if ( i % 2 === 0 ) {

                return timeStop.getUTCFullYear();

                //} else {

                return "";

                //}

            });

            timeSlider.setLabels(labels);

            timeSlider.on("time-extent-change", function (evt) {

                var startValString = Meses(evt.startTime.getUTCMonth());

                var endValString = Meses(evt.endTime.getUTCMonth());

                dojo.dom.byId("daterange").innerHTML = "<i>" + startValString + " a " + endValString +  "  " + "<\/i>";

            });

         

            map.addLayers([opLayer]);

            map.on("load", initFunctionality);

            function initFunctionality() {

                map.on("click", doIdentify);

               var identifyTask = new esri.tasks.IdentifyTask(document.getElementById('hUrl').value);

                var identifyParams = new esri.tasks.IdentifyParameters();

                identifyParams.tolerance = 3;

                identifyParams.returnGeometry = true;

                identifyParams.layerIds = [CapaPosicion.FALLAS.value];

                identifyParams.layerOption = esri.tasks.IdentifyParameters.LAYER_OPTION_ALL;

                dojo.on(identifyTask, "complete", function (event) {

                    array.forEach(event.results, function (feature) {                     

                        if (feature.layerName == "timeSlider") {

                            alert('123456789');

                        }

                    });

                });

            }

            function doIdentify(event) {

                map.graphics.clear();

                identifyParams.geometry = event.mapPoint;

                identifyParams.mapExtent = map.extent;

                identifyTask.execute(identifyParams)

            }  

    }

        catch (e) {

            console.log("Error : " + e);

            HideProgress();

    }

}

at first I thought it was the same way to what is done in the onclick of esri.layers.FeatureLayer,

exist another way ? or I have something wrong that can not see ?

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

Christian,

   It is likely that map is already loaded before you get to running this portion of code. Seems like you need to be listening for the "layer-add" event and check if the layer added is your opLayer and if so execute you initFunctionality function.

View solution in original post

0 Kudos
6 Replies
RobertScheitlin__GISP
MVP Emeritus

Christian,

   So do you get to the identify on complete function at all when you click on the map?

0 Kudos
christianromero
New Contributor

yes, is what i did?

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Christian,

   No, I mean when you are debugging do you actually get to the identify on complete function. Maybe add a console.info('Identify Reults:',event.results);

0 Kudos
christianromero
New Contributor

I realized that the map.on("load", initFunctionality)  does not load the initFunctionality. So what i did was commenting map.on("load", initFunctionality) and  header/end of initFunctionality. Like

function inittimeSlider() {

    try{

        var opLayer = new esri.layers.ArcGISDynamicMapServiceLayer(document.getElementById('hUrl').value);

        opLayer.setVisibleLayers([CapaPosicion.FALLAS.value]);

        opLayer.id = 'timeSlider';

        opLayer.opacity = 0.6;             

      

        var component = dijit.registry.byId("timeSliderDiv");     

            if (component) {

                //destroy it

                dojo.domConstruct.destroy(component);

                dijit.registry.remove(timeSlider)

                timeSlider.destroy()

            }            

            timeSlider = new esri.dijit.TimeSlider({

                style: "width: 100%;"

            }, dojo.dom.byId("timeSliderDiv"));

            map.setTimeSlider(timeSlider);

            var timeExtent = new esri.TimeExtent();

            timeExtent.startTime = new Date("01/01/2015 UTC");

            timeExtent.endTime = new Date("08/31/2015 UTC");

            timeSlider.setThumbCount(2);

            timeSlider.createTimeStopsByTimeInterval(timeExtent, 1, "esriTimeUnitsMonths");

            timeSlider.setThumbIndexes([0, 1]);

            timeSlider.setThumbMovingRate(2000);

            timeSlider.startup();

            //add labels for every other time stop

            var labels = dojo._base.array.map(timeSlider.timeStops, function (timeStop, i) {

                //if ( i % 2 === 0 ) {

                return timeStop.getUTCFullYear();

                //} else {

                return "";

                //}

            });

            timeSlider.setLabels(labels);

            timeSlider.on("time-extent-change", function (evt) {

                var startValString = Meses(evt.startTime.getUTCMonth());

                var endValString = Meses(evt.endTime.getUTCMonth());

                dojo.dom.byId("daterange").innerHTML = "<i>" + startValString + " a " + endValString +  "  " + "<\/i>";

            });

        

            map.addLayers([opLayer]);

            map.on("load", initFunctionality);

           function initFunctionality() {

                map.on("click", doIdentify);

               var identifyTask = new esri.tasks.IdentifyTask(document.getElementById('hUrl').value);

                var identifyParams = new esri.tasks.IdentifyParameters();

                identifyParams.tolerance = 3;

                identifyParams.returnGeometry = true;

                identifyParams.layerIds = [CapaPosicion.FALLAS.value];

                identifyParams.layerOption = esri.tasks.IdentifyParameters.LAYER_OPTION_ALL;

                dojo.on(identifyTask, "complete", function (event) {

                    array.forEach(event.results, function (feature) {                    

                        if (feature.layerName == "timeSlider") {

                            alert('123456789');

                        }

                    });

                });

            }

            function doIdentify(event) {

                map.graphics.clear();

                identifyParams.geometry = event.mapPoint;

                identifyParams.mapExtent = map.extent;

                identifyTask.execute(identifyParams)

            } 

    }

        catch (e) {

            console.log("Error : " + e);

            HideProgress();

    }

}

i do not know  why  the  map.on("load", initFunctionality); it does not work but the   map.on("click", doIdentify); works well .

Maybe i not using the proper method or something else.

by the way, following the advice to add  console.info('Identify Reults:', event.results); in the original code did not work, only if i remove the lines that i said before.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Christian,

   It is likely that map is already loaded before you get to running this portion of code. Seems like you need to be listening for the "layer-add" event and check if the layer added is your opLayer and if so execute you initFunctionality function.

0 Kudos
christianromero
New Contributor

Thank you for the advice. in the class map you can find the  "layers-add-result" event , that fires after all layer were added 

so i just change this line            map.on("load", initFunctionality);

for this one

          map.on("layers-add-result", initFunctionality);

u can see the reference Map (legacy) | API Reference | ArcGIS API for JavaScript .

0 Kudos