topic Re: Customize Geocode Widget in ArcGIS JavaScript Maps SDK Questions

Customize Geocode Widget

ShaunWeston — Wed, 17 Apr 2013 04:10:00 GMT

Really liking the new geocode widget:

http://help.arcgis.com/en/webapi/javascript/arcgis/jsapi/geocoder.html#geocoderMenu

It pretty much does all the things we after, just wondering how to go about customising it a bit now.

For the site I'm working on they need to be able to change the search, which you can do with the geocodeMenu parameter. How would go about moving the dropdown to the right and changing the "Select geocoder" text. Can this be done via CSS? Also is it possible to select all geocoders and a search on all or would you have to create a composite locator?

Cheers 🙂

Re: Customize Geocode Widget

MattDriscoll — Sat, 20 Apr 2013 00:29:05 GMT

Really liking the new geocode widget:

http://help.arcgis.com/en/webapi/javascript/arcgis/jsapi/geocoder.html#geocoderMenu

It pretty much does all the things we after, just wondering how to go about customising it a bit now.

For the site I'm working on they need to be able to change the search, which you can do with the geocodeMenu parameter. How would go about moving the dropdown to the right and changing the "Select geocoder" text. Can this be done via CSS? Also is it possible to select all geocoders and a search on all or would you have to create a composite locator?

Cheers 🙂

Hey Shaun,

There's an option to set your own theme which will add a custom CSS class to the root widget Domnode. You can use that to style the widget however you like or just use the default theme and overwrite the css. The select geocoder text can probably be removed or changed via JavaScript.

Searching all geocoders at once would probably require some logic but might not be the best way to go about it. I think the composite locator is a better route.

-Matt

Re: Customize Geocode Widget

ShaunWeston — Sat, 11 Dec 2021 09:51:57 GMT

Thanks Matt,

Just using the default theme and overwriting some of the CSS:

.soria .simpleGeocoder .esriGeocoder .esriGeocoderSearch {
   position:absolute;
   right:5px;
   cursor: pointer;
}


.soria .simpleGeocoder .esriGeocoderHasValue .esriGeocoderReset {
   position:absolute;
   right:20px;
}

The one thing I want to change is the "Select geocoder" text, but not sure where to change that.