Geocoding

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

This tutorial demonstrates how to use a geocoder to perform a forward geocode. This tutorial will create a simple mapping application which may be used to search for an address in a given country. The map will zoom and pan to the address when found.

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" %>

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

    <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" /> 
    <input type="button" class="button" value="Search" id="geocode_trigger" />
    </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.

adds a new function to the button's click event. This function will perform an asynchronous forward geocode to find the coordinates of the address entered in the search box.

Note
Because the geoCode call is asynchronous, the geoCode function is passed another function as an argument. This second function will be passed a result object after the forward geocode process completes.

JavaScript

Copy

var main = function () {

    var GeoBase     = Telogis.GeoBase;
    var GeoCoder    = GeoBase.GeoCoder;
    var ImageObject = GeoBase.MapLayers.ImageObject;
    var LatLon      = GeoBase.LatLon;
    var Map         = GeoBase.Widgets.Map;
    var Point       = GeoBase.Point;

    GeoBase.setService (<% GetService (); %>);
    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'});

    geoCodeTrigger = document.getElementById ('geocode_trigger');
    countryField   = document.getElementById ('country_field');
    searchField    = document.getElementById ('search_field');

    // a compact way of generating error callbacks.
    var showError = function (context) {
        return function (error) {
            alert (context + ' failed (' + error.name + '): ' + error.message);
        };
    };

    //Check for browser compatibility
    if (geoCodeTrigger.addEventListener) {
        geoCodeTrigger.addEventListener('click', zoomToAddress, false);
    } else {
        geoCodeTrigger.attachEvent('onclick', zoomToAddress);
    }

    function zoomToAddress() {
        GeoCoder.geoCode (searchField.value, countryField.value, function (addr) {
            if (addr.length > 0) {
                var loc = addr [0].getLocation ();
                forwardMarker.setLocation (loc);
                map.setZoomIndex (map.getMaxZoomIndex ());
                map.pan (loc);
            }
            else alert ('No matching addresses were found.');
        }, showError ('Geocode'));
    };

    };

Testing

Load the newly created page in a web browser, enter an address and click 'Search'.

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>Geocoding Demo</title>

        <script type="text/javascript" src="<% GetAPISource (); %>"></script>
        <script type="text/javascript" src="tutorial.util.js"></script>
        <script type="text/javascript">

            var main = function () {

                var GeoBase     = Telogis.GeoBase;
                var GeoCoder    = GeoBase.GeoCoder;
                var ImageObject = GeoBase.MapLayers.ImageObject;
                var LatLon      = GeoBase.LatLon;
                var Map         = GeoBase.Widgets.Map;
                var Point       = GeoBase.Point;

                GeoBase.setService (<% GetService (); %>);
                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-green.gif'});

        geoCodeTrigger = document.getElementById ('geocode_trigger');
                countryField   = document.getElementById ('country_field');
                searchField    = document.getElementById ('search_field');

                // a compact way of generating error callbacks.
                var showError = function (context) {
                    return function (error) {
                        alert (context + ' failed (' + error.name + '): ' + error.message);
                    };
                };

        //Check for browser compatibility
        if (geoCodeTrigger.addEventListener) {
          geoCodeTrigger.addEventListener('click', zoomToAddress, false);
        } else {
          geoCodeTrigger.attachEvent('onclick', zoomToAddress);
        }

                function zoomToAddress() {
                     GeoCoder.geoCode (searchField.value, countryField.value, function (addr) {
                         if (addr.length > 0) {
                             var loc = addr [0].getLocation ();
                             forwardMarker.setLocation (loc);
                             map.setZoomIndex (map.getMaxZoomIndex ());
                             map.pan (loc);
                         }
                         else alert ('No matching addresses were found.');
                     }, showError ('Geocode'));
                };

            };

        </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" /> 
            <input type="button" class="button" value="Search" id="geocode_trigger" />
        </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

Reverse Geocoding