Map with Pyramids

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.

Making a Map Resizable

Take a look at the code in the resizable map and you'll see there are some additional lines at the top to provide a projector for the map. This is because we'll be using the GoogleMercator projection for the map but we still want to be able to see coordinates in the status bar as Geographic. The following lines provide this:

	var TheProjector=new CMProjectorGoogleMaps();
	TheProjector.SetZoomLevel(18);
	TheCanvasMap.SetProjector(TheProjector);

To perform the resize, we'll use jQuery, a common JavaScript library, to attach a "resize" function to the document:

<script src="Includes/jquery-2.1.0.js"></script>

The following lines of code make the map resize. 

	$( window ).resize(function() {
		TheCanvasMap.Resize();
	});
	
	// call the resize function to setup the map for the first time
	TheCanvasMap.Resize();

Projecting Data Sets to GoogleMercator

There are a large number of services for backgrounds for your web-based maps. These are constructed as "pyramids" of "tiles" that you have seen in GoogleMaps and OpenStreetMap. These tiles are in a custom projectiion that I refer to as "GoogleMercator". To be compatible with tile layers from OpenStreetMap and other vectors, we need to be using the exact spatial reference that was created with GoogleMaps. This is not a great projection for maps but there are many tile sets out there and we'll be using them in future tutorials (some of them are really cool). For this reason, you'll need to project your data into the GoogleMaps projection. BlueSpray supports this with a custom projection engine and I don't know of another GIS application that does.

Convert several vector layers to GoogleMercator and add them to the resizable map.

To convert a layer to GoogleMercator in BlueSpray:

  • Obtain a shapefile (or other supported format) with polygons or linestrings (polylines) in the spatial reference WGS84, Geographic.
  • Load the file into BlueSpray
  • Right-click on the "Scene" and select "Transforms -> Change SRS".
  • Click on "Explore"
  • Select "GoogleMaps" from the "Projector" menu
  • Uncheck all the options under "Clipping "Settings"
  • Click "Update".
  • Click "OK"
  • Click "OK" and your data should be projected to the GoogleMaps projection.
  • Right click on the layer and select "Export to File..."
  • Save the file with a ".js" extension. This will save it as a GeoJSON formatted file.
  • Move the file to where your web page can access it.

Open Pyramids

Many publically available data sets use the OpenFormat that is compatible with OpenStreetMap. If you check the "resizable" map code, you'll see that a number of layers are added from publically available data sets. You can also add them to the "Layers" tab as the code below does:

	var Layer_World=new CMLayerPyramidOpenFormat();
	Layer_World.SetName("Stamen");
	
	TheCanvasMap.AddLayer(Layer_World);
	
	Layer_World.SetURL("http://c.tile.stamen.com/watercolor/{z}/{x}/{y}.png",TheView);

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.

Raster Pyramids

Large rasters need to be turned into "pyramids" of "tiles" to keep the performance fast. This can be done in BlueSpray by right clicking on a raster layer and selecting "Transforms (other) -> To Pyramid Layer ". This will create a pyramid of tiles in BlueSpray. Then, right-click and select "Export to File". Navigate to a folder for the pyramid files and elect "Canvas Map Folder" as the file type. Don't worry about the file name as BlueSpray will put a large number of files in the folder including "pngs" that represent the files, an "info.js" file with information on the raster, and a series of "tile" files with information on each tile. 

var Layer_World=new CMLayerPyramid();

TheCanvasMap.AddBackground(Layer_World);

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

Note that you do not need to provide the bounds as this is already defined by the tiling "info.js" file. You do need to call "AddBackground()" to add a tiled layer as a background but call "AddLayer()" if you want it to appear in the layer list.

Also note that the layer should be convered into the desired spatial reference before converting it to a pyramid.