Simplest Line

This tutorial will show you the basics of creating and positioning a simple line.

Simplest Line

Add a Raster Layer for the Base Map

As with the previous Tile Providers example, we will be good citizens and create a namespace to encapsulate our example code and keep it from polluting the global namespace (window object), but let's start with a function to add a base layer to the map to render ground features:

 var addBaseMap = function (mapName, url) {
    console.log("adding base map " + mapName + " url:" + url);
    // setup tile source
    var internetTileProvider = new AltusUnified.InternetTileProvider(mapName, url);
    // create map description
    var mapDesc = AltusUnified.VirtualMap.defaultRasterMapDesc();
    var newMap = new AltusUnified.VirtualMap(mapName, mapDesc, internetTileProvider);
    // add map to scene
    AltusUnified.scene.addMap(newMap);
    newMap.delete();
    mapDesc.delete();
    internetTileProvider.delete();
  };

As you can see, we have followed the earlier pattern of creating intermediate objects to construct the map, and then cleaning them up with delete() right afterwards.

Add a Vector Layer and Add a Line

Next, we create a vector layer, add it to the map, establish two points with geographic coordinates, choose colors and declare a style for our line, and add the line to our vector layer, cleaning up along the way.

 var addVectorLine = function() {
    var vectorMap = new AltusUnified.DynamicVectorMap("vecMap");
    vectorMap.setTesselationThreshold(4000);
    // Add map to scene
    AltusUnified.scene.addMap(vectorMap);
    vectorMap.setOrder(200);
    vectorMap.setVectorWindingOrder(AltusUnified.VectorWindingOrder.BOTH);
    // Add a line 
    var dynamicLine = new AltusUnified.DynamicLine("line1");
    var dynamicLinePoints = [
      new AltusUnified.GeographicPosition2D(35, -80),
      new AltusUnified.GeographicPosition2D(47, -122)
      // you could add more 2D positions here to create a poly-line
    ];
    pushToVector(dynamicLine.points(), dynamicLinePoints);
    var colors = [new AltusUnified.Color(0, 0, 255), new AltusUnified.Color(0, 0, 255)];
    var lineStyle = new AltusUnified.LineStyle(colors[0], 8, colors[1], 2);
    vectorMap.addDynamicLine(dynamicLine, lineStyle);
    //This is a test for a bug reported by a customer where
    //updating color was failing. Fixed in v2.0.ut.1618.g46968e5
 lineStyle.strokeColor().r = 255;
    lineStyle.strokeColor().g = 0;
    lineStyle.strokeColor().b = 0;
 vectorMap.updateLineStyle(lineStyle, 1.0);
    console.log(lineStyle.strokeColor());
    // Clean up
    deleteElements(dynamicLinePoints);
    deleteElements(colors);
    dynamicLine.delete();
    lineStyle.delete();
  }

Note that we're using a couple of utility functions to aid with the cleanup:

 var pushToVector = function(vector, array) {
    var size = array.length;
    for (var i = 0; i < size; i++) {
        vector.push_back(array[i]);
    }
  }

 var deleteElements = function(array) {
    var size = array.length;
    for (var i = 0; i < size; i++) {
        array[i].delete();
    }
    array.length = 0;
  }

Set the Position of the Camera

Finally we establish a position and orientation for our camera using a Transform.

 function setPosition(lat, lon, altitude) {
    // create position object
    var pos = new AltusUnified.GeographicPosition(lat, lon, altitude);
    // create orientation object - camera pointed like standard 2D map view
    var orientation = new AltusUnified.Orientation(0, 90, 0);
    // create default scale object
    var scale = new AltusUnified.vec3d(1, 1, 1);
    // set transfrom to scene
    var trans = new AltusUnified.Transform(pos, orientation, scale);
    AltusUnified.scene.camera().transform.set(trans);
    pos.delete();
    orientation.delete();
    scale.delete();
  }

Putting it all together

