Skip to content

Instantly share code, notes, and snippets.

@sunnyuxuan

sunnyuxuan/index.html

Created December 18, 2017 20:45
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save sunnyuxuan/8be0bf4466fcdd0216d2b1c70380b82c to your computer and use it in GitHub Desktop.
Save sunnyuxuan/8be0bf4466fcdd0216d2b1c70380b82c to your computer and use it in GitHub Desktop.
Download ZIP
Children Absenteeism
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<title>California Children absenteeism English Learners Map</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- <link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.1.1/mapbox-gl-geocoder.css' type='text/css' /> -->
<link href='https://api.mapbox.com/mapbox-gl-js/v0.39.1/mapbox-gl.css' rel='stylesheet' />
</head>
<body>
<div class="wrapper">
<nav id="menu">
<p class="checkmenu"><i class="fa fa-filter"></i> Filter By Percentage</p>
</nav>
<div id='map' class="res-box square"></div>
<script src='https://api.mapbox.com/mapbox-gl-js/v0.39.1/mapbox-gl.js'></script>
<!--<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.1.1/mapbox-gl-geocoder.min.js'></script> -->
<script>
// color:"#42885A","#9AB42D","#F4DF30","#DB6B39","#9B2E27"
//color: #4A90E2 #7DACE2 #F5B94A #ED753A #E14735 #C94830 #942724
mapboxgl.accessToken = 'pk.eyJ1IjoiZWRzb3VyY2UiLCJhIjoiY2o3Z2hnd2UyMTlrMjJ3bzRxcmR2czJjeCJ9.5aa-LE-InamcQr9Gt_wi2Q';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/edsource/cjb5m2btv02hk2so4rlzh5shi',
center: [-119.5332, 37.39], // starting position
zoom: 6 // starting zoom
});
map.on('load', function () {
map.addLayer({
'id': 'Pct < 5.5%',
'type': 'circle',
'source': {
type: 'vector',
url: 'mapbox://edsource.cjbckx9191kch34lling21un8-8jsps'
},
'source-layer': 'EnglishLearnerMerge',
"filter": ["<","ChronicAbsenteeismRate",5.5],
paint: {
'circle-color': '#054895',
// Add data-driven styles for circle radius
'circle-radius': {
property: 'ChronicAbsenteeismCount',
type: 'exponential',
stops: [
[0, 6],
[1001, 27]
]
},
'circle-opacity': 0.7
}
},"place-city-sm");
map.addLayer({
'id': 'Pct < 10.5%',
'type': 'circle',
'source': {
type: 'vector',
url: 'mapbox://edsource.cjbckx9191kch34lling21un8-8jsps'
},
'source-layer': 'EnglishLearnerMerge',
"filter": ["all",["<","ChronicAbsenteeismRate",10.5],[">=","ChronicAbsenteeismRate",5.5]],
paint: {
'circle-color': '#7DACE2',
// Add data-driven styles for circle radius
'circle-radius': {
property: 'ChronicAbsenteeismCount',
type: 'exponential',
stops: [
[0, 6],
[1001, 27]
]
},
'circle-opacity': 0.7
}
},"place-city-sm");
map.addLayer({
'id': 'Pct < 15.5%',
'type': 'circle',
'source': {
type: 'vector',
url: 'mapbox://edsource.cjbckx9191kch34lling21un8-8jsps'
},
'source-layer': 'EnglishLearnerMerge',
"filter": ["all",["<","ChronicAbsenteeismRate",15.5],[">=","ChronicAbsenteeismRate",10.5]],
paint: {
'circle-color': '#F5B94A',
// Add data-driven styles for circle radius
'circle-radius': {
property: 'ChronicAbsenteeismCount',
type: 'exponential',
stops: [
[0, 6],
[1001, 27]
]
},
'circle-opacity': 0.7
}
},"place-city-sm");
map.addLayer({
'id': 'Pct < 20.5%',
'type': 'circle',
'source': {
type: 'vector',
url: 'mapbox://edsource.cjbckx9191kch34lling21un8-8jsps'
},
'source-layer': 'EnglishLearnerMerge',
"filter": ["all",["<","ChronicAbsenteeismRate",20.5],[">=","ChronicAbsenteeismRate",15.5]],
paint: {
'circle-color': '#ED753A',
// Add data-driven styles for circle radius
'circle-radius': {
property: 'ChronicAbsenteeismCount',
type: 'exponential',
stops: [
[0, 6],
[1001, 27]
]
},
'circle-opacity': 0.7
}
},"place-city-sm");
map.addLayer({
'id': 'Pct < 25.5%',
'type': 'circle',
'source': {
type: 'vector',
url: 'mapbox://edsource.cjbckx9191kch34lling21un8-8jsps'
},
'source-layer': 'EnglishLearnerMerge',
"filter": ["all",["<","ChronicAbsenteeismRate",25.5],[">=","ChronicAbsenteeismRate",20.5]],
paint: {
'circle-color': '#E14735',
// Add data-driven styles for circle radius
'circle-radius': {
property: 'ChronicAbsenteeismCount',
type: 'exponential',
stops: [
[0, 6],
[1001, 27]
]
},
'circle-opacity': 0.7
}
},"place-city-sm");
map.addLayer({
'id': 'Pct < 30.5%',
'type': 'circle',
'source': {
type: 'vector',
url: 'mapbox://edsource.cjbckx9191kch34lling21un8-8jsps'
},
'source-layer': 'EnglishLearnerMerge',
"filter": ["all",["<","ChronicAbsenteeismRate",30.5],[">=","ChronicAbsenteeismRate",25.5]],
paint: {
'circle-color': '#C94830',
// Add data-driven styles for circle radius
'circle-radius': {
property: 'ChronicAbsenteeismCount',
type: 'exponential',
stops: [
[0, 6],
[1001, 27]
]
},
'circle-opacity': 0.7
}
},"place-city-sm");
map.addLayer({
'id': 'Pct > 30.5%',
'type': 'circle',
'source': {
type: 'vector',
url: 'mapbox://edsource.cjbckx9191kch34lling21un8-8jsps'
},
'source-layer': 'EnglishLearnerMerge',
"filter": [">=","ChronicAbsenteeismRate",30.5],
paint: {
'circle-color': '#942724',
// Add data-driven styles for circle radius
'circle-radius': {
property: 'ChronicAbsenteeismCount',
type: 'exponential',
stops: [
[0, 6],
[1001, 27]
]
},
'circle-opacity': 0.7
}
},"place-city-sm");
// create Menu
var toggleableLayerIds = [ 'Pct < 5.5%', 'Pct < 10.5%','Pct < 15.5%','Pct < 20.5%','Pct < 25.5%', 'Pct < 30.5%','Pct > 30.5%'];
for (var i = 0; i < toggleableLayerIds.length; i++) {
var id = toggleableLayerIds[i];
var link = document.createElement('a');
link.href = '#';
link.className = 'active';
if(id=="Pct < 5.5%"){
link.id = "C1";
}else if(id=="Pct < 10.5%"){
link.id = "C2";
}else if(id=="Pct < 15.5%"){
link.id = "C3";
}else if(id=="Pct < 20.5%"){
link.id = "C4";
}else if(id=="Pct < 25.5%"){
link.id = "C5";
}else if(id=="Pct < 30.5%"){
link.id = "C6";
}else if(id=="Pct > 30.5%"){
link.id = "C7";
}
link.textContent = id;
link.onclick = function (e) {
var clickedLayer = this.textContent;
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('menu');
layers.appendChild(link);
};
// // When a click event occurs on a feature in the places layer, open a popup at the
// // location of the feature, with description HTML from its properties.
for (var j = 0; j < toggleableLayerIds.length; j++) {
var id = toggleableLayerIds[j];
map.on('click', id, function (e) {
new mapboxgl.Popup()
.setLngLat(e.features[0].geometry.coordinates)
.setHTML("<strong><span style='color:#59A1F5;font-size:15px;font-weight:200;'>"+e.features[0].properties.SchoolName+"</span></strong>"+"<br><h3 style='font-size:12px;'>Chronic Absenteeism Number: "+"<span style='color:#59A1F5; font-size:15px;font-weight:200;'>"+e.features[0].properties.ChronicAbsenteeismCount+"</span>"+"</h3>"+"<h3 style='font-size:12px;'>Percentage: "+"<span style='color:#FF5C00; font-size:15px;margin-right:24px;font-weight:200;'>"+e.features[0].properties.ChronicAbsenteeismRate+"</span>"+"</h3>")
.addTo(map);
});
// Change the cursor to a pointer when the mouse is over the places layer.
map.on('mouseenter', id, function () {
map.getCanvas().style.cursor = 'pointer';
});
// Change it back to a pointer when it leaves.
map.on('mouseleave', id, function () {
map.getCanvas().style.cursor = '';
});
};
});
// Add zoom and rotation controls to the map.
var nav = new mapboxgl.NavigationControl();
map.addControl(nav,'top-left');
// map.addControl(new MapboxGeocoder({
// accessToken: mapboxgl.accessToken
// }));
</script>
</div>
</body>
</html>
Raw
style.css
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-size: 18px;
font-family: "Inconsolata", sans-serif;
background-color: white;
}
.wrapper {
max-width: 960px;
margin: 0 auto;
}
.checkmenu{
font-size:12px;
text-align: center;
font-weight: 600;
padding:5px;
color:#59A1F5;
}
#map {
position: absolute;
top:0; bottom:0;
width: 100%;
}
.res-box.square {
content: "";
display: block;
padding-bottom: 100%;
}
#menu {
background: #fff;
position: absolute;
z-index: 1;
top:30px;
right: 30px;
border-radius: 3px;
width: 100px;
border: 1px solid rgba(0,0,0,0.4);
font-family: 'Open Sans', sans-serif;
}
#menu a {
font-size: 13px;
color: #404040;
display: block;
margin: 0;
padding: 8px;
text-decoration: none;
border-bottom: 1px solid rgba(0,0,0,0.25);
text-align: center;
}
/*color:"#42885A","#9AB42D","#F4DF30","#DB6B39","#9B2E27"*/
/*color: #4A90E2 #7DACE2 #F5B94A #ED753A #E14735 #C94830 #942724*/
#C1{
border-top:1px solid rgba(0,0,0,0.25);
}
#C1.active{
background-color: #054895;
}
#C2.active{
background-color: #7DACE2;
}
#C3.active{
background-color: #F5B94A;
}
#C4.active{
background-color: #ED753A;
}
#C5.active{
background-color: #E14735;
}
#C6.active{
background-color: #C94830;
}
#C7.active{
background-color: #942724;
}
#menu a:last-child {
border: none;
}
#menu a:hover {
background-color: #59A1F5;
color: #404040;
}
#menu a.active {
/*background-color: #3887be;*/
color: #ffffff;
}
#menu a.active:hover {
background: #59A1F5;
}
.mapboxgl-popup {
max-width: 250px;
font: 12px/20px Arial, Helvetica, sans-serif;
}
.mapboxgl-popup-content{
padding: 10px 10px 0px!important;
}
/*.mapboxgl-ctrl-top-right .mapboxgl-ctrl{
margin:10px 30px 0 0!important;
}*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment