ajzeigert/fails.geojson

## fails.geojson

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              fails.geojson
            
          
      Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## index.html
<!DOCTYPE html>
<html lang='en'>
	<head>
	    <meta charset='utf-8' />
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Mapbox GL JS class demo</title>
	    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.21.0/mapbox-gl.js'></script>
	    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.21.0/mapbox-gl.css' rel='stylesheet' />
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY" crossorigin="anonymous">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js" integrity="sha384-ux8v3A6CPtOTqOzMKiuo3d/DomGaaClxFYdCu2HPMBEkf6x2xiDyJ7gkXU0MWwaD" crossorigin="anonymous"></script>
		<style>
	        body { margin:0; padding:0; }

			#map { position:absolute; top:0; bottom:0; width:100%; }

			#infoWindow {
				position: absolute;
				right: 10px;
				top: 10px;
			}

	    </style>
	</head>
	<body>

	<!-- The magic map div -->
	<div id='map'></div>

	<!-- The magic info div -->
	<div id='infoWindow'>
	</div>

	<script>

	// ajzeigert key
	mapboxgl.accessToken = 'pk.eyJ1IjoiYWp6ZWlnZXJ0IiwiYSI6IldLdVhKN1UifQ.43CCALwNLBzVybtPFvcaJQ';

	var map = new mapboxgl.Map({
	    container: 'map', // container id
	    style: 'mapbox://styles/mapbox/light-v9', //stylesheet location
	    center: [-121.3, 44.05], // starting position
	    zoom: 10, // starting zoom
		hash: true
	});

	map.on('load', function(){
		map.addSource('fails', {
			'type': 'geojson',
			'data': 'fails.geojson'
		});
		map.addLayer({
			'id': 'fails',
			'source': 'fails',
			'type': 'circle',
			'paint': {
				'circle-radius': 10,
				'circle-color': '#7aa0b4',
			},
			'paint.foo': {
				'circle-radius': 20,
				'circle-color': '#d9b410'
			}
		});
		var button = document.createElement('button');
		button.classList.add('btn', 'btn-info', 'pull-right');
		button.setAttribute('type', 'button');
		button.innerHTML = 'Add foo class';
		button.addEventListener('click', function(e){
			if (map.hasClass('foo') === false ) {
				map.addClass('foo');
				this.innerHTML = 'Remove foo class';
			} else {
				map.removeClass('foo');
				this.innerHTML = 'Add foo class';
			}
		});
		var overlay = document.getElementById('infoWindow');
		overlay.appendChild(button);
	})

	</script>

	</body>
</html>
	<!DOCTYPE html>
	<html lang='en'>
	<head>
	<meta charset='utf-8' />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Mapbox GL JS class demo</title>
	<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.21.0/mapbox-gl.js'></script>
	<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.21.0/mapbox-gl.css' rel='stylesheet' />
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY" crossorigin="anonymous">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js" integrity="sha384-ux8v3A6CPtOTqOzMKiuo3d/DomGaaClxFYdCu2HPMBEkf6x2xiDyJ7gkXU0MWwaD" crossorigin="anonymous"></script>
	<style>
	body { margin:0; padding:0; }

	#map { position:absolute; top:0; bottom:0; width:100%; }

	#infoWindow {
	position: absolute;
	right: 10px;
	top: 10px;
	}

	</style>
	</head>
	<body>

	<!-- The magic map div -->
	<div id='map'></div>

	<!-- The magic info div -->
	<div id='infoWindow'>
	</div>

	<script>

	// ajzeigert key
	mapboxgl.accessToken = 'pk.eyJ1IjoiYWp6ZWlnZXJ0IiwiYSI6IldLdVhKN1UifQ.43CCALwNLBzVybtPFvcaJQ';

	var map = new mapboxgl.Map({
	container: 'map', // container id
	style: 'mapbox://styles/mapbox/light-v9', //stylesheet location
	center: [-121.3, 44.05], // starting position
	zoom: 10, // starting zoom
	hash: true
	});

	map.on('load', function(){
	map.addSource('fails', {
	'type': 'geojson',
	'data': 'fails.geojson'
	});
	map.addLayer({
	'id': 'fails',
	'source': 'fails',
	'type': 'circle',
	'paint': {
	'circle-radius': 10,
	'circle-color': '#7aa0b4',
	},
	'paint.foo': {
	'circle-radius': 20,
	'circle-color': '#d9b410'
	}
	});
	var button = document.createElement('button');
	button.classList.add('btn', 'btn-info', 'pull-right');
	button.setAttribute('type', 'button');
	button.innerHTML = 'Add foo class';
	button.addEventListener('click', function(e){
	if (map.hasClass('foo') === false ) {
	map.addClass('foo');
	this.innerHTML = 'Remove foo class';
	} else {
	map.removeClass('foo');
	this.innerHTML = 'Add foo class';
	}
	});
	var overlay = document.getElementById('infoWindow');
	overlay.appendChild(button);
	})

	</script>

	</body>
	</html>