function createSimplestLineExample() {
  /*C2*/
  var addBaseMap = function (mapName, url) {
    console.log("adding base map " + mapName + " url:" + url);
    // setup tile source
    var internetTileProvider = new AltusUnified.InternetTileProvider(mapName, url);
    // create map description
    var mapDesc = AltusUnified.VirtualMap.defaultRasterMapDesc();
    var newMap = new AltusUnified.VirtualMap(mapName, mapDesc, internetTileProvider);
    // add map to scene
    AltusUnified.scene.addMap(newMap);
    newMap.delete();
    mapDesc.delete();
    internetTileProvider.delete();
  };
  /*C2*/
  /*C3*/
  var addVectorLine = function() {
    var vectorMap = new AltusUnified.DynamicVectorMap("vecMap");
    vectorMap.setTesselationThreshold(4000);
    // Add map to scene
    AltusUnified.scene.addMap(vectorMap);
    vectorMap.setOrder(200);
    vectorMap.setVectorWindingOrder(AltusUnified.VectorWindingOrder.BOTH);
    // Add a line 
    var dynamicLine = new AltusUnified.DynamicLine("line1");
    var dynamicLinePoints = [
      new AltusUnified.GeographicPosition2D(35, -80),
      new AltusUnified.GeographicPosition2D(47, -122)
      // you could add more 2D positions here to create a poly-line
    ];
    pushToVector(dynamicLine.points(), dynamicLinePoints);
    var colors = [new AltusUnified.Color(0, 0, 255), new AltusUnified.Color(0, 0, 255)];
    var lineStyle = new AltusUnified.LineStyle(colors[0], 8, colors[1], 2);
    vectorMap.addDynamicLine(dynamicLine, lineStyle);
    //This is a test for a bug reported by a customer where
    //updating color was failing. Fixed in v2.0.ut.1618.g46968e5
 lineStyle.strokeColor().r = 255;
    lineStyle.strokeColor().g = 0;
    lineStyle.strokeColor().b = 0;
 vectorMap.updateLineStyle(lineStyle, 1.0);
    console.log(lineStyle.strokeColor());
    // Clean up
    deleteElements(dynamicLinePoints);
    deleteElements(colors);
    dynamicLine.delete();
    lineStyle.delete();
  }
  /*C3*/
  /*C4*/
  var pushToVector = function(vector, array) {
    var size = array.length;
    for (var i = 0; i < size; i++) {
        vector.push_back(array[i]);
    }
  }
  /*C4*/
  /*C5*/
  var deleteElements = function(array) {
    var size = array.length;
    for (var i = 0; i < size; i++) {
        array[i].delete();
    }
    array.length = 0;
  }
  /*C5*/
  /*C6*/
  function setPosition(lat, lon, altitude) {
    // create position object
    var pos = new AltusUnified.GeographicPosition(lat, lon, altitude);
    // create orientation object - camera pointed like standard 2D map view
    var orientation = new AltusUnified.Orientation(0, 90, 0);
    // create default scale object
    var scale = new AltusUnified.vec3d(1, 1, 1);
    // set transfrom to scene
    var trans = new AltusUnified.Transform(pos, orientation, scale);
    AltusUnified.scene.camera().transform.set(trans);
    pos.delete();
    orientation.delete();
    scale.delete();
  }
  /*C6*/
  return {
    addBaseMap: addBaseMap,
    addVectorLine: addVectorLine,
    setPosition: setPosition
  }
};
function onAltusEngineReady() {
  var SimplestLineExample = createSimplestLineExample();
  var tileProviderUrl = "https://a.tiles.mapbox.com/v3/dxjacob.h43n70g0/{z}/{x}/{y}.png";
  SimplestLineExample.addBaseMap("baseMap", tileProviderUrl);
  SimplestLineExample.addVectorLine();
  //Position over US - position, orientation, and scale
  SimplestLineExample.setPosition(39.720774, -101.505561, 15000000);
};

See Demo