Layers On Layers

The Africa example uses a trick to create shadows around the continents and between the countries in Africa. This is by adding multiple layers that use the same data set. The example starts with a shadow and then adds a country layer with a fill on top. Then, another country layer is added without a fill but with a stroke and shadow.

The code below uses a continent layer to create a shadow that goes around all the countries and then adds the country layer with the filled style on top. The Africa example then adds another layer with a shadow just for the country that is selected.

//*********************************************************************************
// add the continent layer to give the continents a shadow
var TheContintentLayer=new CMLayerDataset();

TheContintentLayer.SetSetting("Style","fillStyle","rgba(220,220,255,1)");
TheContintentLayer.SetSetting("Style","stokeStyle","rgba(0,0,0,0)"); // make the stroke invisible
TheContintentLayer.SetSetting("Style","shadowBlur",5);
TheContintentLayer.SetSetting("Style","shadowColor","rgb(0,0,255)");

TheMainContainer.AddLayer(TheContintentLayer);

TheContintentLayer.SetSetting("Dataset","URL","GISData/Continents_110m.js");
TheContintentLayer.RequestData();

//*********************************************************************************
// Add the country layer as a filled layer
TheFilledCountryLayer=new CMLayerDataset();

TheFilledCountryLayer.SetSetting("Style","stokeStyle","rgba(0,0,0,1)");
TheFilledCountryLayer.SetSetting("Style","fillStyle","rgba(255,255,255,1)");
TheFilledCountryLayer.SetSetting("Style","lineWidth",0.1);
TheFilledCountryLayer.SetSettingGroup("Style",{

TheMainContainer.AddLayer(TheFilledCountryLayer);

TheFilledCountryLayer.SetSetting("Dataset","URL","GISData/Geographic_Countries_PopData_100m.js");
TheFilledCountryLayer.RequestData();

This approach allows you to create very complex maps without slowing your maps down as layers CanvasMap will share data that is from the same URL.