Hi all,
I am trying to zoom to a parcel so I am using the "goTo" function. It works great. However when I input my target (AOI) and the zoom level (LOD). It does not work. Any idea why?
code to zoom:
function zoomparcel(result){
var AOI = result.features;
view.goTo({target: AOI, zoom:15});}
});
code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Print widget - 4.4</title>
<!-- Latest compiled and minified CSS -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://js.arcgis.com/4.4/esri/css/main.css">
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
#search {
width: 400px;
z-index: 1;
position: absolute;
left: 80px;
top: 15px;
}
</style>
<script src="http://code.jquery.com/jquery-3.2.1.min.js"integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://js.arcgis.com/4.4/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/widgets/Print",
"esri/tasks/QueryTask", "esri/tasks/support/Query",
"esri/layers/FeatureLayer",
"esri/layers/GraphicsLayer",
"esri/geometry/geometryEngine",
"esri/Graphic",
"esri/widgets/BasemapGallery",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleMarkerSymbol",
"esri/layers/MapImageLayer",
"dojo/on",
"dojo/dom",
"dojo/dom-construct",
"dojo/domReady!"
],
function(
Map, MapView, Print, QueryTask, Query, FeatureLayer, GraphicsLayer,
geometryEngine,
Graphic,
BasemapGallery,
SimpleFillSymbol,
SimpleMarkerSymbol,
MapImageLayer,
on, dom, domConstruct
) {
var map = new Map({basemap: 'topo'});
var lakes = new FeatureLayer({
url: "http://gem.edcgov.us/arcgis/rest/services/water/water2SQL_WAB/MapServer/1"
});
var rivers = new FeatureLayer({
url: "http://gem.edcgov.us/arcgis/rest/services/water/water2SQL_WAB/MapServer/0"
});
var roads = new MapImageLayer({
url: "http://gem.edcgov.us/arcgis/rest/services/transpt/Roads/MapServer"
});
var Parcels = new MapImageLayer({
url: "http://gem.edcgov.us/arcgis/rest/services/Sheriff/Parcels/MapServer"
});
var image = new MapImageLayer({
url: "http://gem.edcgov.us/arcgis/rest/services/surface/Aerials_2011_mercator_WAB/MapServer"
});
var contours = new FeatureLayer({
url: "http://gem.edcgov.us/arcgis/rest/services/mixed/surface2SQL_WAB/MapServer/16"
});
$("#execute").click(function (){
var value = $( "#searchtext" ).val();
$(".esri-print__input-text").val("APN " + value).trigger("input");
console.log(value);
var queryparcelTask = new QueryTask({url: "http://gem.edcgov.us/arcgis/rest/services/Sheriff/Parcels/MapServer/0"});
var query = new Query();
query.returnGeometry = true;
query.outFields = ["*"];
query.where = "PRCL_ID = '" + value + "'";
queryparcelTask.execute(query).then(zoomparcel)
;
});
map.addMany([Parcels, lakes, rivers ]);
var opts = {
duration: 5000
};
var view = new MapView({
container: "viewDiv",
map: map,
extent: {
"xmin": -121.11087086999999, "ymin": 38.517479534000074, "xmax": -119.95226375799996, "ymax": 39.068026806000034,
"spatialReference": { "wkid": 4326 }
}
});
view.then(function() {
var print = new Print({
view: view,
printServiceUrl: "http://gem.edcgov.us/arcgis/rest/services/Alex_test/ExportWebMapAlex6/GPServer/Export%20Web%20Map"
});
view.ui.add(print, "top-right");
});
function zoomparcel(result){
var AOI = result.features;
view.goTo({target: AOI, zoom:15});}
});
</script>
</head>
<body class="calcite">
<div class="row">
<div class="col-lg-6">
<div class="input-group" id="search">
<input type="text" id="searchtext" class="form-control" placeholder="Enter APN">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button" id="execute"><i class="fa fa-search" aria-hidden="true"></i></button>
</span>
</div>
</div>
</div>
<div id="viewDiv"></div>
</body>
</html>
