AnsweredAssumed Answered

add an onclick event to an image and zoom to a location when click it

Question asked by wgsl on May 19, 2016
Latest reply on Jun 8, 2016 by MidnightYell2003

Hello All, I am working on a custom widget which display a series of images and zooms to a location when click an image. Each image corresponds one point on the map. Please see codes below. I was able to successfully display the images. How to add a onclick event on each image so when users click it map is going to zoom to the location where the image was taken?  Appreciate your comments!

 

_maplayer:'http://......'

 

startup: function() {

   this.inherited(arguments);

   this._query(this._maplayer);

},

 

_query: function(mapLayer){

   var query = new Query();

   query.where = "Id > 0";

   query.outFields = [ID"];

   query.returnGeometry = true;

 

   var queryTask = new QueryTask(mapLayer);

   queryTask.on("complete", this._queryTaskExecuteCompleteHandler);

   queryTask.execute(query, this._showResults);

},

 

_showResults: function(featureSet){

   var features = featureSet.features;

   var resultUl = new Builder('<ul />');

   for (i = 0; i < features.length; i++){

    resultUl.append('<li><img src="./images/' + features[i].attributes.ID + '.jpg" height="200" width="250"</li>');

  }

   dom.byId('pictures').innerHTML = resultUl;

}

Outcomes