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>
