Select to view content in your preferred language

Symbol cut-off on highlighted features

4619
8
Jump to solution
05-22-2015 10:20 AM
BhavinSanghani
Frequent Contributor

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>

0 Kudos
1 Solution

Accepted Solutions
thejuskambi
Frequent Contributor

I did not understand what exactly you meant by symbol cutoff. If you are saying that both the points are not clearly visible then, that is because you are taking the pionts extent.

just use

vFeaturesExtent = vFeaturesExtent.expand(1.5);

that should make the points visble at properly

View solution in original post

8 Replies
thejuskambi
Frequent Contributor

I did not understand what exactly you meant by symbol cutoff. If you are saying that both the points are not clearly visible then, that is because you are taking the pionts extent.

just use

vFeaturesExtent = vFeaturesExtent.expand(1.5);

that should make the points visble at properly

TimWitt2
MVP Alum

Thejus,

that seems to be what he is looking for. You could even use 1.1 to just slightly zoom out.

Tim

BhavinSanghani
Frequent Contributor

Hi Thejus,

I understand what you are saying about point extent. How can I take extent such a way that can include symbol's extent as well?

expand() works great in the sample application I sent. But it doesn't work fine in my environment with different set of services. It may be because my dynamic service is not web mercator, it has spatial reference 102719 (2264). Any thoughts on this?

I am still trying to reproduce same way in the sample application for better clarity.

0 Kudos
thejuskambi
Frequent Contributor

It shouldn't matter which projection system you use. The 1.5 and 1.1 is a factor like 1.5 times the existing width.

its a matter for selecting the correct factor for your need.

0 Kudos
BhavinSanghani
Frequent Contributor

You mean existing width of the mapDiv? It's bit confusing here.

When we say expand(1.5), based on the documentation (Extent | API Reference | ArcGIS API for JavaScript ), I expected the map will be expanded 50% bigger. Then I thought, it will be zoomed-in. But actually it is zooming out.

Let's say if xmin = 100 then expand(1.5) will make it 150 or 50? I compared extent before and after expand but couldn't conclude how the extent is calculated based on the factor.

0 Kudos
BhavinSanghani
Frequent Contributor

I guess when we say factor = 1.5 that means 50% geographical area you see more than the current extent. Correct me if this is wrong.

0 Kudos
TimWitt2
MVP Alum

Hey Bhavin,

I have marked Thejus as the correct answer, since he supplied you with the relevant code.

Tim

NikhilSharma
Deactivated User

Hi Bhavin,

I completely agree with Thejus here because the problem you are facing is mainly because the simple marker symbol size chosen by you is very high i.e. 24 pixels as compared to the size the of the feature which is comparatively very smaller. The only feasible workaround in this case would be to use the myFeatureExtent.expand() method and set its value accordingly as per your data and requirements.

Regards,

Nikhil

0 Kudos