GeoAnalytics v1.3.1

Geocoder()

constructor

The geocoder object is responsible for geocoding and reverse geocoding data.

Parameter	Type	Description
customer	String	The customer name.
key	String	The authorization key necessary for using the [Geocoder].

geocode()

method

Geocodes data.

Options:

country(String)The country name or country code. Mandatory!
city(String)The city. 'city' or 'zip' must be set!
zip(String)The zip. 'city' or 'zip' must be set!
state(String)The state. Can be set for better accuracy.
street(String)The street. Can be set for better accuracy.

Parameter	Type	Description
options	Object	The options to set for geocoding.

returns

GeocoderResult - Array of geocoder results.

Example

$(document).ready(function(){

    this.geocoder = new T.Geocoder("demo", "2u7kdn4DnYE=");
    var geocodeHandler = function () {

        // Set geocoder options
        var geocoderOptions = {
            country: $("#country").val(),
            city: $("#city").val(),
            zip: $("#zip").val(),
            state: $("#state").val(),
            street: $("#street").val(),
        };

        // Geocode
        this.geocoder.geocode(geocoderOptions).then(function (geocoderResults) {
            var template = $("#geocoder-results-tpl").html(),
                rendered = null;
            
            // Assign index to each result
            for (var i = 0; i < geocoderResults.length; i++) {
                geocoderResults[i].index = i + 1;
            }

            // Fill template with geocoding info
            rendered = Mustache.render(template, {results: geocoderResults});

            // Change in DOM
            $("#results").html(rendered);


        }, function (geocoderError) {
            var template = $("#geocoder-results-tpl"),
                rendered = Mustache.render(template, {errorMessage: geocoderError});

            $("#results").html(rendered);

        });
    };

    // Event listener
    $("#geocode-btn").click(T.Util.bind(geocodeHandler, this));
    $(document).keypress(T.Util.bind(function(e) {
        if(e.which === 13 || e.keyCode === 13) {
            geocodeHandler.call(this, []);
        }
    }, this));
});

