AnsweredAssumed Answered

Symbol cut-off on highlighted features

Question asked by bforbhavin on May 22, 2015
Latest reply on May 27, 2015 by NSharma-esristaff

Please see the attached example (or code pasted below) and click on the Search button. You will notice that the symbol is cut-off on the highlighted features. I have put one hard coded margin value in the code. If I put higher value then it may show properly.

 

The question I have here is - how to calculate margin here, is there any API support? My customers may have different projections so, wondering this logic may work in all the cases. I want to make sure that no highlighted features are cut-off.

 

I also tried expand() of Extent class by passing negative factor value as a parameter to zoom out little bit. But that did not work as expected.

 

<!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>Create Map and add a dynamic layer</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css"/>

  <link rel="stylesheet" href="http://js.arcgis.com/3.13/dijit/themes/claro/claro.css"/>

    <style>

html, body, #mapDiv {

          padding:0;

          margin:0;

          height:100%;

      }

      #buttons {

          top: 10px;

          font-family: arial;

          right: 50px;

          position: absolute;

          width: 300px;

          z-index: 40;

      }

    </style>

    <script src="http://js.arcgis.com/3.13/"></script>

    <script>

      var map, tb, polygon, query, featureSet;

 

 

      require([

          "esri/map", "esri/toolbars/draw", "esri/layers/FeatureLayer", "esri/tasks/query", "esri/graphicsUtils", "esri/geometry/Extent",

          "esri/tasks/FeatureSet", "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleMarkerSymbol",

          "esri/graphic", "esri/geometry/Polygon", "esri/SpatialReference", "esri/layers/ArcGISDynamicMapServiceLayer",

          "dojo/_base/Color", "dojo/dom", "dojo/on", "dojo/_base/array", "dojo/domReady!"], function (

      Map, Draw, FeatureLayer, Query, graphicsUtils, Extent,

      FeatureSet, SimpleFillSymbol, SimpleLineSymbol, SimpleMarkerSymbol,

      Graphic, Polygon, SpatialReference, ArcGISDynamicMapServiceLayer,

      Color, dom, on, array) {

 

 

 

 

          map = new Map("mapDiv", {

              extent: new Extent({

                  xmin: -9959166.17,

                  ymin: 2685289.25,

                  xmax: -8628154.29,

                  ymax: 3559532.12,

                  spatialReference: {

                      wkid: 102100

                  }

              })

          });

 

 

          var dynamicMSLayer = new ArcGISDynamicMapServiceLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer");

          map.addLayer(dynamicMSLayer);

 

 

          var featureLayer = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/0", {

              mode: FeatureLayer.MODE_ONDEMAND,

          });

 

 

          var symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 24, new SimpleLineSymbol(SimpleLineSymbol.STYLE_NULL, new Color([247, 34, 101, 0.9]), 1), new Color([207, 34, 171, 0.5]));

          featureLayer.setSelectionSymbol(symbol);

 

 

          map.addLayer(featureLayer);

 

 

         

          on(dom.byId("clear"), "click", function () {

              map.graphics.clear();

              featureLayer.clearSelection();

          });

 

 

   on(dom.byId("search"), "click", searchFeatures);

 

 

  

   function searchFeatures() {

  var vSelectFeatureQuery = new Query();

  vSelectFeatureQuery.where = "OBJECTID IN (837,640)";

  featureLayer.selectFeatures(vSelectFeatureQuery, FeatureLayer.SELECTION_NEW, function(result) {

  var vFeaturesExtent = graphicsUtils.graphicsExtent(result),

  vMargin = 1000;

 

  vFeaturesExtent.ymax = vFeaturesExtent.ymax + vMargin;

  vFeaturesExtent.xmax = vFeaturesExtent.xmax + vMargin;

  if (vFeaturesExtent.ymin >= 0) {

  vFeaturesExtent.ymin = vFeaturesExtent.ymin - vMargin;

  } else {

  vFeaturesExtent.ymin = vFeaturesExtent.ymin + vMargin;

  }

 

 

  if (vFeaturesExtent.xmin >= 0) {

  vFeaturesExtent.xmin = vFeaturesExtent.xmin + vMargin;

  } else {

  vFeaturesExtent.xmin = vFeaturesExtent.xmin - vMargin;

  }

 

  map.setExtent(vFeaturesExtent);

  });

   }

 

 

      });

    </script>

  </head>

<body>

    <div id="mapDiv"></div>

    <div id="buttons">

  <input type="button" id="search" value="Search" />

  <input type="button" id="clear" value="Clear Selection" />

    </div>

</body>

</html>

Attachments

Outcomes