Search widget navigates to wrong location

BrandonNelson1 · ‎06-15-2015

I've set up a map with a Search widget backed by an internal GeocodeService. When searching with it, the marker is placed in the correct location, but the map pans off somewhere completely different. What am I doing wrong?

I've already tried the following:

* Set a default GeometryService (per the Search widget documentation)

* Set the locator's outSpatialReference to match the geocoder reference data (2881)

* Set the locator's outSpatialReference to match the map (3857)

* Use another, known-working GeocodeService

* Create the Search widget programmatically

None of these have made any noticeable change. Is there something else I can try?

TimWitt2 · ‎06-16-2015

This is a different way to fix it but could you place the following below line 228

				LocPoint = event.result.feature.geometry;
				map.centerAndZoom(LocPoint,18);

Tim

View solution in original post

LuciHawkins · ‎06-15-2015

The features I am searching for are in different wkid than my basemap. In my app, I set the outSpatialReference of FindParameters to the wkid of my basemap and everything works as it should for API ver 3.13

What version of the API are you using? Do you have a snippet of the code you are using? Are you using a grid to display the results? If you are, do you have a row click handler? If you do have a row click handler are you zooming to the extent of a polygon instead of a point extent - or vice versa - they are different.

Thanks,

Luci

BrandonNelson1 · ‎06-16-2015

The code in question is this:

map.on('load', function () {
  var locator = new Locator("http://gis.palmbayflorida.org/arcgis/rest/services/Address_Locator/GeocodeServer");
  locator.setOutSpatialReference(102100);
  searchSources = [{
    locator: locator
  }];

  legendLayers = [{
    layer: udfSchedule,
    title: "Scheduled Zones"
  }];

  console.log('map loaded');

  parser.parse().then(function () {
    console.log('parser done');

    map.resize();
    map.reposition();

    search.on('select-result', function (event) {
      console.log('select-result:');
      console.log(search);
      console.log(event);
      map.infoWindow.show(event.result.extent.getCenter());
    });

    console.log('ready');
  });
});

<div id="divMap" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'">
  <div id="divSearch" data-dojo-id="search" data-dojo-type="esri/dijit/Search" data-dojo-props="map:map, sources:searchSources"></div>
</div>

I'm also using 3.13, but I'm using a Search widget rather than Locator (or FindTask) directly. Currently all I'm doing with the results displaying a popup at that location. The panning and zooming is done by the Search widget itself.

Interestingly, another map has a very similar setup, yet its Search widget works fine. The main differences I can find there are that (1) the widget is created programmatically, not declaratively, and (2) it uses a different GeocodeService (in the same spatial reference, 2881). I'll be checking these differences out as well.

TimWitt2 · ‎06-16-2015

Hey Brandon,

would it be possible to see all of your code to run some local tests?

Tim

BrandonNelson1 · ‎06-16-2015

