EMS Core - 2.72.2213-20250716030323

Whereis Javascript API Tutorial

Hello Map

A step-by-step guide for getting started with the Whereis® Javascript API. Learn how to create a simple HTML page that contains a full-screen WhereIs® map.

Create an empty web page file. Save it as map.html

Start with a basic HTML 5 document structure, including DOCTYPE, html, head and body tags.

Add a DIV to contain your map, and add the attribute id="map". Later you will use the id attribute to tell the API where the map will be added.

Define CSS height and width properties for the map DIV. This will determine the size and shape of the map when it is initialised. For this example we want the map to be full screen so we add the appropriate css styling, as shown.

Add the WhereIs API® JavaScript include to the document head. Make sure you replace <YOUR_TOKEN> with the token for your account. Also, ensure your account settings include the domain that will be hosting this page (e.g. localhost)

Add a script tag to contain the JavaScript functions used by this web page.

Declare a global variable for your map. This variable will be used later by any JavaScript functions that interact with the map.

Create a JavaScript function as an event handler for the window load event. This function will run when the page has finished loading.

Add a statement to the event handler that will initialise the map and place it in the tag with the attribute id="map".

Save your file, copy to your host and view it in a browser. It should display a full page WhereIs® map. You can use this file as the basis for any web pages that use the Whereis® JavaScript API

<!DOCTYPE html>
<html>
<head>
    <title>Demo</title>
    <script type="text/javascript"
        src="http://au.com.sensis.ems.task.api.ems.sensis.com.au/v2/web/js/ems/?token=<YOUR_TOKEN>"></script>
    <script type="text/javascript">
        var map = null;
        window.onload = function() {
            map = new EMS.Map("map");
        }
    </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>