Skip to content

Commit

Permalink
Publish a new revision
Browse files Browse the repository at this point in the history
  • Loading branch information
@netoarmando
netoarmando committed Jul 18, 2024
1 parent ceccdd6 commit 19fb678
Show file tree
Hide file tree
Showing 3 changed files with 222 additions and 1 deletion.
2 changes: 1 addition & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html>
<head>
<meta charset="utf-8">
<title>Annual CO₂ emissions, 2022 - Mapping Lab</title>
<title>v0 Annual CO₂ emissions, 2022 - Mapping Lab</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link rel="preconnect" href="https://rsms.me/">
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
Expand Down
144 changes: 144 additions & 0 deletions v1/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,144 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v1 Annual CO₂ emissions, 2022 - Mapping Lab</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link rel="preconnect" href="https://rsms.me/">
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
<link href="https://api.mapbox.com/mapbox-gl-js/v3.4.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.4.0/mapbox-gl.js"></script>
<style>
@font-face {
font-family: 'Checkbox';
src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBD8AAAC8AAAAYGNtYXAYVtCJAAABHAAAAFRnYXNwAAAAEAAAAXAAAAAIZ2x5Zn4huwUAAAF4AAABYGhlYWQGPe1ZAAAC2AAAADZoaGVhB30DyAAAAxAAAAAkaG10eBBKAEUAAAM0AAAAHGxvY2EAmgESAAADUAAAABBtYXhwAAkALwAAA2AAAAAgbmFtZSC8IugAAAOAAAABknBvc3QAAwAAAAAFFAAAACAAAwMTAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADoAgPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAOAAAAAoACAACAAIAAQAg6AL//f//AAAAAAAg6AD//f//AAH/4xgEAAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAEUAUQO7AvgAGgAAARQHAQYjIicBJjU0PwE2MzIfAQE2MzIfARYVA7sQ/hQQFhcQ/uMQEE4QFxcQqAF2EBcXEE4QAnMWEP4UEBABHRAXFhBOEBCoAXcQEE4QFwAAAAABAAABbgMlAkkAFAAAARUUBwYjISInJj0BNDc2MyEyFxYVAyUQEBf9SRcQEBAQFwK3FxAQAhJtFxAQEBAXbRcQEBAQFwAAAAABAAAASQMlA24ALAAAARUUBwYrARUUBwYrASInJj0BIyInJj0BNDc2OwE1NDc2OwEyFxYdATMyFxYVAyUQEBfuEBAXbhYQEO4XEBAQEBfuEBAWbhcQEO4XEBACEm0XEBDuFxAQEBAX7hAQF20XEBDuFxAQEBAX7hAQFwAAAQAAAAIAAHRSzT9fDzz1AAsEAAAAAADRsdR3AAAAANGx1HcAAAAAA7sDbgAAAAgAAgAAAAAAAAABAAADwP/AAAAEAAAAAAADuwABAAAAAAAAAAAAAAAAAAAABwQAAAAAAAAAAAAAAAIAAAAEAABFAyUAAAMlAAAAAAAAAAoAFAAeAE4AcgCwAAEAAAAHAC0AAQAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAIAAAAAQAAAAAAAgAHAGkAAQAAAAAAAwAIADkAAQAAAAAABAAIAH4AAQAAAAAABQALABgAAQAAAAAABgAIAFEAAQAAAAAACgAaAJYAAwABBAkAAQAQAAgAAwABBAkAAgAOAHAAAwABBAkAAwAQAEEAAwABBAkABAAQAIYAAwABBAkABQAWACMAAwABBAkABgAQAFkAAwABBAkACgA0ALBDaGVja2JveABDAGgAZQBjAGsAYgBvAHhWZXJzaW9uIDIuMABWAGUAcgBzAGkAbwBuACAAMgAuADBDaGVja2JveABDAGgAZQBjAGsAYgBvAHhDaGVja2JveABDAGgAZQBjAGsAYgBvAHhSZWd1bGFyAFIAZQBnAHUAbABhAHJDaGVja2JveABDAGgAZQBjAGsAYgBvAHhGb250IGdlbmVyYXRlZCBieSBJY29Nb29uLgBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABJAGMAbwBNAG8AbwBuAC4AAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA)
format('truetype');
}
:root {
font-family: Inter, sans-serif;
font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
}
@supports (font-variation-settings: normal) {
:root { font-family: InterVariable, sans-serif; }
}
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
#key {
position: absolute;
color: #444;
/* border: 1px solid #eee; */
border-radius: 4px;
background-color: #fff;
left: 30px;
bottom: 30px;
width: 300px;
/* height: 200px; */
padding: 30px;
}
#key h1 {
font-weight: 200;
margin: 0;
font-size: 1.2rem;
line-height: 1.2rem;
margin-bottom: 1.5rem;
}
#key h2 {
font-weight: 200;
font-size: 0.85rem;
line-height: 0.85rem;
margin: 1.5rem 0 0.5rem;
}
#key .content {}
#key .content ul {
list-style: none;
margin: 0;
padding: 0;
}
#key .content ul li a,
#key .content ul li a:hover,
#key .content ul li a:visited,
#key .content ul li a:active {
text-decoration: none;
color: inherit;
}
#key .content ul li {
font-weight: 200;
margin: 0;
margin-bottom: 0.25rem;
padding: 0;
font-size: 0.95rem;
line-height: 0.95rem;
}
#key .content ul.sources li {
/* margin-left: 1rem; */
/* list-style: circle; */
}
#key .content ul.sources li {
line-height: 0.75rem;
font-size: 0.75rem;
margin-bottom: 0.35rem;
}
#key .content ul li span {
display: inline-block;
background-color: #fff;
width: 1rem;
height: 1rem;
vertical-align: middle;
margin-right: 0.5rem;
line-height: 2rem;
border-radius: 2px;
border: 1px solid #111;
}
#key .content ul li .active span:after {
font-family: Checkbox;
content: '\e800';
position: relative;
font-size: 1rem;
top: -0.5rem;
left: 0rem;
width: 17px;
height: 17px;
text-align: center;
color: #111;
}
.mapboxgl-popup {
/* min-width: 100px; */
max-width: 400px;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="key">
<div class="content">
<h1>Annual CO₂ emissions, 2022</h1>
<ul>
<li class="layer-toggle"><a class="active" id="group0" href="#"><span></span>Group 0</a></li>
<li class="layer-toggle"><a class="" id="group1" href="#"><span></span>Group 1</a></li>
<li class="layer-toggle"><a class="" id="group2" href="#"><span></span>Group 2</a></li>
<li class="layer-toggle"><a class="active" id="group3" href="#"><span></span>Group 3</a></li>
<li class="layer-toggle"><a class="" id="group4" href="#"><span></span>Group 4</a></li>
</ul>
<h2>Sources:</h2>
<ul class="sources">
<li>
<a href="https://ourworldindata.org/co2-and-greenhouse-gas-emissions">Global Carbon Budget (2023)</a>
</li>
<li>
<a href="https://data.ceda.ac.uk/neodc/esacci/land_cover/data/land_cover_maps/v2.0.7">ESA Climate Change Initiative - Land Cover led by UCLouvain (2017)</a>
</li>
</ul>
</div>
</div>

<script src="index.js"></script>
</body>
</html>
77 changes: 77 additions & 0 deletions v1/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
mapboxgl.accessToken = 'pk.eyJ1IjoiY2Fyb2xwb3MiLCJhIjoiQ01qN3dEWSJ9.Vgyz5uVSv3sw9QgPqdPTtA';

const nFormat = new Intl.NumberFormat(undefined, {minimumFractionDigits: 0});

var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/carolpos/clypwd4m4009r01qre8d49o08' // stylesheet location
});

