Popup on mouse over on dynamic service

[EvelynHernandez]

Hello there,

Im wondering if theres a way to handle a popup on a dynamic service when the users put their mouse on a feature (on mouse over event).

I know its possible to do it with featurelayers, but since im working with dynamic service i dont know if this is possible.

I looked into the api for dynamic layers and there is not a event for on mouse over.

I share what i have on my code:

var mapp = mymap.createMap("map","topo",this.state.country[0].extent[0], this.state.country[0].extent[1],12);

var layerDefinitions = [];
 layerDefinitions[0] = "COUNTRY= '"+ this.state.COUNTRY[0].queryName+"'";
 layerDefinitions[1] = "COUNTRY= '"+ this.state.COUNTRY[0].queryName+"'";
 layerDefinitions[2] = "COUNTRY= '"+ this.state.COUNTRY[0].queryName+"'";
 layerDefinitions[4] = "COUNTRY= '"+ this.state.COUNTRY[0].queryName+"'";
var carsLayer = new ArcGISDynamicMapServiceLayer(layers.read_dynamic_ap(),{});
carsLayer .setImageFormat("png32");
carsLayer .setVisibleLayers([0]);
carsLayer .setLayerDefinitions(layerDefinitions);

var streetsLayer = new ArcGISDynamicMapServiceLayer(layers.read_dynamic_ap(),{ minScale: 6000});
streetsLayer .setImageFormat("png32");
streetsLayer .setVisibleLayers([1]);
streetsLayer .setLayerDefinitions(layerDefinitions);

var peopleLayer = new ArcGISDynamicMapServiceLayer(layers.read_dynamic_ap(),{minScale: 6000});
peopleLayer .setImageFormat("png32");
peopleLayer .setVisibleLayers([2]);
peopleLayer .setLayerDefinitions(layerDefinitions);

var countryLayer = new ArcGISDynamicMapServiceLayer(layers.read_dynamic_ap(),{});
countryLayer .setImageFormat("png32");
countryLayer .setVisibleLayers([4]);
countryLayer .setLayerDefinitions(layerDefinitions);
mapp.addLayers([countryLayer , peopleLayer ,streetsLayer , carsLayer]);

 this.setState({dynamicService: [countryLayer , peopleLayer , streetsLayer , carsLayer]});

mapp.on('click', (event)=>{
 $('.drawer_progressBar2').css('visibility',"visible");

 var identifyTask, identifyParams;
identifyTask = new IdentifyTask(layers.read_dynamic_ap());
 identifyParams = new IdentifyParameters();
 identifyParams.tolerance = 10;
 identifyParams.returnGeometry = true;
 identifyParams.layerIds = [0, 1];
 identifyParams.layerOption = IdentifyParameters.LAYER_OPTION_ALL;
 identifyParams.width = mapp.width;
 identifyParams.height = mapp.height;
 identifyParams.geometry = event.mapPoint;
 identifyParams.mapExtent = mapp.extent;

 var onlyLum = [];

//Use promisses to get results from identityTask in layers 0 and 1 
 var deferred = identifyTask.execute(identifyParams, (callback)=>{
 if(!callback.length){
 console.log("no length", callback);
 }else{
 let arrResults = callback.map(result => {
 let r = {
 features: result.feature,
 layerName: result.layerName
 }
 return r;
 });
this.setState({allElements: arrResults});
 // Show edition window for each street selected.
 this.onShowCurrent(arrResults,0);
onlyStreet = arrResults.filter(element =>{ return element.layerName=='Streets' });
 //get the first element .
 this.setState({counterTotal: onlyLum.length, counter: 1, allElements: onlyLum, currentIndex: 0});
 $('.drawer_progressBar2').css('visibility',"hidden");
 $('.wrapperTop_midTitle h6').addClass('wrapperTop_midTitle-h6');
 $('.muniTitulo').addClass('muniTitulo-40percent');
 }
},(errback)=>{
 console.log("ee",errback);
 });
//add infowindow ----------------------------------------------------
 deferred.addCallback(function (response){
 //get only the info from streets to generate infowindow .
 let res = response.filter((r)=>{return r.layerName=="Streets"});
 return arrayUtils.map(res, function (result) {
var feature = result.feature;
 var layerName = result.layerName;
 var onlyStreets = [];
 feature.attributes.layerName = layerName;
 if(layerName === 'Streets'){
 var streetsTemplate = new InfoTemplate("ID Luminaria: ${ID_STREET}",
 "NAME: ${NAME} <br />" +
 "CONCURRENT: ${CONCURRENT}<br /> " +
 "DANGER: ${DANGER} <br/> ");
 feature.setInfoTemplate(streetsTemplate);
onlyStreets .push(feature);
 }
 return feature;
 });
 });
mapp.infoWindow.setFeatures([deferred]);
 mapp.infoWindow.show(event.mapPoint);
 });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[thejuskambi · Accepted solution]

Hello Evelyn,

In ArcGISDynamicMapServiceLayer the data is rendered on the server and only the images are sent to the client, and displayed on the map. So it would be difficult / impossible to identify individual features. Whereas, in FeatureLayer the data is sent to the client and the js api renders the geometries on the map using dojo. since, these geometries are available in the browser, so some dom event can be made available for them like the mouse events.

However, you could send a identifytask request to the server onmouse-move event and try to get information when the mouse is over a particular feature(s). But that would be a bad solution/idea as a lot of requests would be sent back and forth on mouse-move, this could affect the performance of the application.

I think, showing the Popup on map-click is the best way to go for ArcGISDynamicMapServiceLayer.

Hope this was helpful.

[EvelynHernandez]

Yea, i did it in that way, I also did the example with a feature layer but it renders slower than dynamic.

Thanks for ur help