Styling map elements:
The map elements that were styled are: the zoom buttons, the scale bar, the coordinates box, the layer controls and the attributions. For the zoom buttons, the scale bar, the coordinates box, and the attributions, the only styling completed was changing the background colors to a light grey hex of #D3D3D3. The layer controls were given this same background hex color as well as each of the overlay layers in the layer control were given a 'legend' to distinguish which layer is represented by each symbol and style, this is displayed in the image below.
Hover styling:
The two WFS layers: Wards and Places of interest were given highlight features, so when the mouse hovers over the wards and places of interest they are highlighted accordingly.
For these layers to be highlighted as such, functions were created which would be called in the onEachFeature section in the javascript under the respective geojson code.
The functions created are as follows:
To reset the style back to what it was when the mouse moves off the said ward, a reset function was created for both layers too. Without this reset function, the layers would stay with the highlight function's style when the cursor moves off the layer.
The following are the reset functions for the wards and POIs layers respectively:
Zoom functions:
When a ward is clicked, the ward is zoomed to fit the bounds of the map.
To do this the fitBounds() method was used in the function zoomToFeature. The function is then used in the onEachFeature section under the geojson javascript code
The function zoomToFeature:
The following are the wards and POIs method to call the highlight and reset functions, respectively, as well as the zoom function for the wards layer:
Table hover and click functions:
Finally the click and hover functions for the table that link to the webmap are to zoom to the relevant catchment area and to highlight the relevant catchment area, respectively.
In order for this to be achieved, the following function highlightcatchFeature was created
This function is called to each row on the table that has a healthsite name in it as follows:
As seen in the above screenshot, the function is used for both 'onmouseover' and 'onmouseout' events with the relevant catchment area's variable name in parenthesis.
The click function to zoom to each catchment area was more challenging as using getBounds would not work when I tried. So I created a function for each catchment area layer to set the view of the map to the general coordinates of the catchment area. I also added to the function that the layer had to be on in order for the click functionality to work, so if the layer was toggled off in the layer control, it would not zoom to the layer if it were to be clicked on in the relevant row of the table. the general format of these functions were as follows:
