Creating a Simple Route

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

This tutorial demonstrates how basic routing functionality can be achieved using the JavaScript API.

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 similar to the code for the Simple Map tutorial.

XML

Copy

<%@ Page Language="C#" Src="AuthenticatedPage.aspx.cs" Inherits="AuthenticatedPage" %>

<!DOCTYPE html >

<html>
<head>
  <title>Routing 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>
</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 Route object with a routing strategy of 'Fastest'.
creates a new RouteLayer object, which defines what the route connecting the route stops will look like on the map.
adds a new function to the map's right-click event. This function will create a route stop, display the route stop on the map and append it to the list of route stops used for getting directions. If there are more than one route stops, the route will be calculated and displayed on the map. The image used for the route stop will be a red push-pin. See the PushPin Image section to obtain a copy of the image file.

JavaScript

Copy

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

var icons = [];

var map = new Map ({id: "main_map"});

var myStrategy = new Telogis.GeoBase.Routing.RoutingStrategyFastest();
var myRoute = new Telogis.GeoBase.Routing.Route();
myRoute.strategy = myStrategy;
var myRouteLayer = new Telogis.GeoBase.MapLayers.RouteLayer({
    id: 'route_directions',
    map: map,
    lineColor: new Telogis.GeoBase.Color(0,18,255,0.5),
    lineWidth: 4,
    show: true
});

//add stops to Route and get directions when right-click on map
map.RightClick.append(function (e) {
    var stop = new IndexedImageObject({
        index: icons.length + 1,
        location: map.mouseLatLon(e),
        map: map,
        indexOffset: new GeoBase.Point(-5, -10),
        indexStyle: { background: 'transparent' },
        src: 'images/pushpin-red.gif'
    });
    icons.push(stop);

    myRouteLayer.reset();

    myRoute.appendStop(stop);

    if(icons.length > 1){
        myRoute.getQuickDirections(function (result) {
            myRouteLayer.setPoints(result.getPoints());
            myRouteLayer.show();
        }, function (error) {alert(error)}
        );
    }
});

Testing

Load the newly created page in a web browser. You should see a map. Right-click on the map to create a route stop. If you have created two or more route stops a route will automatically appear connecting the last two route stops that you have created.

Full code

XML

Copy

  <%@ Page Language="C#" Src="AuthenticatedPage.aspx.cs" Inherits="AuthenticatedPage" %>

<!DOCTYPE html >
<html>
<head>
  <title>Routing Demo</title>

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

    var main = function () {

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

      var icons = [];

      var map = new Map ({id: "main_map"});

      var myStrategy = new Telogis.GeoBase.Routing.RoutingStrategyFastest();
      var myRoute = new Telogis.GeoBase.Routing.Route();
      myRoute.strategy = myStrategy;
      var myRouteLayer = new Telogis.GeoBase.MapLayers.RouteLayer({
        id: 'route_directions',
        map: map,
        lineColor: new Telogis.GeoBase.Color(0,18,255,0.5),
        lineWidth: 4,
        show: true
      });

      //add stops to Route and get directions when right-click on map
      map.RightClick.append(function (e) {
        var stop = new IndexedImageObject({
          index: icons.length + 1,
          location: map.mouseLatLon(e),
          map: map,
          indexOffset: new GeoBase.Point(-5, -10),
          indexStyle: { background: 'transparent' },
          src: 'images/pushpin-red.gif'
        });
        icons.push(stop);

        myRouteLayer.reset();

        myRoute.appendStop(stop);

        if(icons.length > 1){
          myRoute.getQuickDirections(function (result) {
            myRouteLayer.setPoints(result.getPoints());
            myRouteLayer.show();
          }, function (error) {alert(error)}
          );
        }
      });

    };
  </script>

</head>
<body onload="main ();">
  <div id="main_map" style="position: absolute; left: 10px; top: 10px; width: 640px; height: 480px;">  </div>
</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