Unable to zoom when the imagery is added JS PI 4.4

546
3
Jump to solution
08-02-2017 11:17 AM
by Anonymous User
Not applicable

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>
Tags (1)
0 Kudos
1 Solution

Accepted Solutions
DavidColey
Frequent Contributor

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.

View solution in original post

3 Replies
DavidColey
Frequent Contributor

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.

by Anonymous User
Not applicable

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.

0 Kudos
DavidColey
Frequent Contributor

Sure thing glad to help

0 Kudos