cayetanobv · March 27, 2017 17:39
diff --git a/iucn-med_mapboxgl_text.html b/iucn-med_mapboxgl_text.html
 <!DOCTYPE html>
 <html>
 <head>
    <meta charset='utf-8' />
    <title>IUCN-Med StoryMaps</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.34.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.34.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
 </head>
 <body>

 <style>
    #bbox {
        display: block;
        position: absolute;
        top: 10px;
        right: 10px;
        margin: 0px auto;
        width: 160px;
        /*height: 40px;*/
        padding: 10px;
        border: none;
        border-radius: 3px;
        font-size: 12px;
        text-align: center;
        color: #fff;
        background: #747474;
    }
    
    #tocLayers {
        background: #fff;
        position: absolute;
        z-index: 1;
        top: 60px;
        right: 10px;
        border-radius: 3px;
        width: 160px;
        border: 1px solid rgba(0,0,0,0.4);
        font-family: 'Open Sans', sans-serif;
    }

    #tocLayers a {
        font-size: 13px;
        color: #404040;
        display: block;
        margin: 0;
        padding: 0;
        padding: 10px;
        text-decoration: none;
        border-bottom: 1px solid rgba(0,0,0,0.25);
        text-align: center;
    }

    #tocLayers a:last-child {
        border: none;
    }

    #tocLayers a:hover {
        background-color: #f8f8f8;
        color: #404040;
    }

    #tocLayers a.active {
        background-color: #3887be;
        color: #ffffff;
    }

    #tocLayers a.active:hover {
        background: #3074a4;
    }
 </style>

 <nav id="tocLayers"></nav>
 <div id="map"></div>
 <button id='bbox'>Go to Mediterranean Sea</button>

 <script>

 var startZoom = 4.5;
 var startBbox = [15.0, 38.0];

 var layers = [ 
  {
    'id': 'butterflies_total',
    'hidden': false,
    'subLayers': [
      'butterflies_all-species_less50',
      'butterflies_all-species_50_100',
      'butterflies_all-species_100_150',
      'butterflies_all-species_more150'
    ]
  },
  {
    'id': 'butterflies_threatened',
    'hidden': true,
    'subLayers': [
      'butterflies_threatened_1',
      'butterflies_threatened_2',
      'butterflies_threatened_3',
      'butterflies_threatened_4'
    ]
  },
  {
    'id': 'butterflies_endemic',
    'hidden': true,
    'subLayers': [
      'butterflies_endemic_less5',
      'butterflies_endemic_5_10',
      'butterflies_endemic_10_15',
      'butterflies_endemic_15_20',
      'butterflies_endemic_20_25',
      'butterflies_endemic_more25'
    ]
  }
 ];


 mapboxgl.accessToken = 'pk.xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
 var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/cayetanobv/cj0do9yow001q2smnpjsp8wtq',
    zoom: startZoom,
    center: startBbox
 });

 var nav = new mapboxgl.NavigationControl();
 map.addControl(nav, 'top-left');

 document.getElementById('bbox').addEventListener('click', function() {
    map.flyTo({
        center: startBbox,
        zoom: startZoom,
        speed: 0.6
    });
 });


 var layerHandler = function(layerGroups) {
  for (var i = 0; i < layerGroups.length; i++) {
      var id = layerGroups[i].id;
      var subLayers = layerGroups[i].subLayers;

      var link = document.createElement('a');
      link.href = '#';
      link.className = layerGroups[i].hidden ? '' : 'active';
      link.textContent = id;
      link.subLayers = subLayers;

      link.onclick = function (e) {
        for (var sl = 0; sl < this.subLayers.length; sl++) {
          var clickedLayer = this.subLayers[sl];
          e.preventDefault();
          e.stopPropagation();

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

          if (visibility === 'visible') {
              map.setLayoutProperty(clickedLayer, 'visibility', 'none');
              this.className = '';
          } else {
              this.className = 'active';
              map.setLayoutProperty(clickedLayer, 'visibility', 'visible');
          }  
        }
      };

      var layers = document.getElementById('tocLayers');
      layers.appendChild(link);
  }
 }

 layerHandler(layers);

 </script>

 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset='utf-8' />
	<title>IUCN-Med StoryMaps</title>
	<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
	<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.34.0/mapbox-gl.js'></script>
	<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.34.0/mapbox-gl.css' rel='stylesheet' />
	<style>
	body { margin:0; padding:0; }
	#map { position:absolute; top:0; bottom:0; width:100%; }
	</style>
	</head>
	<body>

	<style>
	#bbox {
	display: block;
	position: absolute;
	top: 10px;
	right: 10px;
	margin: 0px auto;
	width: 160px;
	/height: 40px;/
	padding: 10px;
	border: none;
	border-radius: 3px;
	font-size: 12px;
	text-align: center;
	color: #fff;
	background: #747474;
	}

	#tocLayers {
	background: #fff;
	position: absolute;
	z-index: 1;
	top: 60px;
	right: 10px;
	border-radius: 3px;
	width: 160px;
	border: 1px solid rgba(0,0,0,0.4);
	font-family: 'Open Sans', sans-serif;
	}

	#tocLayers a {
	font-size: 13px;
	color: #404040;
	display: block;
	margin: 0;
	padding: 0;
	padding: 10px;
	text-decoration: none;
	border-bottom: 1px solid rgba(0,0,0,0.25);
	text-align: center;
	}

	#tocLayers a:last-child {
	border: none;
	}

	#tocLayers a:hover {
	background-color: #f8f8f8;
	color: #404040;
	}

	#tocLayers a.active {
	background-color: #3887be;
	color: #ffffff;
	}

	#tocLayers a.active:hover {
	background: #3074a4;
	}
	</style>

	<nav id="tocLayers"></nav>
	<div id="map"></div>
	<button id='bbox'>Go to Mediterranean Sea</button>

	<script>

	var startZoom = 4.5;
	var startBbox = [15.0, 38.0];

	var layers = [
	{
	'id': 'butterflies_total',
	'hidden': false,
	'subLayers': [
	'butterflies_all-species_less50',
	'butterflies_all-species_50_100',
	'butterflies_all-species_100_150',
	'butterflies_all-species_more150'
	]
	},
	{
	'id': 'butterflies_threatened',
	'hidden': true,
	'subLayers': [
	'butterflies_threatened_1',
	'butterflies_threatened_2',
	'butterflies_threatened_3',
	'butterflies_threatened_4'
	]
	},
	{
	'id': 'butterflies_endemic',
	'hidden': true,
	'subLayers': [
	'butterflies_endemic_less5',
	'butterflies_endemic_5_10',
	'butterflies_endemic_10_15',
	'butterflies_endemic_15_20',
	'butterflies_endemic_20_25',
	'butterflies_endemic_more25'
	]
	}
	];


	mapboxgl.accessToken = 'pk.xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
	var map = new mapboxgl.Map({
	container: 'map',
	style: 'mapbox://styles/cayetanobv/cj0do9yow001q2smnpjsp8wtq',
	zoom: startZoom,
	center: startBbox
	});

	var nav = new mapboxgl.NavigationControl();
	map.addControl(nav, 'top-left');

	document.getElementById('bbox').addEventListener('click', function() {
	map.flyTo({
	center: startBbox,
	zoom: startZoom,
	speed: 0.6
	});
	});


	var layerHandler = function(layerGroups) {
	for (var i = 0; i < layerGroups.length; i++) {
	var id = layerGroups[i].id;
	var subLayers = layerGroups[i].subLayers;

	var link = document.createElement('a');
	link.href = '#';
	link.className = layerGroups[i].hidden ? '' : 'active';
	link.textContent = id;
	link.subLayers = subLayers;

	link.onclick = function (e) {
	for (var sl = 0; sl < this.subLayers.length; sl++) {
	var clickedLayer = this.subLayers[sl];
	e.preventDefault();
	e.stopPropagation();

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

	if (visibility === 'visible') {
	map.setLayoutProperty(clickedLayer, 'visibility', 'none');
	this.className = '';
	} else {
	this.className = 'active';
	map.setLayoutProperty(clickedLayer, 'visibility', 'visible');
	}
	}
	};

	var layers = document.getElementById('tocLayers');
	layers.appendChild(link);
	}
	}

	layerHandler(layers);

	</script>

	</body>
	</html>