Playing with Layer controls...

A layer control is one of the fundamental elements of any web-map and implementing the layer control in this project has been one of the major components. The layer control in our web-map is vital to the platform functionality and as such, there have been numerous challenges that we had to overcome.

The layer control needs to have support for the hard-coded layers, the WMS and the WFS layers. The first major hurdle we had was before demo 1 was to get the WFS layers to show in the layer control.

When initializing the layer control, we use the following lines of code:

var LC = L.control.layers(baseMaps,overlayMaps);
LC.addTo(map);

However, this brought about an issue with our layer control either not showing at all, or showing, however without the WFS layers. After numerous Google searches and page refreshes, we decided to seek help from Dr Rautenbach.

It turns out, the issue lies in the AJAX function of the WFS layers! The AJAX function runs asynchronously to all the JavaScript code and therefore when the Layer Control is initialized and the AJAX functions have not yet run, an error is created as the WFS layers do not yet exist.

To overcome this, when the layer control was initialized, the overlayMaps parameter was left null as follows:

var LC = L.control.layers(baseMaps,null,{collapsed:false});
LC.addTo(map);

Finally, in the AJAX functions, we included code to add the WFS layer to the map, and then to the layer control. This means that the layer was only added to the control after the AJAX function had run and the layer exists, thus avoiding all of the previously mentioned issues.

The other hurdle we faced with the layer control was the creation of the tree structure for the healthsite catchment areas. Fortunately, this was easily overcome through the documentation in a GitHub repository found at https://github.com/jjimenezshaw/Leaflet.Control.Layers.Tree. By following the step-by-step instructions, we were able to implement the tree structure with almost no issues.