mejackreed · September 26, 2018 21:45
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
    <meta charset='utf-8' />
    <title>Add a WMS source</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.46.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.46.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
        #menu { position: absolute; top:0; right: 200px; background-color: white;}
    </style>
 </head>
 <body>

  <div id='map'></div>
  <div id='menu'></div>
 <script>
 mapboxgl.accessToken = 'pk.eyJ1IjoibWVqYWNrcmVlZCIsImEiOiJLSUo2a0pZIn0.uo-4b21vBKQ5A24_AaHFUg';
 var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/light-v9',
    zoom: 13,
    center: [-0.09,51.505]
 });

 var layers = [];
 var druids = ['tn694kr3170', 'qd063cv4658', 'hm431vy8357'];

 druids.forEach(function(value) {
  var radio = document.createElement('input');
  var label = document.createElement('label');
  radio.type = 'radio';
  radio.name = 'layer';
  radio.value = value;

  radio.onchange = function(e) {
    e.preventDefault();
    e.stopPropagation();

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

    druids.forEach(function(druid) {
      map.setLayoutProperty(druid, 'visibility', 'none');
    });
    
    map.setLayoutProperty(value, 'visibility', 'visible');

  }
  
  label.appendChild(radio);
  label.appendChild(document.createTextNode(value));
  var menu = document.getElementById('menu');
  menu.appendChild(label);

 });

 map.on('load', function() {
  druids.forEach(function(value) {
    map.addLayer({
      'id': value,
      'type': 'raster',
      'source': {
          'type': 'raster',
          'tiles': [
            'https://geowebservices.stanford.edu/geoserver/druid/wms?service=WMS&version=1.1.0&request=GetMap&bbox={bbox-epsg-3857}&layers=druid:' + value + '&styles=&width=512&height=512&srs=EPSG:900913&format=image/png&transparent=true&tiled=true'
          ],
          'tileSize': 256
      },
      'layout': {
        'visibility': 'none'
      },
      'paint': {'raster-fade-duration': 0}
    });
  });
 });
 </script>

 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset='utf-8' />
	<title>Add a WMS source</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.46.0/mapbox-gl.js'></script>
	<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.46.0/mapbox-gl.css' rel='stylesheet' />
	<style>
	body { margin:0; padding:0; }
	#map { position:absolute; top:0; bottom:0; width:100%; }
	#menu { position: absolute; top:0; right: 200px; background-color: white;}
	</style>
	</head>
	<body>

	<div id='map'></div>
	<div id='menu'></div>
	<script>
	mapboxgl.accessToken = 'pk.eyJ1IjoibWVqYWNrcmVlZCIsImEiOiJLSUo2a0pZIn0.uo-4b21vBKQ5A24_AaHFUg';
	var map = new mapboxgl.Map({
	container: 'map',
	style: 'mapbox://styles/mapbox/light-v9',
	zoom: 13,
	center: [-0.09,51.505]
	});

	var layers = [];
	var druids = ['tn694kr3170', 'qd063cv4658', 'hm431vy8357'];

	druids.forEach(function(value) {
	var radio = document.createElement('input');
	var label = document.createElement('label');
	radio.type = 'radio';
	radio.name = 'layer';
	radio.value = value;

	radio.onchange = function(e) {
	e.preventDefault();
	e.stopPropagation();

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

	druids.forEach(function(druid) {
	map.setLayoutProperty(druid, 'visibility', 'none');
	});

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

	}

	label.appendChild(radio);
	label.appendChild(document.createTextNode(value));
	var menu = document.getElementById('menu');
	menu.appendChild(label);

	});

	map.on('load', function() {
	druids.forEach(function(value) {
	map.addLayer({
	'id': value,
	'type': 'raster',
	'source': {
	'type': 'raster',
	'tiles': [
	'https://geowebservices.stanford.edu/geoserver/druid/wms?service=WMS&version=1.1.0&request=GetMap&bbox={bbox-epsg-3857}&layers=druid:' + value + '&styles=&width=512&height=512&srs=EPSG:900913&format=image/png&transparent=true&tiled=true'
	],
	'tileSize': 256
	},
	'layout': {
	'visibility': 'none'
	},
	'paint': {'raster-fade-duration': 0}
	});
	});
	});
	</script>

	</body>
	</html>