Tiles: Thunderforest.com cycling
Example #15 - Demonstration of Moving Lines in a DynamicVectorMap in Altus

Try this quick demo, then read the explanation below: Hit the "2" key to create 10 random lines, then hold down the "e" key to move them east.
See below to understand what is happening.

In Altus there are several different ways to create a layer of lines that overlay your base map. A DynamicVectorMap is one way to do it. A DynamicVectorMap is used in the special situation where you plan for the lines to move or otherwise change frequently. For example, you would use a DynamicVectorMap if you wanted to create the notion of "rubber-banding" a line in your app. Or if you wanted to use a line to show the changing flight path of a plane whenever its heading changes, a DynamicVectorMap is the tool to use.

This page helps you get a feel for the performance of a DynamicVectorMap. Performance depends on at least four different factors:

  • The number of lines in the DynamicVectorMap layer
  • The number of styles those lines incorporate. If all lines have a single style (color, width, etc.), performance will be better than if every line has a different style.
  • The tesselation threshold used to subdivide long lines.
  • The performance of the machine running the app. If you are running on a cheap laptop with a i3 processor and no external GPU, performance will be very different from a beefy destop machine with an i7 processor and Nvidia Titan.
A quick explanation of the tesselation threshold. Let's say you create a line in Altus from San Francisco to New York. That line will need to be subdivided in some way to accomodate the curvature of the earth. If you tell the engine to subdivide every kilometer, the performance will be different than if you subdivide every 10 kilometers or every 100 kilometers. If the line is 4,000 kilometers long, and you subdivide it every kilometer, the single line turns into 4,000 sub-lines that the engine has to render. If, on the other hand, you subdivide every 100 kilometers, there are only 40 sub-lines. In this demo, the tesselation distance is set to 200 kilometers (200,000 meters).

Here is what you can try in this demo:

  • hit the "1" key to add one long (country-spanning) black line to the map
  • hit the "2" key to add ten long (country-spanning) black lines to the map
  • hit the "3" key to add one long (country-spanning) randomly colored line to the map
  • hit the "4" key to add ten long (country-spanning) randomly colored lines to the map
  • hit the "5" key to add one short black line to the map (Zoom in on Washington DC to find them)
  • hit the "6" key to add ten short black lines to the map (Zoom in on Washington DC to find them)
  • hit the "7" key to add one short randomly colored line to the map (Zoom in on Washington DC to find them)
  • hit the "8" key to add ten short randomly colored lines to the map (Zoom in on Washington DC to find them)
  • hit the "n" key to move all of the lines north
  • hit the "s" key to move all of the lines south
  • hit the "e" key to move all of the lines east
  • hit the "w" key to move all of the lines west
  • hit the "c" key to clear all of the lines and start over
As an example, start the app and hit the "2" key. Ten long, random, black lines will be added to the map. Then press and hold the "e" key to move the lines east. Notice that Altus can handle this no problem. Here are a few notes to give you more context:
  1. Note 1: the "short" lines are all drawn in a small region around Washington DC. Zoom into DC to find them. The idea with the short lines is to create lines which will encounter much less of a tesselation penalty than the long lines. Performance will be better with only short lines on the screen. Performance will be best if only short lines of a single color are on the screen.

  2. Note 2: Each time you move the lines, the DynamicVectorMap layer is cleared and all of the lines are added again (with altered lat/lon) to show the movement (The API also allows you to delete individual lines and re-add them, but this is not shown in the demo).

  3. Note 3: If you hold one of the movement keys (n, s, e, w) down, you are moving the lines at a rate of X times per second, with X depending on how fast your keyboard repeat rate is set to.

  4. Note 4: The nature of a DynamicVectorMap is that every line in the layer, planet wide, is redrawn every frame. This allows for every line in the layer to be completely dynamic, but by its nature a DynamicVectorMap layer consumes computer resources in direct relation to the number of lines in the layer, ragardless of how far you zoom in or out.

  5. Note 5: A DynamicVectorMap can handle 2D lines, 3D lines, 2D polygons, 3D polygons, as well as 2D/2D polylines.

  6. Note 6: You will notice that it takes two commands to clear the DynamicVectorMap. The clearCache function clears the DynamicVectorMap on the CPU side, while the rebuildMapUsingCachedShapes function clears it on the GPU side. Whenever changing a line, you should also call rebuildMapUsingCachedShapes to flush the change over to the GPU side.

On just about any machine - even the lowliest laptop - you will find that the Altus mapping engine can easily handle dozens of lines in a DynamicVectorMap. If the lines are short and have a single style (e.g. they are all short black lines), hundreds are possible and movement will still be fluid. If you are running on a beefy desktop machine or a gaming laptop, the number can easily range into the thousands.

After you add some lines, try panning and zooming. Panning and zooming performance will be excellent even with 1,000 long, random lines on the screen.

Maps: © Thunderforest, Data © OpenStreetMap contributors

More info:

AltusMappingEngine Web v2.0.ut.2153.g60764257e master