topic 'Zoom to' hyperlink in infoTemplate/infoWindow in ArcGIS JavaScript Maps SDK Questions

'Zoom to' hyperlink in infoTemplate/infoWindow

PeggyCorey — Thu, 06 Feb 2014 18:11:33 GMT

Hello.

I'm a newbie to the ArcGIS Javascipt API. But I've noticed the "Zoom to" hyperlink in the infoWindow that pops up using the infoTemplate class does not zoom properly. It appears to only be zooming to 1 graphic for a record containing many graphics - it's a merged set of graphics in 1 record in the geodatabase. Is there a way to control this "Zoom to" functionality to tell it to zoom to the entire set of graphics?

Thanks for the help!

Re: 'Zoom to' hyperlink in infoTemplate/infoWindow

Montgomery_CountyPlanning_Depa — Fri, 02 May 2014 18:36:24 GMT

I have an infoTemplate/infoWindow on a point. The 'Zoom to' link in it doesn't work very well. (The zoomed point in not in the exact center on the map after clicking the 'zoom to' link)

However, the 'Zoom to' link in the infoWindow of a polygon feature works right. It zooms such that the polygon in on the center of the map.

I am using ArcGIS JavaScript API version 3.9.

Is anyone else having the same issue? Any resolutions? Anyone from Esri, please comment. Thanks!

Re: 'Zoom to' hyperlink in infoTemplate/infoWindow

RaymondGoins — Sat, 11 Dec 2021 17:58:00 GMT

@pacofa
Without seeing the results returned from your query it is hard to help. But you may have to check the geometry being returned, check to see if more than one, and if so loop through and create your extent based off those results.

@mcplng
My want to start your own tread if not having the same issue the author has. That way the help provided is not being bounced back and forth. But to answer your question I use this to zoom to features. You have to use a different set of functions to zoom to a point.

symbol =  new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
                      new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
                      new Color([0, 255, 255]), 5),
                      new Color([255, 255, 0, 0.25])
);
psymbol = new SimpleMarkerSymbol(
                      SimpleMarkerSymbol.STYLE_CIRCLE, 8,
                      new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
                        new Color([0, 255, 255]), 8),
                        new Color([255, 255, 0, 0.25])
);
function featureZoom(feature)
{
      map.graphics.clear();
      ftype = feature.geometry.type;
      //console.log(feature);
      if(ftype == "point")
      {
        var pt = feature.geometry;
        var factor = 1; //some factor for converting point to extent
        var extent = new esri.geometry.Extent(pt.x - factor, pt.y - factor, pt.x + factor, pt.y + factor, pt.spatialReference);
        map.setExtent(extent.expand(60)); // change this control the zoom
        showFeature(feature);
      } else {
        var fExtent = feature.geometry.getExtent().expand(3);
        map.setExtent(fExtent);
        showFeature(feature);
      }
}

function showFeature (feature)
{
      map.graphics.clear();
      ftype = feature.geometry.type;
      if(ftype == "point")
      {
        feature.setSymbol(psymbol)
        setTimeout(function(){map.graphics.clear()}, 3000);
      } else {
        feature.setSymbol(symbol);
        setTimeout(function(){map.graphics.clear()}, 3000);
      }
      map.graphics.add(feature);
}

The showfeature function just highlights the feature for 3 seconds. The colors can be set by changing the symbol and psymbol variables.

Ray

Re: 'Zoom to' hyperlink in infoTemplate/infoWindow

Montgomery_CountyPlanning_Depa — Mon, 05 May 2014 13:06:20 GMT

@craygo,
Thanks for your reply. How are you calling the showFeature function when you click on the 'zoom to' hyperlink within the infoTemplate / infowindow to override the default zooming behavior? Any sample code to override the default 'zoom to' behavior?

Re: 'Zoom to' hyperlink in infoTemplate/infoWindow

RaymondGoins — Sat, 11 Dec 2021 17:58:03 GMT

You have to loop through your results then push them into an object to be used for the showfeature function.

here is a little of the code. Granted this is inside a custom function.

/***** this would be in your function to create the infowindow ****/
// "results" would be the response from your query
StFeatures = results.features;
StResults = {displayFieldName: null, features:[]};
for (var i = 0; i < scount; i++)
{
  var sResult = StFeatures;
  //alert(sResult);
  if (!StResults.displayFieldName){ StResults.displayFieldName = sResult.displayFieldName }
  StResults.features.push(sResult);
 }
var stlist = streetList(StResults); // create list to populate the div
$("#stlist").html(stlist); //jQuery to fill div with id stlist with the table... can use arcgis function for this also
$("#stlist").show("slow"); //jQUery to show the datagrid which is hidden by default
/******* End ******/

        function streetList(results)
        {
          var template = "";
          var sn = results.features;
          template = "<i>Streets Found: " + sn.length + "</i>";
          template += "<table border='1'>";
          template += "<tr>"
          template += "</tr>";
          for (var i = 0, il = sn.length; i < il; i++)
          {
            template += "<tr>";
            template += "<td>"+ sn.attributes["FULLADDRESS"] +"</td>";
            template += '<td><a href="#" onclick="featureZoom(StResults.features['+ i +']); return false;">(Zoom To)</a></td>';
            template += "</tr>";
          }

          template += "</table>";

          return template;
        }

    function showFeature (feature)
    {
      map.graphics.clear();
      ftype = feature.geometry.type;
      if(ftype == "point")
      {
        feature.setSymbol(psymbol)
        setTimeout(function(){map.graphics.clear()}, 3000);
      } else {
        feature.setSymbol(symbol);
        setTimeout(function(){map.graphics.clear()}, 3000);
      }
      map.graphics.add(feature);
    }

    function featureZoom(feature)
    {
      map.graphics.clear();
      ftype = feature.geometry.type;
      //console.log(result);
      if(ftype == "point")
      {
        var pt = feature.geometry;
        var factor = 1; //some factor for converting point to extent
        var extent = new esri.geometry.Extent(pt.x - factor, pt.y - factor, pt.x + factor, pt.y + factor, pt.spatialReference);
        map.setExtent(extent.expand(60));
        showFeature(feature);
      } else {
        var fExtent = feature.geometry.getExtent().expand(3);
        map.setExtent(fExtent);
        showFeature(feature);
      }

    }

Hopefully you can dismantle my logic LOL

I use 2 functions to zoom to the feature one to zoom to the feature "featureZoom" the other to highlight the feature for a couple seconds "showFeature".

Ray