Adjust view.goTo() scale/zoom based on polygon extent API 4.X

ClintonLunn · ‎04-13-2018

I have a map that uses the search widget to select a parcel, then zoom to it. The problem that I am experiencing is that the resulting goTo() method zooms in too close. My initial thought was to alter the zoomScale property, but that will not work since I have many different sized parcels in my data.

I have disabled the native SearchWidget zoom, and tried to insert a custom zoom once a search item is selected. However, the search-result I seem to receive is an extent, and the goTo() method accepts a zoom or scale value. Is there a way to convert the resulting extent to my desired scale or zoom?

Thanks,

Clinton

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  <meta name="description" content="ArcGIS JS v4, Calcite Maps and Bootstrap Example">
 
  <title>PLI Zoom</title>

  <!-- Calcite Maps Bootstrap -->
  <link rel="stylesheet" href="https://esri.github.io/calcite-maps/dist/css/calcite-maps-bootstrap.min-v0.7.css">
  
  <!-- Calcite Maps -->
  <link rel="stylesheet" href="https://esri.github.io/calcite-maps/dist/css/calcite-maps-arcgis-4.x.min-v0.7.css">

  <!-- ArcGIS JS 4 -->
  <link rel="stylesheet" href="https://js.arcgis.com/4.7/esri/css/main.css">

  <style>
    html,
    body {
      margin: 0;
      padding: 0;
      height: 100%;
      width: 100%;
    } 
  </style>

</head>

