Whereis Javascript API Tutorial

Where Am I

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. The Whereis® JavaScript API Geocoding Service is called to determine the address of your current location, using HTML5 geolocation reporting. This tutorial requires completion of the Hello Mobile tutorial.

Take your existing html file "mobile.html" and save as "whereami.html"
Create a JavaScript function called updatePostition, that creates a point based on your HTML5 browser&apost;s geoposition.
Create a marker in your function and add it to the map.
After the marker is added, center your map on that point, and zoom in to level 13.
Set the HTML5 geolocation object to asynchronously call your updatePosition function
Add a function to report geolocation errors via an alert popup.
Set the geolocation object to call your function when there is a geolocation error.
Save your file, copy to your host and view it in a browser.
<!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;
        
        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);
        }

        function errorPosition(error) {
            switch(error.code) {
             case error.PERMISSION_DENIED:
                 return alert("You didn't give me permission");
             case error.POSITION_UNAVAILABLE:
                 return alert("Position unavailable");
             case error.TIMEOUT:
                    return alert("Tired of waiting");
             case error.UNKNOWN_ERROR:
                    return alert("Unknown error");
            }

        }
        
        window.onload = function() {
            map = new EMS.MobileMap("map");
            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>