JavaScript Directions SDK User Guide

Introduction

This document describes the Directions service application programming interfaces (API) and shows the implementation with an example.

References

— JavaScript Maps SDK Reference Document

Routing

Routing and navigation are the commonly used applications of JavaScript^® services. The Directions API is used to get the set of maneuvers between two different geographic coordinates (represented by latitude/longitude). Routing directions with polyline is accomplished with the following code snippet which gives a route polyline with start and destination pins.

function drawRouteMap(){

var origin = new gssdirections.GSSLatLng(sourceMarker.getLatLng().lat, sourceMarker.getLatLng().lng);
var destination = new gssdirections.GSSLatLng(destinatioMarker.getLatLng().lat,
destinatioMarker.getLatLng().lng);
var directionsRequest = new gssdirections.GSSDirectionsRequest(origin, destination);

var directionsService = new gssdirections.GSSDirectionsService('PUT_YOUR_API_KEY_HERE');
centerMap(origin, destination);

directionsService.getRoute(directionsRequest, function(data){
console.log("Response: " + data);
var gssPolyline = displayDirections(data);
gssMap.fitBounds(gssPolyline.gssLatLngs);
            },
function(error){
console.log("Error: " + error.status + " --> " + error.statusText);
            });
          }

The following image shows a route polyline, with start and destination pins on a map. The source and destination pins are dropped by clicking Drop Source and Drop Destination.

To drop the markers on the map, the user clicks Drop Source, then right clicks the map to drop a marker on the origin location. The same is done using the Drop Destination button. As markers get dropped, the buttons are grayed-out as shown in the figure. When the user clicks the Get Route, the source and destination pins are connected by a route.

The route is cleared when the user clicks Clear Route.

Figure 1. Route PolyLine

Complete HTML Example

Following is the complete source code to implement routing.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>GSSMaps Demo</title>
  </head>
  <body>
    <style>
    html, body {
        width: 100%;
        height: 94%;
    }
    #map {
        width: 98%;
        height: 90%;
        margin-left:auto;
        margin-right:auto;
        display: inline-block;
    }
    .input_data{
        margin-top: 10px;
    }
    .events{
        margin: 15px 0 0 10px;
        position: absolute;
        display: inline-block;
        width:45%;
        overflow:auto;
        padding-top:8px;
    }
    input{padding:7px; border-radius: 10px;}
    .input_button{margin-top:5px;}
    </style>
    <h1 class="center">GSSMaps JavaScript SDK Example</h1>
    <div id="map"></div>
    <br>
    <div class="input_data">
        <div>
            <input type="button" class="input_button" id="S" name="S" value="Drop Source">
            <input type="button" class="input_button" id="D" name="D" value="Drop Destination">
            <input type="button" class="input_button" id="submit" name="submit" value="Get Route">
            <input type="button" class="input_button" id="clear" name="clear" value="Clear Route">
        </div>
    </div>
    <script type="text/javascript" src="/gssmaps.min.js"></script>
    <script type="text/javascript" src="/gssdirections.min.js"></script>
    <script src="/jquery.min.js"></script>
  </body>
  <script>
    $(function(){
        var defaults = {
            zoomControl: true,
            zoom: 16,
            center: [33.66851327953566, -117.69093392928296]
        };
        var accessToken = 'PUT_YOUR_API_KEY_HERE';
        var gssMap = new gssmaps.GSSMap(accessToken, 'map', defaults);
        var sourceMarker, destinatioMarker;
        var gssPolyline, type;

        gssMap.on('contextmenu', function(e){
            var lat = e.latlng.lat;
            var lng = e.latlng.lng;
            if(type){
                var marker = addMarker(lat, lng);
                setMarker(marker);
            } else {
                alert('Click a marker type (Source, Destination, Waypoint) button below the map.');
            }
        });

        $('.input_button').on('click', function(e){
            type = this.id;
        });

        $('#clear').on('click', function(e){
            clearDirections();
        })

        function setMarker(marker){
            if(type === 'S'){
                sourceMarker = marker;
                $('#' + type).attr("disabled", true);
                type = null;
            } else if(type === 'D'){
                destinatioMarker = marker;
                $('#' + type).attr("disabled", true);
                type = null;
            }
        }

        $('#submit').on('click', function(){
            drawRouteMap();
        });

        function drawRouteMap(){

            var origin = new gssdirections.GSSLatLng(sourceMarker.getLatLng().lat, sourceMarker.getLatLng().lng);
            var destination = new gssdirections.GSSLatLng(destinatioMarker.getLatLng().lat,
                destinatioMarker.getLatLng().lng);
            var directionsRequest = new gssdirections.GSSDirectionsRequest(origin, destination);

            var directionsService = new gssdirections.GSSDirectionsService('PUT_YOUR_API_KEY_HERE');
            centerMap(origin, destination);

            directionsService.getRoute(directionsRequest, function(data){
                console.log("Response: " + data);
                var gssPolyline = displayDirections(data);
                gssMap.fitBounds(gssPolyline.gssLatLngs);
            }, function(error){
                console.log("Error: " + error.status + " --> " + error.statusText);
            });
          }

        function displayDirections(gssDirections){
            return renderPolylineFromManeuvers(gssDirections);
        }

        function renderPolylineFromManeuvers(gssDirections){
            var maneuverInd, polylinePoints = [];
            var maneuvers = gssDirections.getRoutes()[0].getRouteSegments()[0].getRouteManeuvers()

            for(maneuverInd in maneuvers){
                var maneuver = maneuvers[maneuverInd];
                polylinePoints = polylinePoints.concat(maneuver.getPolyline());
                console.log(maneuver);
            }

            return renderPolyline(polylinePoints);
        }

        function renderPolyline(polylinePoints){
            var gssPolyline = new gssmaps.GSSPolyline(polylinePoints);
            return gssMap.addPolyline(gssPolyline);
        }

        function addMarker(lat, lng, popupContent){
            var gssLatLng = new gssmaps.GSSLatLng(lat, lng);
            var gssMarker = new gssmaps.GSSMarker(gssLatLng);
            return gssMap.addMarker(gssMarker, popupContent);
        }

        function centerMap(origin, destination){
            var latLngs = new Array();

            latLngs.push(sourceMarker.getLatLng());
            latLngs.push(destinatioMarker.getLatLng());
        }

        function clearDirections(){
            gssMap.removeAllMarkers();
            if(gssPolyline){
                gssMap.removePolyline(gssPolyline);
            }

            $('#S').attr("disabled", false);
            $('#D').attr("disabled", false);
        }

        });
  </script>
</html>