Hi
I have used the JavaScript code below and works well. What it does is, using the 'Select Fields' button I can draw a polygon to select features, and clear the selected features by clicking the 'Clear Selection' button. What I want now is to zoom to the selected features by clicking on the 'Zoom to Selected Features' (this is not in the code). Can anyone help me please with the write code?
map.on("load", initSelectToolbar);
var fieldsSelectionSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT,
new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.5]));
var content = "<b>ID No: <a target='_blank' href=${xxxx}>${IDNo}</a></b><br/><b>Sv Type: ${Sv_type}</b>";
var infoTemplate = new InfoTemplate("HSB", content);
featureLayer = new FeatureLayer("http://localhost:6080/arcgis/rest/services/webmapping/newboundary/xxxxxx", {
mode: FeatureLayer.MODE_ONDEMAND,
infoTemplate: infoTemplate,
outFields: ["*"]
});
featureLayer.setSelectionSymbol(fieldsSelectionSymbol);
featureLayer.on("selection-clear", function () {
});
map.addLayer(featureLayer);
on(dom.byId("selectFieldsButton"), "click", function () {
selectionToolbar.activate(Draw.EXTENT);
});
on(dom.byId("clearSelectionButton"), "click", function () {
featureLayer.clearSelection();
});
function initSelectToolbar(event) {
selectionToolbar = new Draw(event.map);
var selectQuery = new Query();
on(selectionToolbar, "DrawEnd", function (geometry) {
selectionToolbar.deactivate();
selectQuery.geometry = geometry;
featureLayer.selectFeatures(selectQuery,
FeatureLayer.SELECTION_NEW);
});
}
Solved! Go to Solution.
This code works. Note that you had left off the "Button" argument in the require function.
<!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.10/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css" />
<style>
html, body, #map {
padding: 0;
margin: 0;
height: 100%;
}
</style>
<script src="http://js.arcgis.com/3.10/"></script>
<script>
var map;
require([
"esri/InfoTemplate",
"esri/map",
"esri/dijit/Scalebar",
"esri/dijit/BasemapGallery",
"esri/layers/FeatureLayer",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/tasks/query",
"esri/toolbars/draw",
"dojo/dom",
"dojo/on",
"dojo/parser",
"dojo/_base/array",
"esri/Color",
"dijit/form/Button",
"esri/geometry/Extent",
"esri/graphicsUtils",
"dojo/domReady!"
],
function (
InfoTemplate, Map, Scalebar, BasemapGallery, FeatureLayer, SimpleFillSymbol, SimpleLineSymbol,
Query, Draw, dom, on, parser, arrayUtil, Color, Button, Extent, graphicsUtils
) {
parser.parse();
var selectionToolbar, featureLayer;
map = new Map("map", {
basemap: "topo",
center: [-97.33, 37.68], // longitude, latitude
zoom: 10,
sliderStyle: "medium"
});
var scalebar = new Scalebar({
map: map,
scalebarUnit: "dual",
attachTo: "bottom-left"
});
var basemapGallery = new BasemapGallery({
showArcGISBasemaps: true,
map: map
}, "basemapGallery");
basemapGallery.startup();
basemapGallery.on("error", function (msg) {
console.log("basemap gallery error: ", msg);
});
map.on("load", initSelectToolbar);
var fieldsSelectionSymbol =
new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT,
new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.5]));
var content = "<b>Status</b>: ${STATUS}" +
"<br><b>Cummulative Gas</b>: ${CUMM_GAS} MCF" +
"<br><b>Total Acres</b>: ${APPROXACRE}" +
"<br><b>Avg. Field Depth</b>: ${AVG_DEPTH} meters";
var infoTemplate = new esri.InfoTemplate("${FIELD_NAME}", content);
featureLayer = new FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Petroleum/KSPetro/MapServer/1",
{
mode: FeatureLayer.MODE_ONDEMAND,
infoTemplate: infoTemplate,
outFields: ["*"]
});
featureLayer.setSelectionSymbol(fieldsSelectionSymbol);
featureLayer.on("selection-clear", function () {
});
map.addLayer(featureLayer);
on(dom.byId("selectFieldsButton"), "click", function () {
selectionToolbar.activate(Draw.EXTENT);
});
on(dom.byId("clearSelectionButton"), "click", function () {
featureLayer.clearSelection();
});
function initSelectToolbar(event) {
selectionToolbar = new Draw(event.map);
var selectQuery = new Query();
on(selectionToolbar, "DrawEnd", function (geometry) {
selectionToolbar.deactivate();
selectQuery.geometry = geometry;
featureLayer.selectFeatures(selectQuery,
FeatureLayer.SELECTION_NEW, function () {
map.setExtent(graphicsUtils.graphicsExtent(featureLayer.getSelectedFeatures()), true);
});
});
}
});
</script>
</head>
<body class="claro">
<button id="selectFieldsButton" data-dojo-type="dijit/form/Button">Select Fields</button>
<button id="clearSelectionButton" data-dojo-type="dijit/form/Button">Clear Selection</button>
<button id="ZoomToSelectionButton" data-dojo-type="dijit/form/Button">Zoom to Selected Features</button><br>
<div id="map" data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'center'"
style="padding:0;">
<div style="position:absolute; right:20px; top:10px; z-Index:999;">
<div data-dojo-type="dijit/TitlePane"
data-dojo-props="title:'Switch Basemap', closable:false, open:false">
<div data-dojo-type="dijit/layout/ContentPane" style="width:380px; height:280px; overflow:auto;">
<div id="basemapGallery"></div>
</div>
</div>
</div>
</div>
</body>
</html>
It would be something like this:
Create a button called ZoomToButton
You could also use the graphicUtils class to put this into a single line
map.setExtent(graphicsUtils.graphicsExtent(featureLayer.getSelectedFeatures()), true);
Thanks Ken, for this handy tip. Was just looking for this. Gotta love a one-line-of-code solution.
Thanks Tim
I tried your code, however, I couldn't be able to zoom to the selected features. Do I need to put all 5 lines of codes together or in different places?
Hab,
Dumb question, did you include "esri/geometry/Extent" ?
I have had trouble with this as well, It seems like things should work but for some reason they don't.
In our case I created a little sub to build the extent from an array of graphics.
function getGraphicsExtent(graphics) {
var geometry, extent, ext;
dojo.forEach(graphics, function(graphic, i) {
geometry = graphic.geometry;
if (geometry instanceof esri.geometry.Point) {
ext = new esri.geometry.Extent(geometry.x - 1, geometry.y - 1,
geometry.x + 1, geometry.y + 1, geometry.spatialReference);
} else if (geometry instanceof esri.geometry.Extent) {
ext = geometry;
} else {
ext = geometry.getExtent();
}
if (extent) {
extent = extent.union(ext);
} else {
extent = new esri.geometry.Extent(ext);
}
});
return extent;
}
Then you should be able to set the extent of the map using something like.
map.setExtent(getGraphicsExtent(featureLayer.getSelectedFeatures).expand(200));
I don't mean to sound stupid but are you returning more than 1 feature. If your polygon selection only returns one feature then I don't believe you can get an extent on a single point. In that case you would have to return the geometry of the point and could then use map.centerAndZoom otherwise Ken's suggestion of getting the graphicsExtent should work.
Thanks everyone for your help. I tried to apply your suggestions, however, I couldn't solve it (I'm sure this is due to my lack of JavaScript knowledge). I changed my FeatureLayer source to that of Petroleum service from ArcGIS.com and posted the complete code below. Please place the working code (to zoom to the selected extent) in the right place.
Thanks
<!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.10/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css" />
<style>
html, body, #map {
padding:0;
margin:0;
height:100%;
}
</style>
<script src="http://js.arcgis.com/3.10/"></script>
<script>
var map;
require([
"esri/InfoTemplate",
"esri/map",
"esri/dijit/Scalebar",
"esri/dijit/BasemapGallery",
"esri/layers/FeatureLayer",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/tasks/query",
"esri/toolbars/draw",
"dojo/dom",
"dojo/on",
"dojo/parser",
"dojo/_base/array",
"esri/Color",
"dijit/form/Button",
"esri/geometry/Extent",
"dojo/domReady!"
],
function (
InfoTemplate, Map, Scalebar, BasemapGallery, FeatureLayer, SimpleFillSymbol, SimpleLineSymbol,
Query, Draw, dom, on, parser, arrayUtil, Color, Extent
) {
parser.parse();
var selectionToolbar, featureLayer;
map = new Map("map", {
basemap: "topo",
center: [-97.33, 37.68], // longitude, latitude
zoom: 10,
sliderStyle: "medium"
});
var scalebar = new Scalebar({
map: map,
scalebarUnit: "dual",
attachTo: "bottom-left"
});
var basemapGallery = new BasemapGallery({
showArcGISBasemaps: true,
map: map
}, "basemapGallery");
basemapGallery.startup();
basemapGallery.on("error", function(msg) {
console.log("basemap gallery error: ", msg);
});
map.on("load", initSelectToolbar);
var fieldsSelectionSymbol =
new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT,
new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.5]));
var content = "<b>Status</b>: ${STATUS}" +
"<br><b>Cummulative Gas</b>: ${CUMM_GAS} MCF" +
"<br><b>Total Acres</b>: ${APPROXACRE}" +
"<br><b>Avg. Field Depth</b>: ${AVG_DEPTH} meters";
var infoTemplate = new esri.InfoTemplate("${FIELD_NAME}", content);
featureLayer = new FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Petroleum/KSPetro/MapServer/1",
{
mode: FeatureLayer.MODE_ONDEMAND,
infoTemplate: infoTemplate,
outFields: ["*"]
});
featureLayer.setSelectionSymbol(fieldsSelectionSymbol);
featureLayer.on("selection-clear", function () {
});
map.addLayer(featureLayer);
on(dom.byId("selectFieldsButton"), "click", function () {
selectionToolbar.activate(Draw.EXTENT);
});
on(dom.byId("clearSelectionButton"), "click", function () {
featureLayer.clearSelection();
});
function initSelectToolbar (event) {
selectionToolbar = new Draw(event.map);
var selectQuery = new Query();
on(selectionToolbar, "DrawEnd", function (geometry) {
selectionToolbar.deactivate();
selectQuery.geometry = geometry;
featureLayer.selectFeatures(selectQuery,
FeatureLayer.SELECTION_NEW);
});
}
});
</script>
</head>
<body class="claro">
<button id="selectFieldsButton" data-dojo-type="dijit/form/Button">Select Fields</button>
<button id="clearSelectionButton" data-dojo-type="dijit/form/Button">Clear Selection</button>
<button id="ZoomToSelectionButton" data-dojo-type="dijit/form/Button">Zoom to Selected Features</button><br>
<div id="map"data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'center'"
style="padding:0;">
<div style="position:absolute; right:20px; top:10px; z-Index:999;">
<div data-dojo-type="dijit/TitlePane"
data-dojo-props="title:'Switch Basemap', closable:false, open:false">
<div data-dojo-type="dijit/layout/ContentPane" style="width:380px; height:280px; overflow:auto;">
<div id="basemapGallery"></div>
</div>
</div>
</div>
</div>
</body>
</html>
This code works. Note that you had left off the "Button" argument in the require function.
<!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.10/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css" />
<style>
html, body, #map {
padding: 0;
margin: 0;
height: 100%;
}
</style>
<script src="http://js.arcgis.com/3.10/"></script>
<script>
var map;
require([
"esri/InfoTemplate",
"esri/map",
"esri/dijit/Scalebar",
"esri/dijit/BasemapGallery",
"esri/layers/FeatureLayer",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/tasks/query",
"esri/toolbars/draw",
"dojo/dom",
"dojo/on",
"dojo/parser",
"dojo/_base/array",
"esri/Color",
"dijit/form/Button",
"esri/geometry/Extent",
"esri/graphicsUtils",
"dojo/domReady!"
],
function (
InfoTemplate, Map, Scalebar, BasemapGallery, FeatureLayer, SimpleFillSymbol, SimpleLineSymbol,
Query, Draw, dom, on, parser, arrayUtil, Color, Button, Extent, graphicsUtils
) {
parser.parse();
var selectionToolbar, featureLayer;
map = new Map("map", {
basemap: "topo",
center: [-97.33, 37.68], // longitude, latitude
zoom: 10,
sliderStyle: "medium"
});
var scalebar = new Scalebar({
map: map,
scalebarUnit: "dual",
attachTo: "bottom-left"
});
var basemapGallery = new BasemapGallery({
showArcGISBasemaps: true,
map: map
}, "basemapGallery");
basemapGallery.startup();
basemapGallery.on("error", function (msg) {
console.log("basemap gallery error: ", msg);
});
map.on("load", initSelectToolbar);
var fieldsSelectionSymbol =
new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT,
new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.5]));
var content = "<b>Status</b>: ${STATUS}" +
"<br><b>Cummulative Gas</b>: ${CUMM_GAS} MCF" +
"<br><b>Total Acres</b>: ${APPROXACRE}" +
"<br><b>Avg. Field Depth</b>: ${AVG_DEPTH} meters";
var infoTemplate = new esri.InfoTemplate("${FIELD_NAME}", content);
featureLayer = new FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Petroleum/KSPetro/MapServer/1",
{
mode: FeatureLayer.MODE_ONDEMAND,
infoTemplate: infoTemplate,
outFields: ["*"]
});
featureLayer.setSelectionSymbol(fieldsSelectionSymbol);
featureLayer.on("selection-clear", function () {
});
map.addLayer(featureLayer);
on(dom.byId("selectFieldsButton"), "click", function () {
selectionToolbar.activate(Draw.EXTENT);
});
on(dom.byId("clearSelectionButton"), "click", function () {
featureLayer.clearSelection();
});
function initSelectToolbar(event) {
selectionToolbar = new Draw(event.map);
var selectQuery = new Query();
on(selectionToolbar, "DrawEnd", function (geometry) {
selectionToolbar.deactivate();
selectQuery.geometry = geometry;
featureLayer.selectFeatures(selectQuery,
FeatureLayer.SELECTION_NEW, function () {
map.setExtent(graphicsUtils.graphicsExtent(featureLayer.getSelectedFeatures()), true);
});
});
}
});
</script>
</head>
<body class="claro">
<button id="selectFieldsButton" data-dojo-type="dijit/form/Button">Select Fields</button>
<button id="clearSelectionButton" data-dojo-type="dijit/form/Button">Clear Selection</button>
<button id="ZoomToSelectionButton" data-dojo-type="dijit/form/Button">Zoom to Selected Features</button><br>
<div id="map" data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'center'"
style="padding:0;">
<div style="position:absolute; right:20px; top:10px; z-Index:999;">
<div data-dojo-type="dijit/TitlePane"
data-dojo-props="title:'Switch Basemap', closable:false, open:false">
<div data-dojo-type="dijit/layout/ContentPane" style="width:380px; height:280px; overflow:auto;">
<div id="basemapGallery"></div>
</div>
</div>
</div>
</div>
</body>
</html>