var mapLayers = {
'group0': ['forests-land-use', 'forests color-land-use'],
'group1': ['2022-emission-grid1grau-l-copy-1', '2022-emission-grid1grau-fill-copy-1'],
'group2': ['2022-emission-grid1grau-l-copy', '2022-emission-grid1grau-fill-copy'],
'group3': ['2022-emission-grid1grau-l-copy-2', '2022-emission-grid1grau-fill-copy-2'],
'group4': ['2022-emission-grid1grau-l', '2022-emission-grid1grau-fill']
};

const popup = new mapboxgl.Popup({
closeButton: false
});

map.on('load', () => {
map.addControl(new mapboxgl.NavigationControl());
const features = map.querySourceFeatures('composite', {
'sourceLayer': '2022_emission_by_country_02-100f9c'
});
console.log(features);

map.on('mousemove', '2022-emission-grid1grau-fill-copy-2', (e) => {
console.log('mouse over');
map.getCanvas().style.cursor = 'pointer';
// console.log('A mousemove event has occurred.', e);
let feature = e.features[0];
console.log(feature.properties);

let description = "<strong>" + feature.properties.Country + "</strong><br>" + nFormat.format(feature.properties['2022 Annua']) + " t"
popup
.setLngLat(e.lngLat)
.setHTML(description)
.addTo(map);

});

map.on('mouseleave', '2022-emission-grid1grau-fill-copy-2', () => {
map.getCanvas().style.cursor = '';
popup.remove();
// map.setFilter('counties-highlighted', ['in', 'COUNTY', '']);
overlay.style.display = 'none';
});


let elements = document.querySelectorAll('li.layer-toggle a');
// Layer controls
Array.prototype.forEach.call(elements, function (el) {
el.addEventListener('click', function (e) {
e.preventDefault();
let element = e.currentTarget;
let layerId = element.id;

Array.prototype.forEach.call(mapLayers[layerId], function (layer) {
var visibility = map.getLayoutProperty(layer, 'visibility');
console.log(visibility);
if (visibility === 'visible' || visibility == undefined) {
element.classList.remove('active');
map.setLayoutProperty(layer, 'visibility', 'none');
} else {
element.classList.add('active');
map.setLayoutProperty(layer, 'visibility', 'visible');
}
});
});
});




});

0 comments on commit 19fb678

Please sign in to comment.