FOSS4G SotM Oceania

5. Add INTERACTIVE BUTTONS

Part 5: Add Interactive Buttons

Take a look at the code in this example, particularly the 'visibility' and menu items. We have used this code to inspire the following functionality to create buttons to turn on and off our layers to filter the data. This results in four buttons like so:

First in the body under the map div add

 <nav id='button'></nav>

For this exercise I have created a function to demonstrate custom functions and to keep the code separate:

function createButtons(name, colour){

  var link = document.createElement('a');

  link.href = '#';

  link.className = 'active';

  link.textContent = name;

  link.style.backgroundColor = colour;

  link.onclick = function(e) {

    var clickedLayer = this.textContent;

    e.preventDefault();

    e.stopPropagation();

    var visibility = map.getLayoutProperty(clickedLayer, 'visibility');

    // make layer visible / not visible when clicked.

    // ** hard coded to combine the currentbuildings with completed buildings **

    if (clickedLayer == "COMPLETED" && visibility === 'visible')

      map.setLayoutProperty(clickedLayer, 'visibility', 'none');

      map.setLayoutProperty('currentbuildings', 'visibility', 'none');

      this.className = '';

    else if (visibility === 'visible') {

      map.setLayoutProperty(clickedLayer, 'visibility', 'none');

      this.className = '';

    else if (clickedLayer == "COMPLETED")

      map.setLayoutProperty(clickedLayer, 'visibility', 'visible');

      map.setLayoutProperty('currentbuildings', 'visibility', 'visible');

      this.className = 'active';

    else {

      this.className = 'active';

      map.setLayoutProperty(clickedLayer, 'visibility', 'visible');

};

  var layers = document.getElementById('button');

  layers.appendChild(link);

}; // end createButtons function

Before the end of the for loop add in the following to call the function:

createButtons(statusName, statusColor);

Finally we need some additional content in our .css file for positioning and colouring our 'buttons' and changing the interaction upon hover over and when activated check the content of this css file for reference.

Not working? Check the full html file.

Google Sites

Report abuse