Crearting Vector Pyramid Layers

As the size and complexity of your data increases, your maps will begin to slow down. The solution for this is to load the map as "tiles". The tiles are arranged in "steps" from a few top tiles which represent the entire area of the layer at low resolution to a bottom step that can include thousands of tiles representing the highest resolution for the data.

This tutorial starts with a resizeable map.

Vector Pyramids

Vector layers can also slow down a web solution if they are too complicated. Vector layers of small areas, such as islands, can be displayed with GeoJSON but large layers such as a countries of the world layer, need to be converted into a Pyramid of tiles. This can be done for vector layers in exactly the same way as rasters except the "To Pyramid Layer" is in the "Transforms" menu. 

var Layer_World=new CMLayerPyramid();

TheCanvasMap.AddLayer(Layer_World);

Layer_World.SetURL("/GISData/GoogleMercator/Pyramid/NaturalEarth_Countries/",TheCanvasMap.GetView()); 
Layer_World.SetName("Countries");

A sample pyramid folder is available for the Natural Earth Countries data set.

To create vector pyramids In BlueSpray:

  1. In BlueSpray, load a shapefile or other vector layer.
  2. Prepare an attribute column with the HTML content you'll want to show the user when they click on the layer.
  3. It is recommended that you remove as many of the other attributes as possible as they will slow down loading the intial layer. The tiles themselves do not include the attributes so this will not include tile load time.
  4. Project the layer to the desired spatial reference by right clicking on the Scene and selecting "Transforms -> Change SRS". For GoogleMaps spatial reference:
    1. Click on the "Explorer" button.
    2. From the "Projector" popup, select "GoogleMaps Projector"
    3. Uncheck all the "Allow" check boxes
    4. Click "Update" to make sure the entire range of the projection is displayed
    5. Click "OK" and then "OK" again
  5. Convert the layer to a pyramid layer by right-clicking on the layer and selecting "Transforms -> To Pyramid Layer".
  6. In the dialog that appears, you can just click "OK". This will create a new "Pyramid" layer.
  7. Right click on the layer and select "Export To File".
  8. Select "Canvas Map Folder" from the "Files of Type" popup and navigate to a folder for the tiles.
  9. The "File name" is actually ignored as BlueSpray will generate a number of files that have pre-defined names that CanvasMap will recognize.
  10. WHen you click "OK" BlueSpray will begin creating tiles.

In your HTML Page, you can now add a "CMLayerPyramid" layer as you would any other layer and just set the "URL" in the "SetURL()" function to point to the folder with the tiles. Make sure to include a forward slash at the end of the URL so CanvasMap knows you are specifying a folder instead of a file.

The code below loads a country layer that has been converted to a pyramid. 

var Layer_Test=new CMLayerPyramid();
Layer_Test.SetHTMLAttribute("COUNTRY");
		
Layer_Test.SetStyle({fillStyle:"Green"}); // fill the data with pale green color
		
Layer_Test.SetURL("/GISData/GoogleMercator/Pyramid/Countries/",TheCanvasMap.GetView(),true);
		
TheCanvasMap.AddLayer(Layer_Test);

Historical Note: this approach was first introduced by "TopoZone" for serving up the topographic maps for the United States.