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>
<div id='map'></div>
<div id='infoWindow'>
</div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiYWp6ZWlnZXJ0IiwiYSI6IldLdVhKN1UifQ.43CCALwNLBzVybtPFvcaJQ';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v9',
center: [-121.3, 44.05],
zoom: 10,
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>
fails.geojson
{
"type": "FeatureCollection",
"generator": "overpass-turbo",
"copyright": "The data included in this document is from www.openstreetmap.org. The data is made available under ODbL.",
"timestamp": "2016-06-10T16:53:02Z",
"features": [
{
"type": "Feature",
"id": "node/914192223",
"properties": {
"@id": "node/914192223",
"amenity": "bar",
"name": "Corey's Bar & Grill"
},
"geometry": {
"type": "Point",
"coordinates": [
-121.3124716,
44.0584738
]
}
},
{
"type": "Feature",
"id": "node/914192224",
"properties": {
"@id": "node/914192224",
"amenity": "bar",
"name": "D & D Bar & Grill"
},
"geometry": {
"type": "Point",
"coordinates": [
-121.3128142,
44.0587564
]
}
},
{
"type": "Feature",
"id": "node/3818155902",
"properties": {
"@id": "node/3818155902",
"amenity": "bar",
"name": "JC's Bar & Grill"
},
"geometry": {
"type": "Point",
"coordinates": [
-121.3146299,
44.0579414
]
}
},
{
"type": "Feature",
"id": "node/3818155903",
"properties": {
"@id": "node/3818155903",
"amenity": "bar",
"name": "Wall Street Bar & Grill"
},
"geometry": {
"type": "Point",
"coordinates": [
-121.3143309,
44.0594342
]
}
},
{
"type": "Feature",
"id": "node/3818155904",
"properties": {
"@id": "node/3818155904",
"amenity": "bar",
"name": "West Side Tavern"
},
"geometry": {
"type": "Point",
"coordinates": [
-121.3262063,
44.0567737
]
}
},
{
"type": "Feature",
"id": "node/3818155905",
"properties": {
"@id": "node/3818155905",
"amenity": "bar",
"name": "Cascade West Grub & Alehouse"
},
"geometry": {
"type": "Point",
"coordinates": [
-121.3315936,
44.0504476
]
}
},
{
"type": "Feature",
"id": "node/3818155906",
"properties": {
"@id": "node/3818155906",
"amenity": "bar",
"name": "Sidelines Sportsbar & Grill"
},
"geometry": {
"type": "Point",
"coordinates": [
-121.3128972,
44.0599272
]
}
},
{
"type": "Feature",
"id": "node/3818155907",
"properties": {
"@id": "node/3818155907",
"amenity": "bar",
"name": "Maverick's Country Bar and Grill"
},
"geometry": {
"type": "Point",
"coordinates": [
-121.2949653,
44.0850845
]
}
},
{
"type": "Feature",
"id": "node/3818155908",
"properties": {
"@id": "node/3818155908",
"amenity": "bar",
"name": "Northside Bar & Grill"
},
"geometry": {
"type": "Point",
"coordinates": [
-121.2948017,
44.0830364
]
}
},
{
"type": "Feature",
"id": "node/3818155909",
"properties": {
"@id": "node/3818155909",
"amenity": "bar",
"name": "Mountain's Edge"
},
"geometry": {
"type": "Point",
"coordinates": [
-121.3146339,
44.026817
]
}
},
{
"type": "Feature",
"id": "node/3818155910",
"properties": {
"@id": "node/3818155910",
"amenity": "bar",
"name": "Southside Pub"
},
"geometry": {
"type": "Point",
"coordinates": [
-121.3154923,
44.0208507
]
}
},
{
"type": "Feature",
"id": "node/3818155911",
"properties": {
"@id": "node/3818155911",
"amenity": "bar",
"name": "Timber's Bar & Grill"
},
"geometry": {
"type": "Point",
"coordinates": [
-121.2661155,
44.0534828
]
}
},
{
"type": "Feature",
"id": "node/3818155912",
"properties": {
"@id": "node/3818155912",
"amenity": "bar",
"name": "Third Street Pub"
},
"geometry": {
"type": "Point",
"coordinates": [
-121.3023387,
44.0472238
]
}
},
{
"type": "Feature",
"id": "node/3818155913",
"properties": {
"@id": "node/3818155913",
"amenity": "bar",
"name": "Bamboo Room"
},
"geometry": {
"type": "Point",
"coordinates": [
-121.3020168,
44.04449
]
}
},
{
"type": "Feature",
"id": "node/3818155914",
"properties": {
"@id": "node/3818155914",
"amenity": "bar",
"name": "Kelly D's Sportsbar & Grill"
},
"geometry": {
"type": "Point",
"coordinates": [
-121.3025479,
44.0405067
]
}
},
{
"type": "Feature",
"id": "node/4234710018",
"properties": {
"@id": "node/4234710018",
"amenity": "bar",
"name": "Reed Pub Company"
},
"geometry": {
"type": "Point",
"coordinates": [
-121.2918967,
44.0374485
]
}
}
]
}