Whereis Javascript API Tutorial

All Roads Lead to Roma

A step by step guide for getting started with the Whereis Javascript API. Learn how to create a simple web page for mobile devices that contains a full-screen WhereIs® API mobile-optimised map. This tutorial requires completion of the Where Am I tutorial

Start with completed Where Am I Tutorial. Take your existing html file "whereami.html" and save as "roma.html"
Define global variable for the Whereis API route service
Define the location of Roma, QLD. You can change this to anywhere you like.
Initialize the Whereis API route service when the page has loaded
Add a callback function for handling the route when it has been generated.
Define the waypoints for the route
Run the route function, passing in the waypoints and callback function
<!DOCTYPE html>
<html>
<head>
    <title>Demo</title>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <script type="text/javascript" 
        src="http://api.ems.sensis.com.au/v2/web/js/ems/?libraries=mobile&token=<YOUR_TOKEN>"></script>
    <script type="text/javascript">
        var map = null;
        var service = null;
        var roma = new EMS.LonLat(148.78833, 26.57185);

        //callback function to handle route response
        function addRoute(response, status) {
            if (status == EMS.Status.OK) {
                map.setRoute(response.route);
            } else {
                alert("Route error:" + response.message);
            }
        }

        function updatePosition(position) {
             //get position and create a point
             var point = new EMS.LonLat(position.coords.longitude,
             position.coords.latitude);
             //create icon
             var icon = EMS.Icon.crosshair();

             //create marker and add to map
             var marker = new EMS.Marker(point, icon);
             map.addMarker(marker);
             //recenter and zoom map
             map.setCenter(point, 13);
              //define waypoints
             var waypoints = [];
             waypoints.push(point);
             waypoints.push(roma);

              //run the route service, with waypoints and callback
             service.route(waypoints, addRoute);
        }

        function errorPosition(error) {
            ...
        }

        window.onload = function() {
            map = new EMS.MobileMap("map");
            routeService = new EMS.Services.Route();
            navigator.geolocation.getCurrentPosition(updatePosition, errorPosition);            
        }
    </script>
    <style>
        html, body {
            height:100%;
            width:100%;
            padding:0;
            margin:0
        }
        #map {
            height:100%;
            width:100%
        }
    </style>
</head>
<body>
    <div id="map"></div>
</body>
</html>