Working with the BA3 Altus Mapping Engine in the Browser – Part 2, adding markers

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

In Part 1, we learned how to display a base map in Altus. Here in Part 2 we will learn one way to add markers to the map.

Altus offers several different ways to add markers. Let’s look at the simplest. If you add this small piece of code to your map from Part 1 (add it right below the line that says “setLocation3D”), it will place a marker on Pullen Park in Raleigh, NC:

            //Dynamic markers
            //Add a dynamic marker map
            mapView.addDynamicMarkerMap("Markers"); //Map name
            //Add dynamic markers to the map
            mapView.addDynamicMarkerWithUrl(
                "Markers",	//Map name
                "Pullen Park", //Marker name
                -78.6638, 35.7804, //Location
                7, 35, //anchor point x, anchor point y
                "http://dev.ba3.us/downloads/pinRed.png"); //Image url

If you want to add more than one marker, try something like this:

            //Dynamic markers
            //Add a dynamic marker map
            mapView.addDynamicMarkerMap("Markers"); //Map name
            //Add dynamic markers to the map
            mapView.addDynamicMarkerWithUrl(
                "Markers", //Map name
                "Pullen Park", //Marker name
                -78.6638, 35.7804, //Location
                7, 35, //anchor point x, anchor point y
                "http://dev.ba3.us/downloads/pinRed.png"); //Image url
            mapView.addDynamicMarkerWithUrl(
                "Markers", //Map name
                "Walnut Creek Amphitheater", //Marker name
                -78.5764, 35.7495, //Location
                7, 35, //anchor point x, anchor point y
                "http://dev.ba3.us/downloads/pinRed.png"); //Image url
            mapView.addDynamicMarkerWithUrl(
                "Markers", //Map name
                "NCSU", //Marker name
                -78.6716, 35.7855, //Location
                7, 35, //anchor point x, anchor point y
                "http://dev.ba3.us/downloads/pinRed.png"); //Image url

You will see a map that looks something like this:

marker-map

For each marker that you add, you need to know the lat/lon for the marker and also supply a small image file for the marker. You can add dozens of markers like this with many different marker images if you like.

How do you find the latitude and longitude for your marker? There are many different ways, but http://www.latlong.net is one tool you might use.

You may notice one minor glitch - if you click on one of the markers, the app will stall. To detect why it stalled, in Chrome, open Tools / Javascript console. You can see an uncaught exception. The engine is expecting you to have an onDynamicMarkerTapped function defined. You can use this:

// defining a function to receive marker tap events. This must exist in some form or app stalls
var onDynamicMarkerTapped = function (mapName, markerName, screenX, screenY, markerX, markerY) {
    console.log("You tapped (or clicked) dynamic marker " + markerName +
        " on map " + mapName +
        " at screen point(" + screenX + "," + screenY + ")" +
        " at marker point (" + markerX + "," + markerY + ").");
};

Add that function to the bottom of the code, right above the last “</script>” and below the “}”. The full HTML code for the page 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 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","https://a.tiles.mapbox.com/v3/dxjacob.h43n70g0/{z}/{x}/{y}.png");
// setting the initial position with a animation
mapView.setLocation3D(35.764343, -78.621597, 30000, 5);
//Dynamic markers
//Add a dynamic marker map
mapView.addDynamicMarkerMap("Markers"); //Map name
//Add dynamic markers to the map
mapView.addDynamicMarkerWithUrl(
    "Markers", //Map name
    "Pullen Park", //Marker name
    -78.6638, 35.7804, //Location
    7, 35, //anchor point x, anchor point y
    "http://dev.ba3.us/downloads/pinRed.png"); //Image url
mapView.addDynamicMarkerWithUrl(
    "Markers", //Map name
    "Walnut Creek Ammpitheater", //Marker name
    -78.5764, 35.7495, //Location
    7, 35, //anchor point x, anchor point y
    "http://dev.ba3.us/downloads/pinRed.png"); //Image url
mapView.addDynamicMarkerWithUrl(
    "Markers", //Map name
    "NCSU", //Marker name
    -78.6716, 35.7855, //Location
    7, 35, //anchor point x, anchor point y
    "http://dev.ba3.us/downloads/pinRed.png"); //Image url
}
// define a function to receive marker tap events. This must exist in some form or app stalls
var onDynamicMarkerTapped = function (mapName, markerName, screenX, screenY, markerX, markerY) {
console.log("You tapped (or clicked) dynamic marker " + markerName +
    " on map " + mapName +
    " at screen point(" + screenX + "," + screenY + ")" +
    " at marker point (" + markerX + "," + markerY + ").");
};
</script>
</body>
</html>

In Part 3 we will look at more complex marker images.

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.