nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Search widget navigates to wrong location

BrandonNelson1

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?

Finde mehr Beiträge mit dem Tag

Accepted answers

TimWitt2

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

All comments

BrandonNelson1

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

Hey Brandon,

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

Tim

BrandonNelson1

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.

LuciHawkins

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

Nimm an der Unterhaltung teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.