rowanwins

Zoom to features in feature layer

Discussion created by rowanwins on Feb 3, 2014
Latest reply on Feb 6, 2014 by rowanwins
Hi there,

Noob question here... I've managed to get my map going which is consuming a feature layer over a basemap, all working fine so far!

I've got a definition expression on my feature so that I'm only returning a few polygons. I'm now trying to work out how to make the map automatically zoom to the extent of the returned polygons.

Any tips would appreciated.

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Layer in a map service - [ON-DEMAND]</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dijit/themes/soria/soria.css"> 
    <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">
    <style>
    html, body, #mapDiv, .map.container {
      padding:0;
      margin:0;
      height:100%;
    }




    </style>
    
    <script>var dojoConfig = { parseOnLoad:true };</script>
    <script src="http://js.arcgis.com/3.8/"></script>
    <script>
      dojo.require("esri.map");
      dojo.require("esri.layers.FeatureLayer");
      dojo.require("dijit.TooltipDialog");

      var map;

      function init() {
        map = new esri.Map("mapDiv", { 
          basemap: "hybrid",
        });

        var featureLayer = new esri.layers.FeatureLayer("http://####/ArcGIS/rest/services/###/####/MapServer/2",{
          mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
          outFields: ["*"],
          opacity:.50
        });

        featureLayer.on("mouse-over", showTooltip);
        featureLayer.on("mouse-out", closeDialog);

        featureLayer.setDefinitionExpression("OBJECTID ='612485'");
        map.addLayer(featureLayer);
      }

      
      function showTooltip(evt){
        closeDialog();
        var tipContent = "<b>LMID</b>: " + evt.graphic.attributes.LMID +
          "<br><b>Area</b>: " + evt.graphic.attributes.QUANTITY ;
          
        var dialog = new dijit.TooltipDialog({
          id: "tooltipDialog",
          content: tipContent,
          style: "position: absolute; width: 250px; font: normal normal bold 6pt Tahoma;z-index:100"
        });
        dialog.startup();

        dojo.style(dialog.domNode, "opacity", 0.85);
        dijit.placeOnScreen(dialog.domNode, {x: evt.pageX, y: evt.pageY}, ["TL", "BL"], {x: 10, y: 10});
      }

      function closeDialog() {
        var widget = dijit.byId("tooltipDialog");
        if (widget) {
          widget.destroy();
        }
      }


    dojo.ready(init);
  </script>
</head>

<body class="soria">
  <div id="mapDiv"></div>

</body>

</html>

Outcomes