It's (eventually) going to be a public map, so I don't see why not. Bit of a mess, though, sorry.

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Palm Bay Unidirectional Flushing Program 2015</title>

    <link rel="stylesheet" href="https://community.esri.com//js.arcgis.com/3.13/dijit/themes/claro/claro.css"/>
    <link rel="stylesheet" href="https://community.esri.com//js.arcgis.com/3.13/esri/css/esri.css"/>

    <style>
      /*<![CDATA[*/

      html, body, #divMain, #divMap {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }

      #imgPBLogo { display: block; float: left; width: 128px; height: 78px; padding: 2pt; padding-right: 6pt; }
      #divHeader h1, #divHeader h2 { display: block; padding: 0; margin: 1pt; margin-left: 160px; }
      #divLayers { width: 20%; overflow: hidden; }
      #divLegend { overflow: auto; bottom: 0; }
      #divLegend table { width: 98%; }

      #divMap>div { display: block; position: absolute; }
      #divMap .arcgisSearch { z-index: 96; top: 20px; right: 20px; }
      #divMap .esriSimpleSlider { z-index: 97; }
      #divMap .LocateButton { z-index: 98; top: 130px; left: 20px; }
      #divMap .HomeButton { z-index: 99; top: 90px; left: 20px; }
      #divMap .dijitTitlePane { z-index: 100; top: 70px; right: 20px; }

      #divBasemapWrapper { max-width: 380px; max-height: 220px; overflow: auto; }

      body {
        font-family: "Calibri", "Arial", "Helvetica", "sans-serif";
        font-size: 12pt;
      }

      #divMap {
        background-color: lightgray;
      }

      @media (max-width: 639px) {
        #divLayers { display: none; }
      }
      @media (max-width: 799px) {
        #divBasemapWrapper { max-width: 160px; }
      }
      @media (max-height: 639px), (max-width: 479px) {
        body { font-size: 10pt; }
        h1 { clear: right; font-size: 12pt; }
        h2 { clear: right; font-size: 10pt; }
      }
      @media (max-width: 479px) {
        #divMap .esriSimpleSlider { top: 70px; }
        #divMap .HomeButton { top: 140px; }
        #divMap .LocateButton { top: 180px; }
        #divMap .arcgisSearch { left: 20px; }
        #divMap .searchGroup { white-space: nowrap; }
      }

      /*]]>*/
    </style>

    <script>
      var dojoConfig = {
        async: true,
        isDebug: true
      };
    </script>

    <script src="//js.arcgis.com/3.13"></script>
    <script>
      /*<![CDATA[*/

      var map;
      var searchSources;
      var legendLayers;

      require([
        "dijit/TitlePane",
        "dijit/layout/BorderContainer",
        "dijit/layout/ContentPane",
        "esri/dijit/Legend",
        "esri/dijit/Search",
        "esri/dijit/HomeButton",
        "esri/dijit/LocateButton",
        "esri/dijit/BasemapGallery"
      ]);

      require([
        "esri/config",
        "esri/map",
        "esri/graphic",
        "esri/geometry/Extent",
        "esri/tasks/locator",
        "esri/renderers/SimpleRenderer",
        "esri/symbols/SimpleFillSymbol",
        "esri/Color",

        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/layers/ArcGISTiledMapServiceLayer",
        "esri/layers/FeatureLayer",

        "esri/dijit/PopupTemplate",

        "dojo/ready",
        "dojo/parser",
        "dojo/domReady!"
      ],
      function (
              esriConfig, Map, Graphic, Extent, Locator, SimpleRenderer, SimpleFillSymbol, Color,
              ArcGISDynamicMapServiceLayer, ArcGISTiledMapServiceLayer, FeatureLayer,
              PopupTemplate,
              ready, parser
      ) {
        ready(function () {
          esriConfig.defaults.geometryService =
            "http://gis.palmbayflorida.org/arcgis/rest/services/Utilities/Geometry/GeometryServer";

          var initExtent = new Extent({
            spatialReference: {
              wkid: 102100
            },
            xmax: -8971377.315049056,
            xmin: -8981562.549068041,
            ymax: 3254116.2348299613,
            ymin: 3247848.3985105855
          });

          map = new Map("divMap", {
            basemap: "satellite",
            extent: initExtent,
            minZoom: 8,
            maxZoom: 19,
            showLabels: true
          });

          var cityLimits = new FeatureLayer(
            "http://gis.palmbayflorida.org/arcgis/rest/services/External/MapServer/7"
          );

          var udfBasemap = new ArcGISTiledMapServiceLayer(
            "http://gis.palmbayflorida.org/arcgis/rest/services/UDF/Basemap_/MapServer", {
              infoTemplates: {
                3: {
                  infoTemplate: new PopupTemplate({
                    title: "Address",
                    description: "{SiteHouseNo} {SiteStreetname} {SiteType} {SiteDir}",
                    fieldInfos: [
                      { fieldName: "SiteHouseNo" },
                      { fieldName: "SiteStreetname" },
                      { fieldName: "SiteType" },
                      { fieldName: "SiteDir" }
                    ]
                  })
                }
              }
            }
          );

          var udfSchedule = new ArcGISTiledMapServiceLayer(
            "http://gis.palmbayflorida.org/arcgis/rest/services/UDF/Zones/MapServer",
            { mode: FeatureLayer.MODE_SNAPSHOT, opacity: 0.6 }
          );


          var udfLabels = new FeatureLayer(
            "http://gis.palmbayflorida.org/arcgis/rest/services/UDF/Zones/MapServer/0", {
              mode: FeatureLayer.MODE_SNAPSHOT,
              outFields: [ "Zone", "Schedule", "Completed", "StartDate", "EndDate", "PostDate" ],
              infoTemplate: new PopupTemplate({
                title: "Zone {Zone}",
                fieldInfos: [{
                  fieldName: "Completed",
                  visible: true
                }, {
                  fieldName: "StartDate",
                  label: "Start date",
                  visible: true,
                  format: { dateFormat: 'longMonthDayYear' }
                }, {
                  fieldName: "EndDate",
                  label: "End date",
                  visible: true,
                  format: { dateFormat: 'longMonthDayYear' }
                }, {
                  fieldName: "PostDate",
                  label: "Post date",
                  visible: true,
                  format: { dateFormat: 'longMonthDayYear' }
                }]
              }, {
                utcOffset: 0
              })
            }
          );

          map.on('load', function () {
            var locator = new Locator("http://gis.palmbayflorida.org/arcgis/rest/services/Address_Locator/GeocodeServer");
            locator.setOutSpatialReference(102100);
            searchSources = [{
              locator: locator
            }];

            legendLayers = [{
              layer: udfSchedule,
              title: "Scheduled Zones"
            }];

            console.log('map loaded');

            parser.parse().then(function () {
              console.log('parser done');

              map.resize();
              map.reposition();
              home.home();

              search.on('select-result', function (event) {
                console.log('select-result:');
                console.log(search);
                console.log(event);
                map.infoWindow.show(event.result.extent.getCenter());
              });

              console.log('ready');
            });
          }, function () {
            console.log("ERROR");
          });

          map.addLayers([
            udfSchedule,
            udfBasemap,
            udfLabels,
            cityLimits
          ]);
        });
      });

      /*]]>*/
    </script>
  </head>

  <body class="claro">
    <div id="divMain" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', liveSplitters:true">
      <div id="divLayers" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'leading'">
        <div id="divLegend" data-dojo-type="esri/dijit/Legend" data-dojo-props="map:map, layerInfos:legendLayers"></div>
      </div>
      <div id="divHeader" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top', splitter:false">
        <img id="imgPBLogo" src="images/PBFL_Logo_Black.png"/>
        <div>
          <h1>2015 Unidirectional Flushing Program</h1>
          <h2>North Central Area, Phase 2</h2>
        </div>
      </div>
      <div id="divMap" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'">
        <div id="divSearch" data-dojo-id="search" data-dojo-type="esri/dijit/Search" data-dojo-props="map:map, sources:searchSources, enableInfoWindow:false, singleLineFieldName:'Single Line Input'"></div>
        <div id="divHome" data-dojo-id="home" data-dojo-type="esri/dijit/HomeButton" data-dojo-props="map:map"></div>
        <div id="divLocate" data-dojo-type="esri/dijit/LocateButton" data-dojo-props="map: map"></div>
        <div id="divBasemapWindow" data-dojo-type="dijit/TitlePane" data-dojo-props="title:'Choose basemap', closable:false, open:false">
          <div id="divBasemapWrapper" data-dojo-type="dijit/layout/ContentPane">
            <div id="divBasemaps" data-dojo-type="esri/dijit/BasemapGallery" data-dojo-props="map:map, showArcGISBasemaps:true"></div>
          </div>
        </div>
      </div>
    </div>
    <div id="divStandby"></div>
  </body>
</html>

TimWitt2 · ‎06-16-2015

This is a different way to fix it but could you place the following below line 228

				LocPoint = event.result.feature.geometry;
				map.centerAndZoom(LocPoint,18);

Tim

BrandonNelson1 · ‎06-16-2015

Thank you! Worked like a charm. I'm still curious about the underlying issue, but at least this will get it up sooner.

I also tried making the other changes I mentioned. Neither seemed to help, though.

TimWitt2 · ‎06-16-2015

Brandon,

I agree, this is just a band-aid fix and I am curious on what needs to be changed to not having to add code.

Greetings from the Viera government complex

Tim