<!DOCTYPE html>
<html>    
    <head>
        <title>TibcoMaps - Geocode</title>
        <meta charset="UTF-8">

        <!-- CSS -->
        <link rel="stylesheet", href="geocode.css"/>
        
        <!-- Javascript -->
        <script type="text/javascript" src='../../lib/GeoAnalytics.js'></script>
        <script type="text/javascript" src='../../lib/jquery-1.9.1.min.js'></script>
        <script type="text/javascript" src='../../lib/mustache.min.js'></script>
        <script type="text/javascript" src="geocode.js"></script>
    </head>

    <body>
        <div id="container">
            <div id="form">
                <div>Mandatory:</div>
                <div class="inputs">
                    <input id="country" type="text" placeholder="Country..." value="France"/>
                </div>
                <br/>
                <div>Set at least one of the following:</div>
                <div class="inputs">
                    <input id="city" type="text" placeholder="City..." value="Paris"/><br/>
                    <input id="zip" type="text" placeholder="Zip..." value="75002"/><br/>
                </div>
                <br/>
                <div>Optional info for better accuracy:</div>
                <div class="inputs">
                    <input id="state" type="text" placeholder="State..."/><br/>
                    <input id="street" type="text" placeholder="Street..." value="10 rue de cléry"/>
                </div>

                <button id="geocode-btn">Geocode</button>
            </div>

            <div id="results"></div>
        </div>

        <script id="geocoder-results-tpl" type="x-tmpl-mustache">
            {{#results}}
                <div id={{index}} class="result-item">
                    <u><b>Result {{index}}:</b></u>
                    {{#location}}<div id="location">Location (latitude, longitude): <i>{{location.lat}}, {{location.lng}}</i></div>{{/location}}
                    {{#bounds}}<div id="bounding-box">Bounds (south west; north east): <i>{{bounds.southWest.lat}}, {{bounds.southWest.lng}}; {{bounds.northEast.lat}}, {{bounds.northEast.lng}}</i></div>{{/bounds}}
                    {{#city}}<div id="city">City: <i>{{city}}</i></div>{{/city}}
                    {{#country}}<div id="country">Country: <i>{{country}}</i></div>{{/country}}
                    {{#address}}<div id="address">Address: <i>{{address}}</i></div>{{/address}}
                    {{#state}}<div id="state">State: <i>{{state}}</i></div>{{/state}}
                    {{#street}}<div id="street">Street: <i>{{street}}</i></div>{{/street}}
                    {{#streetName}}<div id="street-name">Street name: <i>{{streetName}}</i></div>{{/streetName}}
                    {{#streetNumber}}<div id="street-nb">Street number: <i>{{streetNumber}}</i></div>{{/streetNumber}}
                    {{#streetType}}<div id="street-type">Street type: <i>{{streetType}}</i></div>{{/streetType}}
                    {{#zip}}<div id="zip">Zip: <i>{{zip}}</i></div>{{/zip}}
                    {{#level}}<div id="level">Geocoding level: <i>{{level}}</i></div>{{/level}}
                    {{#levelInfo}}<div id="level-info">Geocoding level info: <i>{{levelInfo}}</i></div>{{/levelInfo}}
                    {{#score}}<div id="score">Geocoding score (accuracy percentage): <i>{{score}}</i></div>{{/score}}
            </div>
            {{/results}}
            {{^results}}
                <div class="error">{{errorMessage}}</div>
            {{/results}}
        </script>
    </body>
</html>

body, html { 
    height: 100%;
    width: 100%;
    margin: 0px;
}

input {
    width: 200px;
    padding: 5px 10px;
    margin: 10px 0 0 0;
}

button {
    margin: 10px 0 0 0;
}

#container {
    display: flex;
}

#container #form {
    flex-grow: 1;
    padding: 20px;
}

#container #results {
    height: 400px;
    flex-grow: 1;
    padding: 20px;
    overflow: auto;
}

#container #results .result-item {
    background-color: #C0C0C0;
    margin: 0 0 10px 0;
    padding: 10px;
}

#container .error {
    color: red;
}

reverseGeocode()

method

Reverse geocodes data.

Parameter	Type	Description
latLngObject	LatLng	The latitude and longitude to reverse geocode.

returns

GeocoderResult - Array of geocoder results.

Example

$(document).ready(function(){

    this.geocoder = new T.Geocoder("demo", "2u7kdn4DnYE=");
    var reverseGeocodeHandler = function () {

        // Set reverse geocode lat lng
        var latLngObject = new T.LatLng(parseFloat($("#latitude").val()), parseFloat($("#longitude").val()));

        // Geocode
        this.geocoder.reverseGeocode(latLngObject).then(function (geocoderResults) {
            var template = $("#geocoder-results-tpl").html(),
                rendered = null;
            
            // Assign index to each result
            for (var i = 0; i < geocoderResults.length; i++) {
                geocoderResults[i].index = i + 1;
            }

            // Fill template with geocoding info
            rendered = Mustache.render(template, {results: geocoderResults});

            // Change in DOM
            $("#results").html(rendered);


        }, function (geocoderError) {
            var template = $("#geocoder-results-tpl"),
                rendered = Mustache.render(template, {errorMessage: geocoderError});

            $("#results").html(rendered);

        });
    };

    // Event listener
    $("#reverse-geocode-btn").click(T.Util.bind(reverseGeocodeHandler, this));
    $(document).keypress(T.Util.bind(function(e) {
        if(e.which === 13 || e.keyCode === 13) {
            reverseGeocodeHandler.call(this, []);
        }
    }, this));
});

<!DOCTYPE html>
<html>    
    <head>
        <title>TibcoMaps - Reverse geocode</title>
        <meta charset="UTF-8">

        <!-- CSS -->
        <link rel="stylesheet", href="reverse-geocode.css"/>

        <!-- Javascript -->
        <script type="text/javascript" src='../../lib/GeoAnalytics.js'></script>
        <script type="text/javascript" src='../../lib/jquery-1.9.1.min.js'></script>
        <script type="text/javascript" src='../../lib/mustache.min.js'></script>
        <script type="text/javascript" src="reverse-geocode.js"></script>
      
    </head>

    <body>
        <div id="container">
            <div id="form">
                <div><input id="latitude" type="text" placeholder="Latitude..." value="48.867611"/></div>
                <div><input id="longitude" type="text" placeholder="Longitude..." value="2.344924"/></div>

                <button id="reverse-geocode-btn">Reverse geocode</button>
            </div>

            <div id="results"></div>
        </div>

        <script id="geocoder-results-tpl" type="x-tmpl-mustache">
            {{#results}}
                <div id={{index}} class="result-item">
                    <u><b>Result {{index}}:</b></u>
                    {{#location}}<div id="location">Location (latitude, longitude): <i>{{location.lat}}, {{location.lng}}</i></div>{{/location}}
                    {{#bounds}}<div id="bounding-box">Bounds (south west; north east): <i>{{bounds.southWest.lat}}, {{bounds.southWest.lng}}; {{bounds.northEast.lat}}, {{bounds.northEast.lng}}</i></div>{{/bounds}}
                    {{#city}}<div id="city">City: <i>{{city}}</i></div>{{/city}}
                    {{#country}}<div id="country">Country: <i>{{country}}</i></div>{{/country}}
                    {{#address}}<div id="address">Address: <i>{{address}}</i></div>{{/address}}
                    {{#state}}<div id="state">State: <i>{{state}}</i></div>{{/state}}
                    {{#street}}<div id="street">Street: <i>{{street}}</i></div>{{/street}}
                    {{#streetName}}<div id="street-name">Street name: <i>{{streetName}}</i></div>{{/streetName}}
                    {{#streetNumber}}<div id="street-nb">Street number: <i>{{streetNumber}}</i></div>{{/streetNumber}}
                    {{#streetType}}<div id="street-type">Street type: <i>{{streetType}}</i></div>{{/streetType}}
                    {{#zip}}<div id="zip">Zip: <i>{{zip}}</i></div>{{/zip}}
                    {{#level}}<div id="level">Geocoding level: <i>{{level}}</i></div>{{/level}}
                    {{#levelInfo}}<div id="level-info">Geocoding level info: <i>{{levelInfo}}</i></div>{{/levelInfo}}
                    {{#score}}<div id="score">Geocoding score (accuracy percentage): <i>{{score}}</i></div>{{/score}}
            </div>
            {{/results}}
            {{^results}}
                <div class="error">{{errorMessage}}</div>
            {{/results}}
        </script>
    </body>
</html>

body, html { 
    height: 100%;
    width: 100%;
    margin: 0px;
}

input {
    width: 200px;
    padding: 5px 10px;
    margin: 10px 0 0 0;
}

button {
    margin: 10px 0 0 0;
}

#container {
    display: flex;
}

#container #form {
    flex-grow: 1;
    padding: 20px;
}

#container #results {
    height: 400px;
    flex-grow: 1;
    padding: 20px;
    overflow: auto;
}

#container #results .result-item {
    background-color: #C0C0C0;
    margin: 0 0 10px 0;
    padding: 10px;
}

#container .error {
    color: red;
}

Geocoder.js

Geocoder()

geocode()

Example

reverseGeocode()

Example