GeoAnalytics v1.3.1

DistanceService.js

DistanceService()
The DistanceService's constructor
computeDistance()
Computes distances.

DistanceService()

constructor

The DistanceService object is responsible for computing distances between a point and a list of waypoints

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

computeDistance()

method

Computes distances.

Options:

travelMode(String)The travel mode. Accepted values: vehicle, pedestrian, publictransport. Defauls is vehicle.
avoidTollRoad(Boolean)Indicates if toll roads should ve avoided. Defauls is true.
avoidHighways(Boolean)Indicates if highways should be avoided. Default is true.
unitSystem(String)Specifies the unit system that the distance service should use. Accepted values: metric, imperial, metricandimperial. Deafult is metricandimperial.
optimizationType(String)Indicates the type of oprimization the distance service should take into consideration. Accepted values: distance, time. Default is time.
customSpeedProfile(Array)An array of custom speed limits on different types of roads (highway, express road, national road, etc.).

Parameter	Type	Description
start	LatLng	The start point.
waypoints	Array	An array of object consisting of the following properties: `name` (String) The waypoint name. `location` (LatLng) The waypoint location.
options	Object	The options to set for computing distances.

returns

DistanceServiceResult - Array of DistanceService results.

Example

$(document).ready(function(){

    var mapContainer = T.DomUtil.get("map"),
        mapoLayer = new T.TibcoLayer(),
        markersLayer = new T.MarkersLayer(),
        popupsLayer = new T.PopupsLayer(),
        vectorLayer = new T.VectorLayer({useCanvas: false});

    var map = new T.Map(
        mapContainer,					
        {
            zoom: 3, 
            center: new T.LatLng(46, 2)
        }
    );								

    map.addLayer(mapoLayer);
    map.addLayer(markersLayer);
    map.addLayer(popupsLayer);
    map.addLayer(vectorLayer);

    $( "#results #toggle" ).click(function() {
        $( "#results #container" ).toggle( "slow", function() {
            // Animation complete.
        });
    });

    // Distance computation
    this.distanceService = new T.DistanceService("demo", "2u7kdn4DnYE=", "https://geowebservices.maporama.com/");

    var computeDistanceHandler = function () {
        var startStringNoSpaces = $("#start").val().replace(/\s/g, "");

        var start = new T.LatLng(startStringNoSpaces.split(',')[0], startStringNoSpaces.split(',')[1]),
            waypoints = [],
            speedLimits = $("#custom-speed-profile").val();

        if (speedLimits) {
            speedLimits = speedLimits.replace(/\s/g, "");
            speedLimits = speedLimits.split(',');
        };

        // Add overlay
        showHideOverlay(true);

        // Remove all markers
        markersLayer.removeAllMarkers();

        // Add start marker
        addMarker(start, "Start", "http://geoanalytics.tibco.com/documentation/assets/img/marker.png");

        // Parse waypoints
        $("#waypoints .waypoint").each(function (index) {
            var waypoint = {},
                locationNoSpaces = "",
                theIndex = index + 1;


            waypoint.name = $('#waypoints #waypoint-' + theIndex + ' #name').val();

            locationNoSpaces = $('#waypoints #waypoint-' + theIndex + ' #location').val().replace(/\s/g, "");
            waypoint.location = new T.LatLng(locationNoSpaces.split(',')[0], locationNoSpaces.split(',')[1]);

            // Add waypoint marker
            addMarker(waypoint.location, waypoint.name);

            // Add line between start and current waypoint
            addStartWaypointPolyline(start, waypoint.location);

            // Add to waypoints array
            waypoints.push(waypoint);
        });


        // Save options
        var distanceOptions = {
            travelMode: $("#travel-mode").val(),
            avoidTollRoad: $("#avoid-toll-roads").val(),
            avoidHighways: $("#avoid-highways").val(),
            unitSystem: $("#unit-system").val(),
            optimizationType: $("#optimization-type").val(),
            customSpeedProfile: speedLimits,
        };

        zoomToMarkers();

        // Compute distance
        this.distanceService.computeDistance(start, waypoints, distanceOptions).then(function (distanceServiceResults) {

            $('#results').toggle(true);

            // Remove overlay
            showHideOverlay(false);

            var template = $("#distance-results-tpl").html(),
                rendered = Mustache.render(template, {results: distanceServiceResults});

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


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

            // Remove overlay
            showHideOverlay(false);

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

        });
    };

    var addWaypointHandler = function () {
        var template = $("#waypoint-tpl").html(),
            rendered = Mustache.render(template, {
                index: $("#waypoints").children().length + 1
            });

        $("#waypoints").append(rendered);
    };

    var deleteWaypointHandler = function () {
        var lastIndex = 1;

        $("#waypoints .waypoint").each(function (index) {
            lastIndex = index + 1;
        });

        $("#waypoints #waypoint-" + lastIndex).remove();
    };

    var addMarker = function (latLng, name, imgPath) {

        var marker = new T.ImageMarker(
            latLng,
            imgPath || "http://geoanalytics.tibco.com/documentation/assets/img/marker.png"
        );

        markersLayer.addMarker(marker);
    };

    var addStartWaypointPolyline = function (start, waypointLocation) {
        var polyline = new T.Polyline([[start.lat,start.lng],[waypointLocation.lat, waypointLocation.lng]]);				
        polyline.setStyle({ color:"#FF0000", stroke: true });

        vectorLayer.addGeometry(polyline);
    };

    var zoomToMarkers = function () {
        var i = 0,
            bounds = new T.LatLngBounds(); 

        for (i = 0; i < markersLayer.markers.length; i++) {
            bounds.extend(markersLayer.markers[i].latlng);
        }

        map.fitToBounds(bounds);
    };

    var showHideOverlay = function (show) {

        if (show) {
            var docHeight = $(document).height();

            $("body").append("<div id='overlay'></div>");

            $("#overlay")
                .height(docHeight)
                .css({
                'opacity' : 0.4,
                'position': 'absolute',
                'top': 0,
                'left': 0,
                'background-color': 'black',
                'width': '100%',
                'z-index': 5000
            });
        } else {
            $("#overlay").remove();
        }
    };

    // Event listeners
    $("#compute-distance-btn").click(T.Util.bind(computeDistanceHandler, this));
    $("#add-waypoint-btn").click(T.Util.bind(addWaypointHandler, this));
    $("#delete-waypoint-btn").click(T.Util.bind(deleteWaypointHandler, this));
});

