Questions on Search Widget

jamesa · ‎09-02-2015

Hello All,

I try to use search widget to find street intersection and here are my two jsfiddle files but I am not sure why the first code with define locator is not showing up the correct intersection point.

Please try this streets:

e state st & n 5th st, redlands ca

1. jsfiddle
http://jsfiddle.net/sky12/L8c035rg/1/

2. jsfiddle - Esri default

http://jsfiddle.net/sky12/0pod8chb/

Besides that, can you tell me how to show the "score" information on poup infowindow as well.

Thanks.

Drew · ‎09-02-2015

I think its because your marker symbol has an offset set.

esri.symbol.PictureMarkerSymbol("images/mylocation5.png", 17, 32).setOffset(18, 27)

remove the setOffset and it should hit the same location.

Drew

View solution in original post

thejuskambi · ‎09-02-2015

The symbol has some kind of offset on it so it is showing at that offset distance.

esri.symbol.PictureMarkerSymbol("images/mylocation5.png", 17, 32).setOffset(18, 27)

Drew · ‎09-02-2015

I think its because your marker symbol has an offset set.

esri.symbol.PictureMarkerSymbol("images/mylocation5.png", 17, 32).setOffset(18, 27)

remove the setOffset and it should hit the same location.

Drew

jamesa · ‎09-02-2015

Thanks. It works! How about show "Score" on popup infowindow?

JssrRR · ‎09-02-2015

James,

Here, I added an infoTemplate with Score :

<!DOCTYPE html>
<html dir="ltr">


<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
   <title>ArcGIS API for JavaScript | Basic Search</title>
   <link rel="stylesheet" href="http://js.arcgis.com/3.14/dijit/themes/claro/claro.css">
   <link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css">
   <style>
      html,
      body,
      #map {
         height: 100%;
         width: 100%;
         margin: 0;
         padding: 0;
      }
      #search {
         display: block;
         position: absolute;
         z-index: 2;
         top: 20px;
         left: 74px;
      }
   </style>
   <script src="http://js.arcgis.com/3.14/"></script>
   <script>
      require([


        "esri/map",
        "esri/dijit/Search",
        "esri/InfoTemplate",
  "esri/geometry/Extent",
  "esri/tasks/locator", 
  "dojo/dom",
        "dojo/domReady!"


      ], function (Map, Search,InfoTemplate, Extent, Locator, dom) {


  var map = new Map("map", {
          basemap: "topo", 
          center: [-117.19, 34.055],
          zoom: 18
        });
       
  //Create extent to limit search
         var extent = new Extent({
            "spatialReference": {
               "wkid": 102100
            },
            "xmin": -13063280,
            "xmax": -13033928,
            "ymin": 4028345,
            "ymax": 4042715
         });
   
  var search = new Search({  
   enableButtonMode: false,  
   enableLabel: false,  
   enableInfoWindow: true,  
   autoComplete: true,  
   autoNavigate: true,
   map: map,  
   sources:   
   [  
    {  
  locator: new Locator("http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer"),  
  singleLineFieldName: "SingleLine",  
  outFields: ["score"],  
  name: "world_geocoder",  
  localSearchOptions: {  
   minScale: 300000,  
   distance: 50000  
  },  
  placeholder: "Search Place or Address",  
  searchExtent: extent,
  highlightSymbol: new esri.symbol.PictureMarkerSymbol("images/mylocation5.png", 17, 32).setOffset(18, 27),
             infoTemplate: new InfoTemplate("Search Result: ${Score}")
    }  
   ]  
  }, "search");  
  search.startup();




      });
   </script>
</head>


<body>
   <div id="search"></div>
   <div id="map"></div>
</body>


</html>

See this example;

Search using a suggestion template | ArcGIS API for JavaScript