<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Major Civil War Battles</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.css' rel='stylesheet' />
<style>
body {
margin: 0;
padding: 0;
font-family: 'Helvetica Neue', Helvetica, Arial, Sans-serif;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
h1 {
font-size: 20px;
line-height: 30px;
}
h2 {
font-size: 14px;
line-height: 20px;
margin-bottom: 10px;
}
a {
text-decoration: none;
color: #2dc4b2;
}
#console {
position: absolute;
width: 240px;
margin: 10px;
padding: 10px 20px;
background-color: white;
}
</style>
</head>
<body>
<div id='map'></div>
<div id='console'>
<h1>Major Battles of The Civil War (1861-1865)</h1>
<p></p>
<div class='session' id='sliderbar'>
<h2>Year: <label id='active-year'>1861</label></h2>
<input id='slider' class='row' type='range' min='1861' max='1865' step='1' value='1861' />
</div>
</div>
</body>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiY2dyb3RoIiwiYSI6ImNqZzlramN2Mzh0c3Uyd252cWxzYnF3c2UifQ.5lpaHuwMqJ5EsTARqW5kHg';
var map = new mapboxgl.Map({
container: 'map', // container element id
//mapbox://styles/mapbox/light-v9
//mapbox://styles/cgroth/cjgl5x6c400002qnkl94ab1yc
style: 'mapbox://styles/cgroth/cjgl5x6c400002qnkl94ab1yc',
center: [-77.04, 38.907],
zoom: 5
});
map.on('load', function() {
map.addLayer({
id: 'battledata',
type: 'circle',
source: {
type: 'geojson',
data: './CWGG.geojson' // replace this with the url of your own geojson
},
paint: {
'circle-radius': [
'interpolate',
['linear'],
['number', ['get', 'TotalCasualties']],
1, 2,
51000, 40
],
'circle-color':'#AA5E79',
'circle-opacity': 0.8
}
}, 'admin-2-boundaries-dispute');
document.getElementById('slider').addEventListener('input', function(e) {
var year = parseInt(e.target.value);
// update the map
map.setFilter('battledata', ['==', ['number', ['get', 'Year']], year]);
// update text in the UI
document.getElementById('active-year').innerText = year
});
});
</script>