Autocomplete Geocoding

Print this page
Learn more about Verizon Connect GeoBase.
Get information about the latest release

This tutorial demonstrates how to use an Autocomplete Geocoder that searches for a partial address while the user is typing. It returns region or street address suggestions for the user to choose from and then marks the selected location of the address on a map.

Tip
See the Full Code section for a full code listing which you can copy and paste into your project.

Walkthrough

Skeleton Code

The skeleton code for this tutorial is essentially the same as that of the Simple Map tutorial.

XML

Copy

<%@ Page Language="C#" Src="AuthenticatedPage.aspx.cs" Inherits="AuthenticatedPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>AutocompleteGeocoder Demo</title>

    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css" type="text/css" />
    <script src="resources/thirdparty/jquery/jquery-min.js" type="text/javascript"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

    <script type="text/javascript" src="<% GetAPISource (); %>"></script>
    <script type="text/javascript">

    var main = function () {

      // JavaScript code goes here

    };

    </script>
  </head>

  <body onload="main ();">
    <div id="main_map" style="position: absolute; left: 10px; top: 10px; width: 640px; height: 480px;"></div>
    <form action="" style="position: absolute; left: 10px; top: 500px; height: 40px;">
    <div>
      <input type="text" id="search_field"  class="textbox" style="width: 250px;" />
      <input type="text" id="country_field" class="textbox" style="width: 50px;" value="USA" /> 
      <p id="p1">Enter search string here</p>
    </div>
    </form>
  </body> 
</html>

JavaScript Code

Place the following code inside the main() function, created above.

This code performs the following actions:

defines the objects, namespaces and classes that we will use in this tutorial
sets the GeoStream server and authentication tokens
creates a new Map, placed in the main_map HTML division
creates a new ImageObject located on the newly created map. The image used for the ImageObject will be a red push-pin. See the PushPin Image section to obtain a copy of the image file.
sets up a search_field text box to implement the Autocomplete widget from the jQuery UI library. This invokes AutocompleteGeocoder.geoCode and populates a selectable list of address suggestions matching the search string that has been entered.
gets the location for the address the user selects, marks it on the map and zooms into the map.

JavaScript

Copy

var main = function () {
    var GeoBase = Telogis.GeoBase;
    var AutocompleteGeocoder = GeoBase.AutocompleteGeocoder;
    var ImageObject = GeoBase.MapLayers.ImageObject;
    var LatLon = GeoBase.LatLon;
    var Map = GeoBase.Widgets.Map;
    var Point = GeoBase.Point;
    var countryField = document.getElementById('country_field');

    Telogis.GeoBase.setService (<% GetService (); %>);
    Telogis.GeoBase.setAuthToken (<% GetToken (); %>);    

    var map = new Map({ id: 'main_map'});
    var forwardMarker = new ImageObject({map: map, anchorPoint: new Point(0.5, 1.0), src: 'images/pushpin-red.gif'});

    // Set up the search_field text box to implement the Autocomplete widget from the jQuery UI library to 
    // invoke AutocompleteGeocoder.geoCode, and populate a selectable list of suggestions.
    $("#search_field").autocomplete({
        source: function (request, response) {
            AutocompleteGeocoder.geoCode(
                request.term,
                countryField.value,
                map.getCenter(),
                3,
                function (searchResult) {
                    if(searchResult.getSuggestions().length > 0){
                        response($.map(searchResult.getSuggestions(), function (val) {
                            return { label: val.toString(), value: val };
                        }));
                    }else{
                        document.getElementById('p1').innerHTML = 'No matching address was found.';
                    }
                }
            );
        },

        // Place marker and zoom to address upon selection.
        select: function (event, ui) {
            var location = ui.item.value.getLocation();
            if (ui.item.value.isRegion()) {
                if (location.isValid()) {
                    document.getElementById('p1').innerHTML = 'Region center found at ' + location;
                    forwardMarker.show();
                    forwardMarker.setPosition(location);
                } else {
                    forwardMarker.hide();
                }
                map.zoomTo(ui.item.value.getBoundingBox());
            } else if (!ui.item.value.isStreetNameOnly()) {
                document.getElementById('p1').innerHTML = 'Address found at ' + location;
                forwardMarker.show();
                forwardMarker.setPosition(location);
                map.setZoomIndex(map.getMaxZoomIndex());
                map.pan(location);
            }
        }
    });
}

