csergent08

This Is Where You Will Find What You Are Looking For

Blog Post created by csergent08 Champion on Jan 16, 2015

That's right, we're talking about a geocoder. This is where our three templates split up and take on a unique purpose of their own. Let's get right to it. Adding the HTML is super easy. Here is all you have to add.

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

 

Now let's add a little style and place it a little to the right of our buttons, but at the top of the screen by adding CSS.

#search 
            {
                display:block;
                position:absolute;
                z-index:3;
                top:20px;
                left:75px;
            }

 

Now we add the following items for our search in our require statement. Some items are already added from earlier posts. Don't forget your variables in the following function.

"esri/dijit/Geocoder",                     // search
"esri/symbols/SimpleMarkerSymbol", // search
"dojo/_base/Color",                    // search
"dojo/dom-construct",                  // search
"dojo/query",                      // search

 

And finally we can add the code that finds the address for us.

          // begin geocoder
                         var geocoder = new Geocoder({
                            arcgisGeocoder:false,
                            geocoders: [{
                            url:"http://maps.decaturil.gov/arcgis/rest/services/Public/WebAddressLocator/GeocodeServer",
                            name: "Web Address Locator",
                            placeholder: "Find address",
                            outFields:"*"
                            }],
                            map:map,
                            autoComplete:true,
                            zoomScale: 600
                            }, dom.byId("search"));
                            geocoder.startup();

                        geocoder.on("select",showLocation);

                        function showLocation(evt) {
                           map.graphics.clear();
                           var point = evt.result.feature.geometry;
                           var symbol = new SimpleMarkerSymbol()
                                .setStyle("square")
                                .setColor([255,0,0,0.5]);
                           var graphic = new Graphic(point, symbol);
                           map.graphics.add(graphic);


                           map.infoWindow.setTitle("Search Result");
                           map.infoWindow.setContent(evt.result.name);
                           map.infoWindow.show(evt.result.feature.geometry);
                           map.infoWindow.on('hide',function(){
                            map.graphics.remove(graphic);
                            });
                        }
                        // end geocoder

Okay, I know I say I have been combining samples, but this one has one line that's slightly different. When I close the pop-up once an address is found, instead of writing map.graphics.clear which clears all graphics on the map, I write map.graphics.remove(graphic) so the app only removes the defined graphic and not all graphics. This could be helpful if you are measuring or drawing on a map.

 

Now this geocoder is for finding an address that is in the City of Decatur, we will need a slight modification for our Esri based template.

 

To do this, we just need to change our first block of JavaScript after begin geocoder to this:

// begin geocoder
             var geocoder = new Geocoder({
                 map: map,
                 autoComplete: true,
                 zoomScale: 600
             }, dom.byId("search"));
             geocoder.startup();

 

And now we have two geocoding services for our templates. The first is for the City I work for an the second allows me to search addresses that are outside city limits. This second one also still includes the pop-up for the address found.

 

This completes our Esri based template, which will be used for projects that go outside city limits, now we can finish up the mobile and web app templates in my upcoming posts.

 

For the complete code of each application, you can get the code for the Esri based template, get the code for the web template or get the code for the mobile template.

Outcomes