Skip to content

Instantly share code, notes, and snippets.

@pg1647

pg1647/index.html

Created June 25, 2020 21:30
Show Gist options
  • Save pg1647/b62b7cb601857a8cebcb8ead331b4fc9 to your computer and use it in GitHub Desktop.
Save pg1647/b62b7cb601857a8cebcb8ead331b4fc9 to your computer and use it in GitHub Desktop.
Download ZIP
Data Vis. Summer 2020 || Lab 5 Task 1 // source https://jsbin.com/reyehud
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Data Vis. Summer 2020 || Lab 5 Task 1</title>
<script src='https://api.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.css' rel='stylesheet' />
<style id="jsbin-css">
body {
margin: 0;
padding: 0;
}
h2,
h3 {
margin: 10px;
font-size: 1.2em;
}
h3 {
font-size: 1em;
}
p {
font-size: 0.85em;
margin: 10px;
text-align: left;
}
/**
* Create a position for the map
* on the page */
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
/**
* Set rules for how the map overlays
* (information box and legend) will be displayed
* on the page. */
.map-overlay {
position: absolute;
bottom: 0;
right: 0;
background: rgba(255, 255, 255, 0.8);
margin-right: 20px;
font-family: Arial, sans-serif;
overflow: auto;
border-radius: 3px;
}
#features {
top: 0;
height: 100px;
margin-top: 20px;
width: 250px;
}
#legend {
padding: 10px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
line-height: 18px;
height: 150px;
margin-bottom: 40px;
width: 100px;
}
.legend-key {
display: inline-block;
border-radius: 20%;
width: 10px;
height: 10px;
margin-right: 5px;
}
</style>
</head>
<body>
<div id='map'></div>
<div class='map-overlay' id='features'><h2>US population density</h2><div id='pd'><p>Hover over a state!</p></div></div>
<div class='map-overlay' id='legend'></div>
<script id="jsbin-javascript">
mapboxgl.accessToken = 'pk.eyJ1IjoicGcxNjQ3IiwiYSI6ImNrYmp0Nm14MjBzZWEyd215ZnpoZmUxd2oifQ.t18TpHLX9w7Z943Tzcytjw';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/light-v10'
// style: 'mapbox://styles/pg1647/ckbpkc91n0y461is6v3s66i63' // replace this with your style URL
});
map.on('load', function() {
// the rest of the code will go in here
var layers = ['0-10', '10-20', '20-50', '50-100', '100-200', '200-500', '500-1000', '1000+'];
var colors = ['#FFEDA0', '#FED976', '#FEB24C', '#FD8D3C', '#FC4E2A', '#E31A1C', '#BD0026', '#800026'];
for (i = 0; i < layers.length; i++) {
var layer = layers[i];
var color = colors[i];
var item = document.createElement('div');
var key = document.createElement('span');
key.className = 'legend-key';
key.style.backgroundColor = color;
var value = document.createElement('span');
value.innerHTML = layer;
item.appendChild(key);
item.appendChild(value);
legend.appendChild(item);
}
map.addSource('statedata', {
type: 'geojson',
data: 'https://gist.githubusercontent.com/pg1647/d7c6a6ebe7d2b720a5ceac356ce27c64/raw/a11a620966123aa5670e4d3142a161d190ad73e6/stateData.geojson'
});
map.addLayer({
id: 'states',
source: 'statedata',
type: 'fill',
paint:{
'fill-opacity': 0.8,
'fill-outline-color': '#fff',
'fill-color': [
'step', //see: https://docs.mapbox.com/mapbox-gl-js/style-spec/expressions/#step
['get', 'density'], // see: https://docs.mapbox.com/mapbox-gl-js/style-spec/expressions/#get
colors[0],
10, colors[1],
20, colors[2],
50, colors[3],
100, colors[4],
200, colors[5],
500, colors[6],
1000, colors[7]
],
// 'fill-color': '#f00', // to try is coloring working - everything colored red
},
}),
map.on('mousemove', function(e) {
var states = map.queryRenderedFeatures(e.point, {
layers: ['states'] // same as id in map.addLayer above
});
if (states.length > 0) {
document.getElementById('pd').innerHTML = '<h3><strong>' + states[0].properties.name + '</strong></h3><p><strong><em>' + states[0].properties.density + '</strong> people per square mile</em></p>';
} else {
document.getElementById('pd').innerHTML = '<p>Hover over a state!</p>';
}
});
map.getCanvas().style.cursor = 'default';
map.fitBounds([[-133.2421875, 16.972741], [-47.63671875, 52.696361]]);
});
</script>
<script id="jsbin-source-css" type="text/css">body {
margin: 0;
padding: 0;
}
h2,
h3 {
margin: 10px;
font-size: 1.2em;
}
h3 {
font-size: 1em;
}
p {
font-size: 0.85em;
margin: 10px;
text-align: left;
}
/**
* Create a position for the map
* on the page */
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
/**
* Set rules for how the map overlays
* (information box and legend) will be displayed
* on the page. */
.map-overlay {
position: absolute;
bottom: 0;
right: 0;
background: rgba(255, 255, 255, 0.8);
margin-right: 20px;
font-family: Arial, sans-serif;
overflow: auto;
border-radius: 3px;
}
#features {
top: 0;
height: 100px;
margin-top: 20px;
width: 250px;
}
#legend {
padding: 10px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
line-height: 18px;
height: 150px;
margin-bottom: 40px;
width: 100px;
}
.legend-key {
display: inline-block;
border-radius: 20%;
width: 10px;
height: 10px;
margin-right: 5px;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">mapboxgl.accessToken = 'pk.eyJ1IjoicGcxNjQ3IiwiYSI6ImNrYmp0Nm14MjBzZWEyd215ZnpoZmUxd2oifQ.t18TpHLX9w7Z943Tzcytjw';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/light-v10'
// style: 'mapbox://styles/pg1647/ckbpkc91n0y461is6v3s66i63' // replace this with your style URL
});
map.on('load', function() {
// the rest of the code will go in here
var layers = ['0-10', '10-20', '20-50', '50-100', '100-200', '200-500', '500-1000', '1000+'];
var colors = ['#FFEDA0', '#FED976', '#FEB24C', '#FD8D3C', '#FC4E2A', '#E31A1C', '#BD0026', '#800026'];
for (i = 0; i < layers.length; i++) {
var layer = layers[i];
var color = colors[i];
var item = document.createElement('div');
var key = document.createElement('span');
key.className = 'legend-key';
key.style.backgroundColor = color;
var value = document.createElement('span');
value.innerHTML = layer;
item.appendChild(key);
item.appendChild(value);
legend.appendChild(item);
}
map.addSource('statedata', {
type: 'geojson',
data: 'https://gist.githubusercontent.com/pg1647/d7c6a6ebe7d2b720a5ceac356ce27c64/raw/a11a620966123aa5670e4d3142a161d190ad73e6/stateData.geojson'
});
map.addLayer({
id: 'states',
source: 'statedata',
type: 'fill',
paint:{
'fill-opacity': 0.8,
'fill-outline-color': '#fff',
'fill-color': [
'step', //see: https://docs.mapbox.com/mapbox-gl-js/style-spec/expressions/#step
['get', 'density'], // see: https://docs.mapbox.com/mapbox-gl-js/style-spec/expressions/#get
colors[0],
10, colors[1],
20, colors[2],
50, colors[3],
100, colors[4],
200, colors[5],
500, colors[6],
1000, colors[7]
],
// 'fill-color': '#f00', // to try is coloring working - everything colored red
},
}),
map.on('mousemove', function(e) {
var states = map.queryRenderedFeatures(e.point, {
layers: ['states'] // same as id in map.addLayer above
});
if (states.length > 0) {
document.getElementById('pd').innerHTML = '<h3><strong>' + states[0].properties.name + '</strong></h3><p><strong><em>' + states[0].properties.density + '</strong> people per square mile</em></p>';
} else {
document.getElementById('pd').innerHTML = '<p>Hover over a state!</p>';
}
});
map.getCanvas().style.cursor = 'default';
map.fitBounds([[-133.2421875, 16.972741], [-47.63671875, 52.696361]]);
});
</script></body>
</html>
Raw
jsbin.reyehud.css
body {
margin: 0;
padding: 0;
}
h2,
h3 {
margin: 10px;
font-size: 1.2em;
}
h3 {
font-size: 1em;
}
p {
font-size: 0.85em;
margin: 10px;
text-align: left;
}
/**
* Create a position for the map
* on the page */
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
/**
* Set rules for how the map overlays
* (information box and legend) will be displayed
* on the page. */
.map-overlay {
position: absolute;
bottom: 0;
right: 0;
background: rgba(255, 255, 255, 0.8);
margin-right: 20px;
font-family: Arial, sans-serif;
overflow: auto;
border-radius: 3px;
}
#features {
top: 0;
height: 100px;
margin-top: 20px;
width: 250px;
}
#legend {
padding: 10px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
line-height: 18px;
height: 150px;
margin-bottom: 40px;
width: 100px;
}
.legend-key {
display: inline-block;
border-radius: 20%;
width: 10px;
height: 10px;
margin-right: 5px;
}
Raw
jsbin.reyehud.js
mapboxgl.accessToken = 'pk.eyJ1IjoicGcxNjQ3IiwiYSI6ImNrYmp0Nm14MjBzZWEyd215ZnpoZmUxd2oifQ.t18TpHLX9w7Z943Tzcytjw';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/light-v10'
// style: 'mapbox://styles/pg1647/ckbpkc91n0y461is6v3s66i63' // replace this with your style URL
});
map.on('load', function() {
// the rest of the code will go in here
var layers = ['0-10', '10-20', '20-50', '50-100', '100-200', '200-500', '500-1000', '1000+'];
var colors = ['#FFEDA0', '#FED976', '#FEB24C', '#FD8D3C', '#FC4E2A', '#E31A1C', '#BD0026', '#800026'];
for (i = 0; i < layers.length; i++) {
var layer = layers[i];
var color = colors[i];
var item = document.createElement('div');
var key = document.createElement('span');
key.className = 'legend-key';
key.style.backgroundColor = color;
var value = document.createElement('span');
value.innerHTML = layer;
item.appendChild(key);
item.appendChild(value);
legend.appendChild(item);
}
map.addSource('statedata', {
type: 'geojson',
data: 'https://gist.githubusercontent.com/pg1647/d7c6a6ebe7d2b720a5ceac356ce27c64/raw/a11a620966123aa5670e4d3142a161d190ad73e6/stateData.geojson'
});
map.addLayer({
id: 'states',
source: 'statedata',
type: 'fill',
paint:{
'fill-opacity': 0.8,
'fill-outline-color': '#fff',
'fill-color': [
'step', //see: https://docs.mapbox.com/mapbox-gl-js/style-spec/expressions/#step
['get', 'density'], // see: https://docs.mapbox.com/mapbox-gl-js/style-spec/expressions/#get
colors[0],
10, colors[1],
20, colors[2],
50, colors[3],
100, colors[4],
200, colors[5],
500, colors[6],
1000, colors[7]
],
// 'fill-color': '#f00', // to try is coloring working - everything colored red
},
}),
map.on('mousemove', function(e) {
var states = map.queryRenderedFeatures(e.point, {
layers: ['states'] // same as id in map.addLayer above
});
if (states.length > 0) {
document.getElementById('pd').innerHTML = '<h3><strong>' + states[0].properties.name + '</strong></h3><p><strong><em>' + states[0].properties.density + '</strong> people per square mile</em></p>';
} else {
document.getElementById('pd').innerHTML = '<p>Hover over a state!</p>';
}
});
map.getCanvas().style.cursor = 'default';
map.fitBounds([[-133.2421875, 16.972741], [-47.63671875, 52.696361]]);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment