Select to view content in your preferred language

Change the symbol displayed for Search widget - highlight question

4292
4
07-23-2015 09:16 AM
TracySchloss
Honored Contributor

I wanted to be able to use my own icon for the Search widget, so I changed the source as:

   var searchTool = new Search ({
     map:map,
          minCharacters: 8, 
          countryCode: "US", 
          searchExtent:startExtent
   }, dom.byId('searchDiv'));

   var sources = [];

   sources.push({
    locator: new Locator("//geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer"),
    singleLineFieldName: "SingleLine",
    outFields: ["Addr_type"],
    name: "World Geocode Service",
    localSearchOptions: {
      minScale: 300000,
      distance: 50000
    },
    placeholder: "Enter an address or place",
    highlightSymbol: new PictureMarkerSymbol(geoSymbol).setOffset(9, 18)
  });
   searchTool.set("sources", sources);
   searchTool.startup();

I also have a popup defined as

 highlightMarkerSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 22,
    new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
    new Color([255,255,0]), 2),new Color([255,255,0,0.5]));

 highlightFillSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, 
    new Color([255,200,0]), 2), new Color([255,255,0,0.50]));
  var popup = new Popup({
markerSymbol: highlightMarkerSymbol}, domConstruct.create("div"));

   map = new Map("mapDiv", { 
    infoWindow: popup,
    basemap: "streets",
    center: [-92.593, 38.5],
    zoom: 7
   }); 

I  need the popup for other sections of my code.

Every time I use the Search, I see both the orange flag I defined for the symbol, as well as the yellow highlighted circle I have defined in my popup.

If I add the parameter enableHighlight:false to my definition, that removes my flag symbol only and I still have my yellow highlightMarkerSymbol.  This is the opposite of what I want to happen.

Am I missing a parameter in my Search constructor or misreading what some of the parameters are for?

Tags (1)
0 Kudos
4 Replies
JoshHevenor
Frequent Contributor

When you define your Sources array you can define a highlightSymbol

Search | API Reference | ArcGIS API for JavaScript

0 Kudos
TracySchloss
Honored Contributor

I have a highlight symbol defined already.  What I'm seeing is two symbols - the pin as well as second highlighted circle.

0 Kudos
MattDriscoll
Esri Contributor

Hi Tracy, I think you want to set highlight to false on the popup.

Popup | API Reference | ArcGIS API for JavaScript

TracySchloss
Honored Contributor

I still want the popup for selecting features for other reasons, though.  I ended up setting my highlight symbol to the orange flag and set showInfoWindowOnSelect to false.  It's opening the infoWindow, apparently, that's causing my yellow highlighted symbol.  If I don't show it, then I'm only seeing the flag I want.  It still shows up when I click to see the information, but that makes more sense than having two different symbols show up right when I search (one for the location and the 2nd that's the highlight from showInfoWindowOnSelect).

0 Kudos