Whatamap Javascript SDK v.1.3
Documentation

Getting Started

Whatamap JS SDK is a Javascript library for showing, controlling and enriching custom maps. By custom maps, we mean airport maps, trade show floor plans, amusement park maps, national park maps - and any other maps. Example uses of Whatamap JS SDK are

  • adding an interactive map of an airport to a web page
  • adding an interactive map of an amusement park to a mobile app
  • adding an interactive map of a shopping mall to a kiosk on site

Whatamap JS SDK uses Whatamap Platform extensively. Whatamap Platform is a all-in-one platform for managing and publishing custom map content. It takes in various data formats (including raster and vector data), enables online content management, and outputs the same data for use by various Whatamap SDKs.

Hello World example

This tutorial shows you how to build a Hello World app with Whatamap JS SDK. A Hello World -application of Whatamap JS SDK naturally shows a custom map and a "Hello World!" POI on it.

Loading map

If you want to try this tutorial by yourself, you have to have following things at hand:

  • A web publishing environment where you can embed Javascript (a full web server or access to a CMS like Joomla)
  • Whatamap API key
  • Any custom map image
First, select a web page on which you want to show the map component. Add the following line to the header of the file:
<script type="text/javascript" src="http://wam-api.s3.amazonaws.com/javascript/whatamap-1.3-min.js"></script>
This enables Whatamap functions on the page.
Next you have to add a map component to the page. For convenience, let's set it id to "mapview". Add the following line to your HTML BODY:
<div id="mapview" width="500px;" height="500px">Loading map</div>

Now we have the functions there and a container for the map view. Next we should load a custom map into it. You can use various map formats but the simplest case is to use an image url. Upload your custom map image somewhere so that it has a public URL. Then add the following element to your HTML BODY, after the map container div:

<script type="text/javascript">

var map = new Whatamap(
	"apikey",
	"190bc57930a4d0e35f71e5954de390d8edbd792e",
     	{mapLoaded: function(map) {
		var mapview = map.createLayerView("mapview", 0);
        }});
</script>

This should show the custom map. Assuming you want to add a POI marker to the map, use the code below. It adds a marker pin, and shows an interactive balloon when the marker is clicked.

<script type="text/javascript">
var map = new Whatamap(
	"apikey",
	"190bc57930a4d0e35f71e5954de390d8edbd792e",
     	{mapLoaded: function(map) {
               var mapview = map.createLayerView("mapview", 0);
               mapview.zoomMapTo(3);
               var coords = mapview.wgsToMapCoordinates(60.168, 24.949);
               var marker = mapview.addMarkerPin(coords.x, coords.y, "red", function() {
                        mapview.showBalloon(marker, "POI Title", null, null, null, function() {
                               alert("POI clicked!");
                        });
                        mapview.redraw();
                });   
        }});
</script>