CanvasMap
Getting Started Tutorials 3D Reference

OpenStreetMap Tiles

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.

Open Pyramids

Many publically available tile sets use the OpenFormat that is compatible with OpenStreetMap. If you check the background layers in the Resizeable Map example, 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 CMLayerDataset();
Layer_World.SetSetting("Name","Stamen");

TheMainContainer.AddLayer(Layer_World);
Layer_World.SetSetting("Dataset","Format",CMDataset.PYRAMID_OPEN_FORMAT);
Layer_World.SetSetting("Dataset","URL","https://c.tile.stamen.com/watercolor/{z}/{x}/{y}.png");

You can also add these layers to the background for the map and then let the user select which background they want to see. The "Resizable Map" example is an example of this. To add a layer as a background:

var Layer_World=new CMLayerDataset();
Layer_World.SetSetting("Name","Stamen");

TheMainContainer.AddBackground(Layer_World);
Layer_World.SetSetting("Dataset","Format",CMDataset.PYRAMID_OPEN_FORMAT);
Layer_World.SetSetting("Dataset","URL","https://c.tile.stamen.com/watercolor/{z}/{x}/{y}.png");

There are a large number of these layers available and a large list is available at the Leaflet web site. There is some variety in the format of the URL for these data sets but CanvasMap should support all of them. You will need to replace "{s}" with a server identifiier, typically a letter (e.g. "a","b", "c").

Standard Backgrounds

To make it easy to add some of the standard backgrounds that are available on the web, we have provided a file "/Archive/CMStandardBackgrounds.js" to include and a function to add them to your maps. 

<script src="https://gsp.humboldt.edu/Archive/CMStandardBackgrounds.js"></script>
...
TheMainContainer.AddBackgrounds(CMStandardBackgrounds,0);

Adding Metadata

Because we are adding data from other sources, we should add Metadata to credit the copyright owners. This can be done by setting the CMLayer "Metadata" setting. The metadata will then be available in the menu for the layer.