Hi all,
I was unable to zoom to layer when I added imagery to the map. I am however able to zoom to parcel when imagery is off. Any idea why?
<!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();
//Layers to add
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(value);
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.where = "PRCL_ID = '" + value + "'";
queryparcelTask.execute(query).then(zoomparcel);
});
map.addMany([image, Parcels, lakes, rivers ]);
var view = new MapView({
container: "viewDiv",
map: map,
extent: { // autocasts as new Extent()
"xmin": -121.11087086999999, "ymin": 38.517479534000074, "xmax": -119.95226375799996, "ymax": 39.068026806000034,
"spatialReference": { "wkid": 4326 }
}
});
// typical usage
var basemapGallery = new BasemapGallery({
view: view
});
view.then(function() {
var print = new Print({
view: view,
// specify your own print service
printServiceUrl: "http://gem.edcgov.us/arcgis/rest/services/Alex_test/ExportWebMapAlex6/GPServer/Export%20Web%20Map"
});
// Add widget to the top right corner of the view
view.ui.add(print, "top-right");
view.ui.add(basemapGallery, {
position: "bottom-left"
});
});
function zoomparcel(result){
var AOI = result.features;
view.goTo(AOI);
}
});
</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>
Solved! Go to Solution.
I would try re-defining your extent as web mercator coords and using maybe 102100 as your wkid. That's how my 4.4 is defined and I just brought in your map image layer from here:
surface/Aerials_2011_mercator_WAB (MapServer)
without issue. Also your Map object doesn't have a basemap property set and you are also calling in basemap gallery. Basemap gallery requires all it's layers to be in the same coordinate system.
I would try re-defining your extent as web mercator coords and using maybe 102100 as your wkid. That's how my 4.4 is defined and I just brought in your map image layer from here:
surface/Aerials_2011_mercator_WAB (MapServer)
without issue. Also your Map object doesn't have a basemap property set and you are also calling in basemap gallery. Basemap gallery requires all it's layers to be in the same coordinate system.
I am in the process of maybe tiling and re projecting to the WGS84 web the aerial 2011 but I need to get some room first (10GB storage).
In one of the app requirements I was asked to have start w no basemaps,
be able to switch from no basemaps to map with a basemap. But these requirements are still being discussed. So the rest of the app is in test. Most importantly I need to get usable Print widget started.
Sure thing glad to help