topic Search widget navigates to wrong location in ArcGIS JavaScript Maps SDK Questions

Search widget navigates to wrong location

BrandonNelson1 — Mon, 15 Jun 2015 19:28:17 GMT

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?

Re: Search widget navigates to wrong location

LuciHawkins — Mon, 15 Jun 2015 20:49:51 GMT

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

Re: Search widget navigates to wrong location

BrandonNelson1 — Sun, 12 Dec 2021 02:57:58 GMT

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.

Re: Search widget navigates to wrong location

TimWitt2 — Tue, 16 Jun 2015 14:09:45 GMT

Hey Brandon,

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

Tim

Re: Search widget navigates to wrong location

TimWitt2 — Tue, 16 Jun 2015 15:20:10 GMT

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

Re: Search widget navigates to wrong location

BrandonNelson1 — Tue, 16 Jun 2015 15:30:40 GMT

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.

Re: Search widget navigates to wrong location

TimWitt2 — Tue, 16 Jun 2015 15:33:21 GMT

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

Re: Search widget navigates to wrong location

BrandonNelson1 — Sun, 12 Dec 2021 02:58:01 GMT

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>