I've found some examples of what I want to do, but none of them seem to work. I have a dynamic map service layer that is several polygon regions. When the user clicks on a region, I want the map to zoom to the extent of the region. I tried map.centerAndZoom(feature,1) and it did zoom, but the map went blank.
Solved! Go to Solution.
Levi,
Sure you are already returning the geometry in the identify task so just use that geometry from the identify result to set the map extent.
I tried this, but it just zoomed to the middle of the globe. When I console logged extent, it gave me the layer name, of course.
var extent = feature.geometry;
map.setExtent(extent);
Levi,
What spatial reference is the returned results in and what type of geometry is it?
I need to figure out how to get the extent for the State attribute of the feature.
var state = feature.attributes['name'];
Levi,
If the state attribute is just the name of the state then you will have to do a Query on the states layer to get the state geometry. I thought you were doing an identify on the state layer and you already had the geometry in the identify result.
There is one dynamic map service layer with rasters and polygons. I changed the identifyParams to layerIds = [1,2,3,4,5]; Those are the states layers. I'm still getting the same result. When I click on Colorado, map.setExtent(extent); zooms to the middle of the ocean.
Here is the script:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Forecast Analysis</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.23/dijit/themes/claro/claro.css">
<link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.23/esri/css/esri.css">
<style>
html, body, .container, #map {
height: 700px;
width: 100%;
margin: 0;
padding: 0;
margin: 0;
font-family: "arial";
}
#HomeButton {
position: absolute;
top: 95px;
left: 20px;
z-index: 50;
}
<!-- #layerListPane {
position: absolute;
top: 0px;
right: 0px;
width: 230px;
z-index: 101;
padding: 0px;
bottom: 720px;
box-shadow: 0 0 5px 0 #DDD;
background-color:;
}
.esriLayerList .esriList {
background-color:white;
}
.esriLayerList .esriTitle
background-color: ;
border-bottom: none;
}
.esriLayerList .esriList ul {
background-color: ;
} -->
.esriScalebar {
padding: 20px 20px;
}
.esriLayer {
background-color:;
}
.esriPopup .titleButton.maximize {
display: none;
}
.esriPopup .zoomTo { display: none; }
.attachmentsSection div:first-child{
display:none;
}
</style>
<script>var dojoConfig = { parseOnLoad: true };</script>
<script src="http://js.arcgis.com/3.23/"></script>
<script>
var map;
require([
"esri/config",
"esri/map",
"esri/geometry/webMercatorUtils",
"esri/graphicsUtils",
"esri/tasks/GeometryService",
"esri/geometry/Point",
"esri/geometry/Extent",
"esri/InfoTemplate",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/dijit/Popup",
"esri/dijit/LayerList",
"esri/arcgis/utils",
"esri/dijit/PopupTemplate",
"esri/layers/FeatureLayer",
"esri/symbols/SimpleMarkerSymbol",
"esri/tasks/query",
"esri/tasks/IdentifyTask",
"esri/tasks/IdentifyParameters",
"esri/tasks/QueryTask",
"esri/dijit/BasemapGallery",
"esri/dijit/HomeButton",
"esri/graphic",
"dojo/dom-construct",
"esri/Color",
"dojo/dom",
"dojo/parser",
"dojo/_base/array",
"dojo/dom-class",
"dojo/query",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/TitlePane",
"dojo/domReady!"
], function (
esriConfig, Map, webMercatorUtils,graphicsUtils,
GeometryService, Point, Extent,InfoTemplate,
ArcGISDynamicMapServiceLayer,
Popup, LayerList, arcgisUtils, PopupTemplate, FeatureLayer,
SimpleMarkerSymbol, Query,IdentifyTask, IdentifyParameters, QueryTask,
BasemapGallery, HomeButton, Graphic, domConstruct,
Color, dom, parser,arrayUtils, domClass,query
) {
parser.parse();
esriConfig.defaults.geometryService = new GeometryService("http://<ourserver>/arcgis/rest/services/Utilities/Geometry/GeometryServer");
var popupOptions = {
markerSymbol: new SimpleMarkerSymbol("circle", 32, null,
new Color([0, 0, 0, 0.25])),
marginLeft: "20",
marginTop: "20"
};
var popup = new Popup(popupOptions, domConstruct.create("div"));
map = new Map("map", {
basemap: "gray",
center: [-85, 38.5],
zoom: 4,
maxZoom: 8,
minZoom: 4,
infoWindow: popup
});
map.on("load", mapReady);
var home = new HomeButton({
map: map
}, "HomeButton");
home.startup();
var roadsURL = "http://<ourserver>/arcgis/rest/services/Snow_Roads/MapServer";
var roadsLayer = new ArcGISDynamicMapServiceLayer(roadsURL,{ opacity: .85});
map.addLayer(roadsLayer);
//create layer list widget
var myWidget = new LayerList({
map: map,
layers: [{
layer: roadsLayer,
id: "Interstate Snow Conditions",
showsubLayers: true,
showLegend: false
}],
}, "layerList");
myWidget.startup();
function expandLayerList() {
query('.esriLayer').forEach(function(node){
domClass.add(node, "esriListExpand");
});
query('.esriToggleButton').forEach(function(node){
domClass.replace(node, "esri-icon-down", "esri-icon-right");
});
}
myWidget.on('load', function(){
expandLayerList();
});
var identifyTask, identifyParams;
function mapReady () {
map.on("click",executeIdentifyTask);
//create identify tasks and setup parameters
identifyTask = new IdentifyTask(roadsURL);
identifyParams = new IdentifyParameters();
identifyParams.tolerance = 7;
identifyParams.returnGeometry = true;
identifyParams.width = map.width;
identifyParams.height = map.height;
};
function executeIdentifyTask (event) {
map.infoWindow.clearFeatures();
identifyParams.geometry = event.mapPoint;
identifyParams.mapExtent = map.extent;
identifyParams.layerIds = [1,2,3,4,5];
var deferred = identifyTask
.execute(identifyParams);
deferred.addCallback(function (response) {
// response is an array of identify result objects
// Let's return an array of features.
return arrayUtils.map(response, function (result) {
var feature = result.feature;
var layerName = result.layerName;
var extent = feature.geometry;
map.setExtent(extent);
console.log(extent);
var iTemplate;
if(result.layerName === "Forecast 18 Hours"
|| result.layerName === "Past 6 Hours"
|| result.layerName === "Past 24 Hours"
|| result.layerName === "Past 48 Hours"
|| result.layerName === "Past 72 Hours"){
iTemplate = new InfoTemplate(layerName,"State: ${name}<br>No Snow: ${No_Snow}<br>Trace: ${Trace}<br>0.1 to 1 Inch: ${One_Inch}<br>1 to 2 Inches: ${Two_Inch}<br>2 to 6 Inches: ${Six_Inch}<br>6 to 12 Inches: ${Twelve_In}<br>12 to 18 Inches: ${Eightn}<br>Above 18 Inches: ${Above_18}"
);
feature.setInfoTemplate(iTemplate);
}
return feature;
});
});
// InfoWindow expects an array of features from each deferred
// object that you pass. If the response from the task execution
// above is not an array of features, then you need to add a callback
// like the one above to post-process the response and return an
// array of features.
map.infoWindow.setFeatures([deferred]);
map.infoWindow.show(event.mapPoint);
map.infoWindow.resize(225,200)
}
map.on("load", function() {
//after map loads, connect to listen to mouse move & drag events
map.on("mouse-move", showCoordinates);
map.on("mouse-drag", showCoordinates);
});
function showCoordinates(evt) {
//the map is in web mercator but display coordinates in geographic (lat, long)
var mp = webMercatorUtils.webMercatorToGeographic(evt.mapPoint);
//display mouse coordinates
dom.byId("info").innerHTML = "Longitude: " + mp.x.toFixed(3) + " " + "Latitude: " + mp.y.toFixed(3);
}
});
</script>
</head>
<body class="claro">
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'"
style="width: 100%; height: 100%; margin: 0;">
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
<div id="layerListPane">
<div id="layerList"></div>
</div>
<span id="info" style="font-family:arial;position:absolute;left:15px; bottom:5px; background-color:lightgray; opacity: 0.70; z-index:50;"></span>
<div id="HomeButton"></div>
<div style="position:absolute; left:75px; top:20px; z-Index:999;">
</div>
</div>
</div>
</div>
</body>
</html>
Levi,
You are attempting to set the maps extent inside the identify results loop (not good). You should test to see if you have the states layer using an if and only then set the maps extent.