Creating Vector Pyramid Layers

Vector data does not increase in size as quickly as raster data but it can become very complex. Imaging trying to put up the entire road network for the United States. Just the time to download the GeoJSON file from a server would be too long for a website. The solution is vector tiles. Vector tiles are relatively new on the web and CanvasMap has a high performance version of vector pyramids. The data is stored on a server in a similar way as rasters but in JSON files. The spatial data is also separated from the attriute data since the spatial data must be drawn quickly and the attribute data may or may not be used.

This tutorial is based on the Map of Humboldt County which includes a road layer as a vector pyramid layer.

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();

TheMainContainer.AddLayer(Layer_World);

Layer_World.SetSetting("Name","Countries");
Layer_World.SetSetting("Dataset","URL","/GISData/GoogleMercator/Pyramid/NaturalEarth_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 columns with the HTML content you'll want to show the user when they click on the layer.
3. 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
4. Convert the layer to a pyramid layer by right-clicking on the layer and selecting "Transforms: Other-> To Pyramid Layer".
5. In the dialog that appears, you can just click "OK". This will create a new "Pyramid" layer.
6. Right click on the layer and select "Save Tiles to Folder...".
7. Specify the folder for the tiles.
8. 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" 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.

var Layer_Test=new CMLayerPyramid();
Layer_Test.SetHTMLAttribute("COUNTRY");
		
Layer_Test.SetStyle({fillStyle:"Green"}); // fill the data with pale green color
		
Layer_Test.SetSetting("Layer","ZoomToBoundsOnLoad",true); 
Layer_Test.SetSetting("Dataset","URL","/GISData/GoogleMercator/Pyramid/Countries/");
		
TheMainContainer.AddLayer(Layer_Test);

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