<html>    
    <head>
        <title>TibcoMaps - Distance Service</title>
        <meta charset="UTF-8">

        <!-- CSS -->
        <link rel="stylesheet", href="distance-service.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="distance-service.js"></script>
    </head>
    

    <body>
        <div class="container">
            <div id="form">
                <div class="options">
                    <div class="form-group">
                        <div class="title">Travel mode:</div>
                        <select id="travel-mode">
                            <option value="vehicle">Vehicle</option>
                            <option value="pedestrian">Pedestrian</option>
                            <option value="publictransport">Public transport</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <div class="title">Avoid toll roads:</div>
                        <select id="avoid-toll-roads">
                            <option value="true">True</option>
                            <option value="false">False</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <div class="title">Avoid highways:</div>
                        <select id="avoid-highways">
                            <option value="true">True</option>
                            <option value="false">False</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <div class="title">Unit system:</div>
                        <select id="unit-system">
                            <option value="metric">Metric</option>
                            <option value="imperial">Imperial</option>
                            <option value="metricandimperial">Metric & Imperial</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <div class="title">Optimize by:</div>
                        <select id="optimization-type">
                            <option value="time">Time</option>
                            <option value="distance">Distance</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <div class="title">Custom speed limits:</div>
                        <div class="inputs">
                            <input id="custom-speed-profile" type="text" placeholder="e.g. 150,125,85,65,48,34,24,8" value=""/>
                        </div>
                    </div>
                </div>

                <div id="btn-group">
                    <button id="add-waypoint-btn">Add waypoint</button>
                    <button id="delete-waypoint-btn">Delete waypoint</button>
                    <button id="compute-distance-btn">Compute Distance</button>
                </div>

                <div class="form-group">
                    <div class="title">Start:</div>
                    <div class="inputs">
                        <input id="start" type="text" placeholder="Latitude, Longitude" value="48.859367, 2.339850"/>
                    </div>
                </div>

                <div id="waypoints">
                    <div id="waypoint-1" class="form-group waypoint">
                        <div class="title">Waypoint 1</div>
                        <div class="inputs">
                            <input id="name" type="text" placeholder="Waypoint name..." value="Lyon"/>
                            <input id="location" type="text" placeholder="Latitude, Longitude" value="45.767835, 4.831688"/>
                        </div>
                    </div>
                </div>




            </div>
            <div id="map"></div>
            <div id="results">
                <div id="toggle">Results</div>
                <div id="container"></div>
            </div>
        </div>

        <script id="waypoint-tpl" type="x-tmpl-mustache">
            <div id="waypoint-{{index}}" class="form-group waypoint">
                <div class="title">Waypoint {{index}}</div>
                <div class="inputs">
                    <input id="name" type="text" placeholder="Waypoint name..." value=""/>
                    <input id="location" type="text" placeholder="Latitude, Longitude" value=""/>
            </div>
            </div>
        </script>

        <script id="distance-results-tpl" type="x-tmpl-mustache">
            {{#results}}
                <div class="result-item">
                    <div id="title">Route: <b>{{startName}}</b> to <b>{{endName}}</b></div>
                    <br/>
                    <div id="start-position">Start location: {{startLocation.lat}}, {{startLocation.lng}}</div>
                    <div id="end-position">End location: {{endLocation.lat}}, {{endLocation.lng}}</div>
                    <br/>
                    <div id="distance">
                        <div><b>Distance information:</b></div>
                        {{#distance.kilometers}}<div>Kilometers: <i>{{distance.kilometers}}</i></div>{{/distance.kilometers}}
                        {{#distance.meters}}<div>Meters: <i>{{distance.meters}}</i></div>{{/distance.meters}}
                        {{#distance.miles}}<div>Miles: <i>{{distance.miles}}</i></div>{{/distance.miles}}
                        {{#distance.feet}}<div>Feet: <i>{{distance.feet}}</i></div>{{/distance.feet}}
            </div>
                    <br/>
                    <div id="time">
                        <div><b>Time information:</b></div>
                        {{#time.hh_mm}}<div>Duration: <i>{{time.hh_mm}}</i></div>{{/time.hh_mm}}
                        {{#time.seconds}}<div>Duration (sec): <i>{{time.seconds}}</i></div>{{/time.seconds}}
            </div>
            </div>
            {{/results}}
            {{^results}}
                <div class="error">{{errorMessage}}</div>
            {{/results}}
        </script>
    </body>
</html>

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

.container  {
    display: flex;
    height: 100%;
    padding: 0 0 0 15px;
}

.container #form {
    width: 400px;
    height: 100%;
    padding-right: 15px;
    overflow: auto;
}

.container #form .options {
    border-bottom: 1px solid black;
    padding-bottom: 10px;
}

.container #form .form-group {
    display: flex;
    margin-top: 10px;
}

.container #form .form-group .title {
    width: 190px;
    font-weight: bold;
    margin-bottom: 5px;
}

.container #form .form-group .inputs > input {
    width: 180px;
    margin-bottom: 5px;
}

.container #map {			
    flex: 1;
}

.container #btn-group {
    margin: 20px 0;
}

.container #waypoints .waypoint {
    padding: 10px;
    border: 1px dotted black;
}

#results {
    position: absolute;
    top: 50px;
    right: 0px;
    display: none;
    background-color: white;
}

#results #container {
    padding: 30px;
    max-height: 500px;
    overflow: auto;
}

#results #toggle {
    position: absolute;
    top: 0;
    left: -60px;
    width: 50px;
    background-color: white;
    padding: 10px 0 10px 10px;
    cursor: pointer;
}

#results .result-item {
    border: 1px dotted black;
    padding: 10px;
    margin-bottom: 10px;
}