Customize Geocode Widget

575
2
04-16-2013 09:10 PM
ShaunWeston
Occasional Contributor
Really liking the new geocode widget:

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

I
t 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 🙂
0 Kudos
2 Replies
MattDriscoll
Esri Contributor
Really liking the new geocode widget:

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

I
t 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
0 Kudos
ShaunWeston
Occasional Contributor
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.
0 Kudos