Working with the BA3 Altus Mapping Engine in the Browser - Part 4, displaying Mapbox tiles on the sphere

Monday, March 17th, 2014 at 1:40 pm by ba3 — Category: Demo

If you look back at Part 1 of this series, we demonstrated how to display different sets of tiles on the sphere using the Altus Mapping Engine for the browser. This line from Part 1 demonstrates how easy it is to show a set of Mapbox tiles on the sphere:

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

It is a very simple process. And this may be the first time you have ever seen Mapbox tiles on the sphere. The BA3 Altus Mapping Engine automatically reprojects the flat Mapbox tiles onto the sphere and they look beautiful.

If you would like to try your hand creating and displaying your own Mapbox tiles on the sphere, here are the steps you take:

Go here and create a map: https://www.mapbox.com
When you click “Save”, you will be asked to create a Mapbox account
Once the account is created, you will see a screen like this:
The key thing we need from this screen is the Map ID, which in this case is: “ba3-demo.hi127abc”. When you create your own Mapbox map, use your ID instead.
Look at Part 1 and add your id to the HTML code.

Your HTML code will look like this:

<!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 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","https://a.tiles.mapbox.com/v3/{YourMapboxIDGoesHere}/{z}/{x}/{y}.png");
        // setting the initial position with a animation
        mapView.setLocation3D(35.764343, -78.621597, 30000, 5);
    }
</script>
</body>
</html>

Find the place where it says, “{YourMapboxIDGoesHere}” and replace it with your new Mapbox ID. You will see your Mapbox tiles:

mapboxss

Have fun playing with your Mapbox tiles on the sphere!

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.