Tiles: Thunderforest.com cycling
Example #16 - Demonstration of Panning and Zooming a DynamicVectorMap with Different Loads in Altus

Try this quick demo: Hit the "3" key to add 1,000 long black lines to the map. Then try panning and zooming.
Read below for an explanation.

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.

So lets imagine you have a map and you are thinking, "I just need to add a hundred lines to this map to accomplish my goal." One way to do that in Altus is to use a DynamicVectorMap. There are advantages and disadvantages to using a DynamicVectorMap in this situation, and the purpose of this demo is to help you understand the limitations of a DynamicVectorMap in this application.

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 thousand long (country-spanning) randomly colored lines to the map
  • hit the "2" key to add one thousand short randomly colored lines to the map (Zoom in to Washington DC to find them)
  • hit the "3" key to add one thousand long black lines to the map
  • hit the "4" key to add one thousand short black lines to the map (Zoom in to Washington DC to find them)
Once you add the lines, try panning and zooming. Then add more lines and try again. You will find that there are limits with a DynamicVectorMap, especially when you add several thousand long, randomly colored lines. As you add more and more lines, the panning and zooming performance will eventually get sluggish. Here are some notes to help you get a better understanding of what is happening.
  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.

  2. Note2: 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. In our testing on a cheap laptop (1.4 Ghz i3 processor and an on-chip GPU rather than a dedicated GPU), we find that a DynamicVector map can handle perhaps 2,000 long randomly colored lines before panning performance gets sluggish, and perhaps 8,000 short black lines. If you are running a machine with an i7 processor and a dedicated GPU, you will be able to handle many more lines.

  3. Note 3: What causes the limits? 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 if you wish (see TestDynamicVectorMap2.html for a demo). 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.

  4. Note 4: The browser itself enforces memory limits. There is eventually some number of lines in a DynamicVectorMap where the browser will give up.

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

  6. Note 6: To start a new experiment, reload the page.

What if your application needs more than a thousand lines on the screen, and they are static (e.g. you want to show lot lines in a large subdivision)? The BA3 Altus mapping engine gives you three other ways to create the lines:
  • option 1
  • Option 2
  • Option 3
Maps: © Thunderforest, Data © OpenStreetMap contributors

More info:


AltusMappingEngine Web v2.0.ut.2084.g47ffcd3 master

COPYRIGHT (C) 2017, BA3, LLC ALL RIGHTS RESERVED