Tutorial: Adding Raster Data

Raster Layers

You can also add individual raster files as layers in CanvasMap. This is done with the "CMLayerRaster" class.

The web only supports "PNG" and "JPG" formats and these formats do not provide georeferencing information. You'll need to specify the bounds of the raster as shown in the code below. The values can be found in BlueSpray by right clicking on a layer and selecting "Settings". Then, click on the "Extent" tab and copy and paste the extents into the appropriate lines below. The definitions for the values in the JSON bounds object are:

• XMin: Most westerly pixels in the raster or the "left" edge of the raster.
• XMax: Most easterly pixels in the raster or the "right" edge of the raster.
• YMin: Most southerly pixels in the raster or the "bottom" edge of the raster.
• YMax: Most northerly pixels in the raster or the "top" edge of the raster.

The code below will add a single raster from the NASA Visible Earth web site that is in WGS 84, Geographic. The geographic map of Africa example contains this raster.

//*****************************************************
	
var Layer_World=new CMLayerRaster();
	
Layer_World.SetSetting("Name","Blue Marble");
		
var TheBounds = 
{
	XMin: -180,
	XMax: 180,
	YMin: -90,
	YMax: 90
}
Layer_World.SetBounds(TheBounds);

TheMainContainer.AddLayer(Layer_World);

Layer_World.SetSetting("Dataset","URL","http://gsp.humboldt.edu/archive/GISData/2019/WGS84_Geographic/Rasters/world.topo.bathy.200411.3x5400x2700.jpg")
Layer_World.RequestData();

If you have large rasters, they will take a long time to download and paint in the window. When this happens, tutorial 9.1 will show you how to create a "Pyramid" of "Tiles" of raster data. These tiles download much faster and it is easy to make your own pyramids with BlueSpray.