Testing

Load the newly created page in a web browser. Start entering an address or a region name into the text box. As you type, you will see a list of suggestions appear, from which you can select a street address or region. The selected location will appear on the map. Underneath the text box the coordinates of the location will be displayed.

Tip
Don't see a map? Refer to Troubleshooting a GeoStream Server

Full Code

XML

Copy

<%@ Page Language="C#" Src="AuthenticatedPage.aspx.cs" Inherits="AuthenticatedPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>AutocompleteGeocoder Demo</title>

        <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css" type="text/css" />
        <script src="resources/thirdparty/jquery/jquery-min.js" type="text/javascript"></script>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

        <script type="text/javascript" src="<% GetAPISource (); %>"></script>
        <script type="text/javascript">

      var main = function(){  

        var GeoBase = Telogis.GeoBase;
        var AutocompleteGeocoder = GeoBase.AutocompleteGeocoder;
        var ImageObject = GeoBase.MapLayers.ImageObject;
        var LatLon = GeoBase.LatLon;
        var Map = GeoBase.Widgets.Map;
        var Point = GeoBase.Point;
        var countryField = document.getElementById('country_field');

        Telogis.GeoBase.setService (<% GetService (); %>);
        Telogis.GeoBase.setAuthToken (<% GetToken (); %>);  

        var map = new Map({ id: 'main_map'});
        var forwardMarker = new ImageObject({map: map, anchorPoint: new Point(0.5, 1.0), src: 'images/pushpin-red.gif'});

        // Set up the search_field text box to implement the Autocomplete widget from the jQuery UI library to 
        // invoke AutocompleteGeocoder.geoCode, and populate a selectable list of suggestions.
        $("#search_field").autocomplete({
          source: function (request, response) {
            AutocompleteGeocoder.geoCode(
              request.term,
              countryField.value,
              map.getCenter(),
              3,
              function (searchResult) {
                if(searchResult.getSuggestions().length > 0){
                  response($.map(searchResult.getSuggestions(), function (val) {
                    return { label: val.toString(), value: val };
                  }));
                }else{
                  document.getElementById('p1').innerHTML = 'No matching address was found.';
                }
              }
            );
          },

          // Place marker and zoom to address upon selection.
          select: function (event, ui) {
            var location = ui.item.value.getLocation();
            if (ui.item.value.isRegion()) {
              if (location.isValid()) {
                document.getElementById('p1').innerHTML = 'Region center found at ' + location;
                forwardMarker.show();
                forwardMarker.setPosition(location);
              } else {
                forwardMarker.hide();
              }
              map.zoomTo(ui.item.value.getBoundingBox());
            } else if (!ui.item.value.isStreetNameOnly()) {
              document.getElementById('p1').innerHTML = 'Address found at ' + location;
              forwardMarker.show();
              forwardMarker.setPosition(location);
              map.setZoomIndex(map.getMaxZoomIndex());
              map.pan(location);
            }
          }
        });
      }

    </script>
    </head>

    <body onload="main ();">
    <div id="main_map" style="position: absolute; left: 10px; top: 10px; width: 640px; height: 480px;"></div>
    <form action="" style="position: absolute; left: 10px; top: 500px; height: 40px;">
      <div>
        <input type="text" id="search_field"  class="textbox" style="width: 250px;" />
        <input type="text" id="country_field" class="textbox" style="width: 50px;" value="USA" /> 
        <p id="p1">Enter search string here</p>
      </div>
    </form>
    </body> 
</html>

PushPin Image

Save the following image as images/pushpin-red.gif, in the same path as the webpage created above.

pushpin-red.gif

Next Topic

Creating Balloons