<body class="calcite-maps calcite-nav-top">
  <!-- Navbar -->

  <nav class="navbar calcite-navbar navbar-fixed-top calcite-text-light calcite-bg-custom" style="background-color: #699999">
    <!-- Menu -->
    <div class="dropdown calcite-dropdown calcite-text-light calcite-bg-custom" role="presentation" style="background-color: #699999">
      <a class="dropdown-toggle" role="menubutton" aria-haspopup="true" aria-expanded="false" tabindex="0">
        <div class="calcite-dropdown-toggle">
          <span class="sr-only">Toggle dropdown menu</span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
        </div>
      </a>
      <ul class="dropdown-menu" role="menu">
        <li><a role="menuitem" tabindex="0" data-target="#panelInfo" aria-haspopup="true"><span class="glyphicon glyphicon-info-sign"></span> About</a></li>
        <li><a role="menuitem" tabindex="0" href="#" data-target="#panelLegend" aria-haspopup="true"><span class="glyphicon glyphicon-list-alt"></span> Legend</a></li>
        <li><a role="menuitem" tabindex="0" href="#" id="calciteToggleNavbar" aria-haspopup="true"><span class="glyphicon glyphicon-fullscreen"></span> Full Map</a></li>
      </ul>
    </div>
    <!-- Title -->
    <div class="calcite-title calcite-overflow-hidden">
      <span class="calcite-title-main">PLI Zoom</span>
      <span class="calcite-title-divider hidden-xs"></span>
      <span class="calcite-title-sub hidden-xs">A PLI parcel zoom tool</span>
    </div>
    <!-- Nav -->
    <ul class="nav navbar-nav calcite-nav">
      <li>
        <div class="calcite-navbar-search calcite-search-expander">
          <div id="searchWidgetDiv"></div>
        </div>
      </li>
    </ul>
  </nav>

  <!--/.calcite-navbar -->

  <!-- Map  -->

  <div class="calcite-map calcite-map-absolute">
    <div id="mapViewDiv"></div>
  </div>

  <!-- /.calcite-map -->

  <!-- Panels -->

  <div class="calcite-panels calcite-panels-right calcite-text-light calcite-bg-custom panel-group" style="background-color: #699999">

    <!-- Panel - Basemaps -->

    <div id="panelInfo" class="panel collapse in">
      <div id="headingInfo" class="panel-heading" role="tab">
        <div class="panel-title">
          <a class="panel-toggle" role="button" data-toggle="collapse" href="#collapseInfo"  aria-expanded="true" aria-controls="collapseInfo"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span><span class="panel-label">About</span></a> 
          <a class="panel-close" role="button" data-toggle="collapse" tabindex="0" href="#panelInfo"><span class="esri-icon esri-icon-close" aria-hidden="true"></span></a>  
        </div>
      </div>
      <div id="collapseInfo" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingInfo">
        <div class="panel-body">
          <p>This is a parcel zoom tool that functions to zoom to any public land parcel within the state of Florida. Use the search widget by choosing the "Florida Public Land Inventories Parcels" option within the navigation bar to search for a parcel by ID, city, or parcel name.</p>
        </div>
     </div>
    </div>

    <!-- Panel - Legend -->

    <div id="panelLegend" class="panel collapse">
      <div id="headingLegend" class="panel-heading" role="tab">
        <div class="panel-title">
          <a class="panel-toggle" role="button" data-toggle="collapse" href="#collapseLegend" aria-expanded="false" aria-controls="collapseLegend"><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span><span class="panel-label">Legend</span></a> 
          <a class="panel-close" role="button" data-toggle="collapse" tabindex="0" href="#panelLegend"><span class="esri-icon esri-icon-close" aria-hidden="true"></span></a> 
        </div>
      </div>
      <div id="collapseLegend" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingLegend">
        <div class="panel-body">            
          <div id="legendDiv"></div>
        </div>
      </div>
    </div>

  </div>

  <!-- /.calcite-panels -->

  <script type="text/javascript">
    var dojoConfig = {
      packages: [{
        name: "bootstrap",
        location: "https://esri.github.io/calcite-maps/dist/vendor/dojo-bootstrap"
      },
      {
        name: "calcite-maps",
        location: "https://esri.github.io/calcite-maps/dist/js/dojo"
      }]
    };
  </script>

  <!-- ArcGIS JS 4 -->
  <script src="https://js.arcgis.com/4.7/"></script>

  <script>
    
    require([
      // ArcGIS
      "esri/Map",
      "esri/PopupTemplate",
      "esri/layers/FeatureLayer",
      "esri/layers/MapImageLayer",
      "esri/views/MapView",
      "esri/symbols/SimpleFillSymbol",
      "esri/symbols/SimpleLineSymbol",
      "esri/Graphic",
      
      

      // Widgets
      "esri/widgets/Home",
      "esri/widgets/Zoom",
      "esri/widgets/Compass",
      "esri/widgets/Search",
      "esri/widgets/Legend",
      "esri/widgets/BasemapToggle",
      "esri/widgets/ScaleBar",
      "esri/widgets/Attribution",
      "esri/tasks/Locator",
      // Bootstrap
      "bootstrap/Collapse",
      "bootstrap/Dropdown",

      // Calcite Maps
      "calcite-maps/calcitemaps-v0.7",
      // Calcite Maps ArcGIS Support
      "calcite-maps/calcitemaps-arcgis-support-v0.7",

      "dojo/_base/Color",
      "dojo/number",
      "dojo/domReady!"
    ], function(Map, PopupTemplate, FeatureLayer, MapImageLayer, MapView, SimpleFillSymbol, SimpleLineSymbol, Graphic, Home, Zoom, Compass, Search, Legend, BasemapToggle, ScaleBar, Attribution, Locator, Collapse, Dropdown, CalciteMaps, CalciteMapArcGISSupport, Color, number) {

      /******************************************************************
       *
       * Create the map, view and widgets
       * 
       ******************************************************************/

      var parcelsTemplate = {
        title: 'Owner: {own_name}',
        content:
          "<p><b>Parcel ID:</b> {parcel_id}</p>" +
          "<p><b>State Parcel ID:</b> {state_par_}</p>" +
          "<p><b>PLI Code:</b> {pli_code}</p>" +
          "<p><b>Size:</b> {no_lnd_unt:NumberFormat(places: 2)} Acres<p>" +
          "<p><b>Value:</b> ${av_nsd:NumberFormat(places: 2)}</p>" +  
          "<p><b>TRS:</b> {twn} {rng} {sec}</p>" +
          "<p><b>Legal Description:</b> {s_legal}</p>" ,
        actions: [{
          title: "Visit the FL Public Lands Inventory Website",
          id: "pliWebsite",
          className: "esri-icon-launch-link-external"
        }]
      };


      var parcelsSearchTemplate = {        
        title: 'Owner: {own_name}',
        content:
          "<p><b>Parcel ID:</b> {PARCEL_ID}</p>" +
          "<p><b>State Parcel ID:</b> {STATE_PAR_}</p>" +
          "<p><b>PLI Code:</b> {PLI_CODE}</p>" +
          "<p><b>Size:</b> {NO_LND_UNT} Acres<p>" +
          "<p><b>Value:</b> ${AV_NSD}</p>" +  
          "<p><b>TRS:</b> {TWN} {RNG} {SEC}</p>" +
          "<p><b>Legal Description:</b> {S_LEGAL}</p>" ,
        actions: [{
          title: "Visit the FL Public Lands Inventory Website",
          id: "pliWebsite",
          className: "esri-icon-launch-link-external"
        }]
      };

      var highlightSymbol = new SimpleLineSymbol(
      SimpleLineSymbol.STYLE_SOLID,
      new Color([66, 244, 217]), 1);


      var parcelsLayerURL = "https://admin205.ispa.fsu.edu/arcgis/rest/services/PLI/PLI_2017/MapServer";
      var parcelsLayer = new MapImageLayer ({
        url: parcelsLayerURL,
        title: "Parcels Layer",
        sublayers: [{
          id: 0,
          title: "PLI Parcels",
          visible: true,
          minScale: 100000,
          popupTemplate: parcelsTemplate
       }]
      });


      // Map
      var map = new Map({
        basemap: "topo",
        layers: [parcelsLayer]
      });
      
      // View
      var mapView = new MapView({
        container: "mapViewDiv",
        map: map,
        padding: {
          top: 50,
          bottom: 0
        },
        center: [-82.28, 27.8],
        zoom: 7,
        ui: {components: []}
      });

      // Popup and panel sync
      mapView.when(function(){
        CalciteMapArcGISSupport.setPopupPanelSync(mapView);
      });

      // Search - add to navbar
      var searchWidget = new Search({
        container: "searchWidgetDiv",
        view: mapView,
        allPlaceHolder: "Text search for Parcel ID",
        sources: [{
        featureLayer: {
          url: parcelsLayerURL,
          popupTemplate: parcelsSearchTemplate
        },
        searchFields: ["PARCEL_ID", "STATE_PAR_", "OWN_CITY", "OWN_NAME"],
        suggestionTemplate: "PID: {parcel_id}, State PID: {state_par_}, City: {own_city}, Parcel Name: {own_name}",
        displayField: "PLI_CODE",
        exactMatch: false,
        outFields: ["PLI_CODE", "PARCEL_ID", "OWN_NAME", "OWN_STATE", "STATE_PAR_", "NO_LND_UNT", "AV_NSD", "TWN", "SEC", "S_LEGAL", "RNG"],
        name: "Florida Public Land Inventories Parcels",
        placeholder: "Search by Parcel ID, City, or County",
        resultGraphicEnabled: true,
        resultSymbol: {
          type: "simple-line",
          width: 2,
          color: [0, 255, 197, 1]
        },
        autoNavigate: false

      }, {
        locator: new Locator({ url: "//geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer" }),
        singleLineFieldName: "SingleLine",
        name: "Geocoder",
        localSearchOptions: {
          minScale: 300000,
          distance: 50000
        },
        placeholder: "Search Geocoder",
        maxResults: 3,
        maxSuggestions: 6,
        suggestionsEnabled: true,
        minSuggestCharacters: 0,
        countryCode: "US"
      }],
      });
      CalciteMapArcGISSupport.setSearchExpandEvents(searchWidget);

      // Map widgets
      var home = new Home({
        view: mapView
      });
      mapView.ui.add(home, "top-left");

      var zoom = new Zoom({
        view: mapView
      });
      mapView.ui.add(zoom, "top-left");

      var compass = new Compass({
        view: mapView
      });
      mapView.ui.add(compass, "top-left");
      
      var basemapToggle = new BasemapToggle({
        view: mapView,
        secondBasemap: "satellite"
      });
      mapView.ui.add(basemapToggle, "bottom-right");          
      
      var scaleBar = new ScaleBar({
        view: mapView
      });
      mapView.ui.add(scaleBar, "bottom-left");

      var attribution = new Attribution({
        view: mapView
      });
      mapView.ui.add(attribution, "manual");

      // Panel widgets - add legend
      var legendWidget = new Legend({
        container: "legendDiv",
        view: mapView
      });
      
      // Watch search result
      searchWidget.on("select-result", function(event){
        console.log(event)
        mapView.goTo({
          target: event.result.feature,
          //zoom: 
          //scale:
        });
      });

      // Popup Link event listener
      mapView.popup.on("trigger-action", function (event) {
      if (event.action.id === "pliWebsite") {
        window.open("http://floridapli.net/");
      }
    }); 


    });
  </script>

</body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

_____ · ‎04-13-2018

//

View solution in original post

_____ · ‎04-13-2018

//

ClintonLunn · ‎04-16-2018

Thank you Ian!

Here is the updated code in case anybody is looking for this answer too.


      // Set autoNavigate to false within searchWidget
        autoNavigate: false


      // Watch search result
      searchWidget.on("select-result", function(event){
        console.log(event)
        var ext = event.result.extent;
        var cloneExt = ext.clone();
        console.log(cloneExt);
        mapView.goTo({
          target: event.result.feature,
          extent: cloneExt.expand(1.75)
        });
      });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