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

05-19-2016 12:41 PM
Occasional Contributor II

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!


startup: function() {




_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.attributes.ID + '.jpg" height="200" width="250"</li>');


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


0 Kudos
1 Reply
MVP Honored Contributor


This sounds like a pretty interesting widget. I am tagging Web AppBuilder Custom Widgets​ in order for it to potentially get more visibility and hopefully some responses!

0 Kudos