Fire and Deforestation in the Amazon Rainforest, 2019 / Laura J Kurtzberg

viewof map = {

const container = html`

<p><span class="gradientlegend" style="background-image: linear-gradient(to right, rgba(255,241,56,0), rgb(38,35,2) 40%, rgb(209,11,6));"></span>Densidade de Fogos <span id="yearlegend">2015</span></p>

</div>

<p><span class="legendsquare" style="background: rgb(252,240,151);"></span>Desmatamento Agosto 2018 - Julho 2019 (PRODES)</p>

</div>

<p><span class="legendsquare" style="background: rgb(252,240,151);"></span>Desmatamento Agosto 2018 - Julho 2019 (PRODES)</p>

<p><span class="gradientlegend" style="background-image: linear-gradient(to right, rgba(255,241,56,0), rgb(38,35,2) 40%, rgb(209,11,6));"></span>Densidade de Fogos 2019</p>

</div>

<p><span class="legendsquare" style="background: black;"></span>Municipios sem informação de fogos ou desmatamento</p>

</div>

<p><span class="legendsquare" style="background: rgb(62, 114, 117);"></span>Unidades de Conservação</p>

<p><span class="legendsquare" style="background: rgba(155, 155, 155, 0.7);"></span>Imóveis (CAR) > 440ha</p>

<p><span class="legendsquare" style="background: rgba(255, 255, 255, 1);"></span>Imóveis (CAR) < 440ha</p>

<p><span class="gradientlegend" style="background-image: linear-gradient(to right, rgba(255,241,56,0), rgb(38,35,2) 40%, rgb(209,11,6));"></span>Densidade de Fogos 2019</p>

</div>

<p><span class="legendsquare" style="background: rgb(252,240,151);"></span>Desmatamento 2020 (DETER)</p>

<p><span class="gradientlegend" style="background-image: linear-gradient(to right, rgba(255,241,56,0), rgb(38,35,2) 40%, rgb(209,11,6));"></span>Densidade de Fogos Janeiro - Julho 2020</p>

</div>

</div>

</div>

<p>De janeiro a dezembro de 2019, foram 89 mil focos de calor na Amazônia, 30% a mais do que no ano anterior e o índice mais alto da década para o mês de agosto, de acordo com o Instituto Nacional de Pesquisas Espaciais (<a href="http://queimadas.dgi.inpe.br/queimadas/bdqueimadas">Inpe</a>).</p>

</div>

</section>

<h2>Desmatamento em 2019</h2>

</div>

</div>

<div class="overlay-subsection"><p>No mesmo período, o desmatamento também aumentou. O <a href="http://www.obt.inpe.br/OBT/assuntos/programas/amazonia/prodes">Sistema Prodes</a>, do Inpe, registra o corte de mais de dez mil quilômetros quadrados de floresta entre agosto de 2018 e julho de 2019, quase o dobro do registrado nos 12 meses anteriores. </p>

</div>

</section>

<h2>Desmatamento e Fogo em 2019</h2>

</div>

<p>O Instituto de Pesquisas Ambientais da Amazônia (<a href="https://ipam.org.br/">Ipam</a>) aponta: as queimadas associadas ao desmatamento recente respondem por 34% do número de focos de calor por tipo de fogo no bioma Amazônia em 2019. “No processo do desmatamento, o fogo é a etapa final", complementa a bióloga Erika Berenguer, da Universidade de Lancaster.</p>

</div>

</section>

<h2>Desmatamento e Fogo nos Municípios</h2>

</div>

<p>Os quatro municípios que mais desmataram em 2019 também encabeçam a lista dos que tiveram mais focos de calor: Altamira e São Félix do Xingu, no Pará; Porto Velho, em Rondônia; e Lábrea, no Amazonas, mesmo estado de Apuí, que também aparece nas duas listas, como sexto (focos de calor) e sétimo (desmatamento).</p>

</div>

</section>

<h2>Fogo em Imóveis Rurais</h2>

</div>

<p>A análise dos dados do <a href="http://www.car.gov.br/">Cadastro Ambiental Rural (CAR)</a> nos quatro municípios líderes em fogo e desmatamento em 2019 mostra que 72% dos focos de calor foram registrados em propriedades de médio e grande porte (acima de 440 hectares) e o restante em imóveis rurais pequenos (abaixo de 440 hectares). </p>

</div>

</section>

<h2>Desmatamento e Fogo em 2020</h2>

</div>

<p>A mesma correlação aparece em 2020. O monitoramento dos satélites do Inpe mostra que os alertas de desmatamento do Sistema Deter aumentaram 34% nos últimos 12 meses. Uma nova ferramenta de mapeamento de queimadas desenvolvida pela Nasa aponta que 54% dos focos de fogo este ano têm origem no desmatamento.</p>

</div>

</section>

</div>

`;

// Create a popup, but don't add it to the map yet.

const popup = new mapboxgl.Popup({

closeButton: false,

closeOnClick: true

});

let hoveredStateId = null;

yield container; // Give the container dimensions.

const map = container.value = new mapboxgl.Map({

container: 'map',

center: [-53.68, -4],

zoom: 5,

style: "mapbox://styles/laurakurtzberg/ckcv2by2x01p71jn1vtv4yze8",

scrollZoom: true

});

map.on("load", () => {

const layers = map.getStyle().layers;

// Find the index of the first symbol layer in the map style

let firstSymbolId;

for (let i = 0; i < layers.length; i++) {

if (layers[i].type === 'symbol') {

firstSymbolId = layers[i].id;

break;

}

map.addSource('fires', {

'type': 'vector',

'url': 'mapbox://laurakurtzberg.b7h1zbz8'

});

map.addSource('deforestation', {

'type': 'vector',

'url': 'mapbox://laurakurtzberg.c8t15e1c'

});

map.addSource('fires-per-property-type', {

'type': 'vector',

'url': 'mapbox://laurakurtzberg.4mbw2mji'

});

map.addSource('fogos-e-desmatamento-por-municipio', {

'type': 'vector',

'url': 'mapbox://laurakurtzberg.9g7unbiz'

});

map.addSource('top-4-municipios', {

'type': 'geojson',

'data': 'https://gist.githubusercontent.com/laurakurtzberg/dcb15e141b9c2f25df44bb6a298722a7/raw/3368519de742d8f1b7a50affe713e4cb533e02b4/5municipios.geojson'

});

map.addSource('deforestation-2020', {

'type': 'vector',

'url': 'mapbox://laurakurtzberg.aic4lqhe'

});

map.addSource('fires2020', {

'type': 'vector',

'url': 'mapbox://laurakurtzberg.c2o7nk5r'

});

map.addSource('UCs', {

'type': 'vector',

'url': 'mapbox://laurakurtzberg.99qxbpdb'

});

map.addLayer({

'id': 'fires',

'type': 'heatmap',

'source': 'fires',

'maxzoom': 10,

'source-layer': 'mergedfires',

'paint': {

'heatmap-weight': 0.8,

// increase intensity as zoom level increases

'heatmap-intensity': {

stops: [

[2, 0.1],

[7, 1]

]

},

// Color ramp for heatmap. Domain is 0 (low) to 1 (high).

'heatmap-color': ['interpolate', ['linear'],

['heatmap-density'], 0, 'rgba(255,241,56,0)', 0.2, 'rgba(38,35,2,0.4)', 1, 'rgb(209,11,6)'

],

// Adjust the heatmap radius by zoom level

'heatmap-radius': ['interpolate', ['linear'],

['zoom'], 0, 1, 4, 8

],

'heatmap-opacity': 0,

'heatmap-opacity-transition': {

duration: 2000

}

}, firstSymbolId);

map.addLayer({

'id': 'UCs',

'type': 'fill',

'maxzoom': 22,

'source': 'UCs',

'source-layer': 'Uc',

'paint': {

'fill-color': 'rgba(62, 114, 117, 0.8)',

'fill-opacity': 0,

'fill-opacity-transition': {

duration: 1200

}

}, 'fires');

map.addLayer({

'id': 'desmatamento-por-municipio',

'type': 'fill',

'maxzoom': 22,

'source': 'fogos-e-desmatamento-por-municipio',

'source-layer': 'municipios',

'paint': {

'fill-outline-color': 'rgba(0, 0, 0, 1)',

'fill-color': [

'step',

['get', '2019areakm'], /* jenks natural breaks */

'#5d5d5d',

0, '#2c2c2c',

58, '#959696',

254, '#ffffff'

],

'fill-opacity': 0,

'fill-opacity-transition': {

duration: 1200

}

}, 'fires');

map.addLayer({

'id': 'fogos-por-municipio',

'type': 'fill',

'maxzoom': 22,

'source': 'fogos-e-desmatamento-por-municipio',

'source-layer': 'municipios',

'paint': {

'fill-outline-color': 'rgba(0, 0, 0, 1)',

'fill-color': [

'step',

['get', 'NUMPOINTS'], /* jenks natural breaks */

'#5d5d5d',

1, '#5d5d5d',

352, '#a03331',

1384, '#e30906'

],

'fill-opacity': 0,

'fill-opacity-transition': {

duration: 1200

}

}, 'fires');

map.addLayer({

'id': 'municipios-outline',

'type': 'line',

'source': 'top-4-municipios',

'paint': {

'line-color': 'rgba(255, 255, 255, 1)',

'line-opacity': 0,

'line-width': 1.3

}

}, 'fires');

map.addLayer({

'id': 'deforestation',

'type': 'fill',

'maxzoom': 10,

'source': 'deforestation',

'source-layer': 'alldeforestation',

'paint': {

'fill-color': 'rgb(252,240,151)',

'fill-opacity': 0,

'fill-opacity-transition': {

duration: 1200

}

}, firstSymbolId);

map.addLayer({

'id': 'fires-per-property-type',

'type': 'fill',

'maxzoom': 10,

'source': 'fires-per-property-type',

'source-layer': '5comapui',

'layout': {

'fill-sort-key': ['get', 'neg-area']

},

'paint': {

'fill-color': [

'case',

['==',

['get', 'tamanho'],

'g'

],

'rgba(155, 155, 155, 0.8)', // grey

'rgba(255, 255, 255, 0.9)' // fallback white

],

'fill-opacity': 0,

'fill-opacity-transition': {

duration: 1200

}

}, firstSymbolId);

map.addLayer({

'id': 'fires2020',

'type': 'heatmap',

'maxzoom': 10,

'source': 'fires2020',

'source-layer': '2020fires',

'paint': {

'heatmap-weight': 0.8,

// increase intensity as zoom level increases

'heatmap-intensity': {

stops: [

[2, 0.1],

[7, 1]

]

},

// Color ramp for heatmap. Domain is 0 (low) to 1 (high).

'heatmap-color': ['interpolate', ['linear'],

['heatmap-density'], 0, 'rgba(255,241,56,0)', 0.2, 'rgba(38,35,2,0.4)', 1, 'rgb(209,11,6)'

],

// Adjust the heatmap radius by zoom level

'heatmap-radius': ['interpolate', ['linear'],

['zoom'], 0, 1, 4, 8

],

'heatmap-opacity': 0,

'heatmap-opacity-transition': {

duration: 2000

}

}, firstSymbolId);

map.addLayer({

'id': 'deforestation-2020',

'type': 'fill',

'maxzoom': 10,

'source': 'deforestation-2020',

'source-layer': 'deforestation2020',

'paint': {

'fill-color': 'rgb(252,240,151)',

'fill-opacity': 0,

'fill-opacity-transition': {

duration: 1200

}

}, firstSymbolId);

map.on('mousemove', 'fogos-por-municipio', function(e) {

if (map.getPaintProperty('fogos-por-municipio', 'fill-opacity') !== 0) {

map.getCanvas().style.cursor = 'pointer';

}

if (map.getPaintProperty('fogos-por-municipio', 'fill-opacity') !== 0) {

if (e.features[0].properties['2019areakm'] && e.features[0].properties.NUMPOINTS) {

popup

.setLngLat(e.lngLat)

.setHTML('<p><strong>' + e.features[0].properties.NM_MUNICIP + '</strong></p><p>' + d3.format(",")(e.features[0].properties.NUMPOINTS) + ' fogos</p>' + '<p>' + d3.format(",.5r")(e.features[0].properties['2019areakm']) + ' km2 desmatados</p>')

.addTo(map);

} else if (e.features[0].properties['2019areakm']) {

popup

.setLngLat(e.lngLat)

.setHTML('<p><strong>' + e.features[0].properties.NM_MUNICIP + '</strong></p><p>' + d3.format(",.5r")(e.features[0].properties['2019areakm']) + ' km2 desmatados</p>' + '<p class="close">dados de fogos</p> <p>não disponíveis</p>')

.addTo(map);

} else if (e.features[0].properties.NUMPOINTS) {

popup

.setLngLat(e.lngLat)

.setHTML('<p><strong>' + e.features[0].properties.NM_MUNICIP + '</strong></p><p>' + d3.format(",")(e.features[0].properties.NUMPOINTS) + ' fogos</p>' + '<p class="close">dados de desmatamento</p> <p>não disponíveis</p>')

.addTo(map);

} else {

popup

.setLngLat(e.lngLat)

.setHTML('<p>dados não disponíveis</p>')

.addTo(map);

}

});

// When the mouse leaves the state-fill layer, update the feature state of the

// previously hovered feature.

map.on('mouseleave', 'fogos-por-municipio', function() {

map.getCanvas().style.cursor = '';

popup.remove();

});

filterFires(3, map);

filterDeforestation(3, map);

// disable map zoom when using scroll unless CTRL is pressed

map.on("wheel", event => {

if (event.originalEvent.ctrlKey) { // Check if CTRL key is pressed

event.originalEvent.preventDefault(); // Prevent chrome/firefox default behavior

if (!map.scrollZoom._enabled) map.scrollZoom.enable(); // Enable zoom only if it's disabled

} else {

if (map.scrollZoom._enabled) map.scrollZoom.disable(); // Disable zoom only if it's enabled

}

});

// disable map rotation using right click + drag

map.dragRotate.disable();

//Timeout shoud be within the map load function

setTimeout(function() {

map.setPaintProperty('fires', 'heatmap-opacity', ['interpolate',['linear'],['zoom'],7,1,9,0]);

}, 1);

});

document

.getElementById('slider')

.addEventListener('input', function(e) {

const year = parseInt(e.target.value, 10);

filterFires(year, map);

});

document

.getElementById('slider2')

.addEventListener('input', function(e) {

const year = parseInt(e.target.value, 10);

filterDeforestation(year, map);

});

const chapterNames = Object.keys(chapters);

let activeChapterName = 'fires';

let newChapterName = 'fires';

/* Update content on scroll */

document.querySelector('#text-boxes-container').addEventListener("scroll", e => {

for (var i = 0; i < chapterNames.length; i++) {

let chapterName = chapterNames[i];

if (isElementOnScreen(chapterName, container)) {

setActiveChapter(chapterName, activeChapterName, map);

newChapterName = chapterName;

setTimeout(updateFiresLayer(chapterName, map), 1500)

break;

}

activeChapterName = newChapterName;

});

invalidation.then(() => map.remove());

}

Purpose-built for displays of data