Geocoder with alternate style | ArcGIS API for JavaScript

The Geocoder widget, new at 3.3 comes with two default styles (simple and ArcGIS) and also provides css classes that allow you to create and apply your own style.

Code

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>ArcGIS API for JavaScript | Re-styled Geocoder Widget</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/esri/css/esri.css">
    <style>
      html, body, #map {
        height:100%;
        width:100%;
        margin:0;
        padding:0;
      }
      #search {
        margin: 20px 10% 0 10%;
        position: absolute;
        width: 80%;
        z-index: 2;
      }

      /* customize geocoder appearance */
      .simpleGeocoder, .simpleGeocoder .esriGeocoderContainer {
        font-size: 1em;
        line-height: 1em;
        height: 4em;
        width: 100%;
      }
      .simpleGeocoder .esriGeocoder {
        border: 0;
        height: 100%;
        -moz-border-radius: 0px;
        -webkit-border-radius: 0px;
        border-radius: 0px;
        -moz-box-shadow: 0 0 5px #888;
        -webkit-box-shadow: 0 0 5px #888;
        box-shadow: 0 0 5px #888;
      }
      .simpleGeocoder .esriGeocoderIcon { 
        display: none;
        height: 64px;
        width: 64px;
      }
      .simpleGeocoder .esriGeocoder .esriGeocoderReset {
        margin: 0;
      }
      /* show an x icon to clear the current value */
      .simpleGeocoder .esriGeocoderHasValue .esriGeocoderReset {
        cursor: pointer; 
        display: block; 
        background: url("http://dl.dropbox.com/u/2654618/geocoder-reset.gif") no-repeat;
      }
      /* use a different loading icon */
      .simpleGeocoder .esriGeocoderLoading .esriGeocoderReset {
        background: url("http://dl.dropbox.com/u/2654618/geocoder-loading.gif") center center no-repeat;
      }
      /* make input larger */
      .simpleGeocoder .esriGeocoder input {
        font-size: 2.4em;
        margin: 0 0 0 1.25%;
        padding: 1% 0 1% 0;
        width: 90.75%;
      }
      /* use gray in the input box instead of black */
      .simpleGeocoder .esriGeocoder input, 
      .simpleGeocoder .esriGeocoder input:focus {
        color: #686868;
      }
      /* get rid of rounded gray border, use a subtle box shadow instead */
      .simpleGeocoder .esriGeocoderResults {
        border: 0;
        -moz-border-radius: 0px;
        -webkit-border-radius: 0px;
        border-radius: 0px;
        -moz-box-shadow: 0 5px 5px -5px #888;
        -webkit-box-shadow: 0 5px 5px -5px #888;
        box-shadow: 0 5px 5px -5px #888;
      }
      .simpleGeocoder .esriGeocoderResultLast {
        -moz-border-radius: 0px;
        -webkit-border-radius: 0px;
        border-radius: 0px;
      }
      .simpleGeocoder .esriGeocoderResult:hover, 
      .simpleGeocoder .esriGeocoderResultEven:focus, 
      .simpleGeocoder .esriGeocoderResultOdd:focus {
        /* default is #EDEDED, use a light blue instead */
        background-color: #B5DAEA;
      }
    </style>
    
    <script src="//js.arcgis.com/3.6/"></script>
    <script>
      dojo.require("esri.map");
      dojo.require("esri.dijit.Geocoder");

      var map, geocoder;

      dojo.ready(function() {
        // create the map
        map = new esri.Map("map",{
          basemap: "streets",
          center: [ -100, 37 ], // long, lat
          zoom: 5,
          slider: false
        });

        // create the geocoder
        geocoder = new esri.dijit.Geocoder({ 
          autoComplete: true,
          maxLocations: 10,
          map: map 
        }, "search");
        geocoder.startup();
      });
    </script>
  </head>
  <body>
    <div id="search"></div>
    <div id="map"></div>
  </body>
</html>

View live sample Download as a zip file Explore in the sandbox

Description

Code

View live sample
Download as a zip file
Explore in the sandbox