Working with the BA3 Altus Mapping Engine in the Browser - Part 1, the simplest map

Saturday, March 15th, 2014 at 12:27 pm by ba3 — Category: Demo

BA3′s Altus Mapping Engine is a high performance, high capability engine that works in all environments: iOS, Android, Windows 8, OSX and the Browser. One big advantage of the browser version, however, is that you do not need to be a developer to play with it. Just about anyone can use the browser version of Altus to try things out. All you need is a Chrome or Firefox Browser running in Windows or OSX and a simple editor (e.g. Notepad in Windows will work).

For example, here is the HTML code for a very simple Browser map using Altus:

<!doctype html>
<html lang="en-us">
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Altus Demo</title>
</head>
<body>
<style type="text/css">
    div.Altus {
        width: 100%;
        height: 900px;
        display: block;
    }
</style>
<!--The map view-->
<div class="Altus" id="AltusDiv" />
<script type="text/javascript" src="http://dev.ba3.us/js/altus.js"></script>
<script type='text/javascript'>
    var mapView = new Altus(document.getElementById('AltusDiv'));
    // initializing the base map
    if (mapView.addInternetMap != null) {
        mapView.addInternetMap("baseMap","http://b.tile.openstreetmap.org/{z}/{x}/{y}.png");
        // setting the initial position with a animation
        mapView.setLocation3D(35.764343, -78.621597, 30000, 5);
    }
</script>
</body>
</html>

If you copy/paste this code into Notepad…

notepad-simple …and then save it on your desktop (or any folder) with the file name “Simple.html” (make sure “Save as type” is set to “All files” when you save it so that your file does not pick up an additional “.txt” extension), you can double-click on Simple.html and your map will appear in a browser.

The map opens up with the city of Raleigh, NC visible. What if you don’t like that? Find this line:

mapView.setLocation3D(35.764343, -78.621597, 30000, 5);

You can leave that line out if you like - you will be looking at the globe from a very high altitude centered over the United States. Or leave it in and change the lat/lon to pick a different location. Change the 30000 to pick a different zoom level. Try changing 30000 to 3000 or 100000 or 1000000 - try many values. Play around with it until you find a zoom level that you prefer. The 5 determines the animation duration. Try changing it as well.

This example uses the publicly available tile set from OpenStreetMap for its base map. This is the line that determines the tile set:

mapView.addInternetMap("baseMap","http://b.tile.openstreetmap.org/{z}/{x}/{y}.png");

If you don’t like it, try Mapquest satellite tiles instead. For example, try:

mapView.addInternetMap("baseMap","http://otile1.mqcdn.com/tiles/1.0.0/sat/{z}/{x}/{y}.jpg");

If you have your own Mapbox tiles, you can use those. This is how you would do it:

mapView.addInternetMap("baseMap","https://a.tiles.mapbox.com/v3/dxjacob.h43n70g0/{z}/{x}/{y}.png");

In Part 2 we will explore how to add markers to this map.

Learn More!

If you have questions about Altus products and services, the demonstration code or licensing, please contact us at: [email protected]. Also, any feedback, comments or suggestions that you have are always greatly appreciated.