Search widget navigates to wrong location

2720
7
Jump to solution
06-15-2015 12:28 PM
BrandonNelson1
New Contributor III

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?

0 Kudos
1 Solution

Accepted Solutions
TimWitt2
MVP Regular Contributor

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

7 Replies
LuciHawkins
Occasional Contributor III

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
New Contributor III

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.

0 Kudos
TimWitt2
MVP Regular Contributor

Hey Brandon,

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

Tim

0 Kudos
BrandonNelson1
New Contributor III

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>

0 Kudos
TimWitt2
MVP Regular Contributor

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

BrandonNelson1
New Contributor III

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.

0 Kudos
TimWitt2
MVP Regular Contributor

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