-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
191 lines (119 loc) · 8.2 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Mapa das áreas inabitadas do território brasileiro.">
<meta name="author" content="Plano C">
<meta property="og:image" content="img/thumb.png">
<link rel="icon" href="favicon.ico">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
crossorigin=""/>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
crossorigin=""></script>
<script src="js/leaflet-providers.js"></script>
<title>Aqui não mora ninguém</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Ropa+Sans" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/starter-template.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/custom.css">
</head>
<!-- BODY -->
<body>
<div style="position:fixed; bottom:16px; left: 16px; width: 5rem">
<a href="http://plano-c.com/nobodyliveshere" target="_blank"> <img src="img/us.svg" style="width:1.2rem; opacity:0.8"></a>
<a href="http://plano-c.com/personnenevitici" target="_blank"> <img src="img/fr.svg" style="width:1.2rem; opacity:0.8"></a>
</div>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = 'https://connect.facebook.net/fr_CA/sdk.js#xfbml=1&version=v2.12';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- IMAGES -->
<!-- BLUE BACKGROUND -->
<div id=fundo style="position: fixed; top:0; right:0; bottom:16px; width: 22.5vw; background-color: #3DBDF0;"> </div>
<!--#74D0F0-->
<!-- REST -->
<div id=title style="position: fixed; top: 0.7rem; right:2.2rem; align-self: right; width: 19.8vw">
<img id=img src="img/title.png" style="width: 20vw; z-index: 50" />
<div id= box style="position:fixed; bottom:15rem; top:11vw; right:2.2rem; width:20vw; overflow-y: hidden;overflow-x: hidden">
<div class="scrollbar" id="style-8" style="height:75%; width:20vw; overflow-y: scroll; overflow-x: hidden">
<script type="text/javascript">
$(document).ready(function () {
if (!$.browser.webkit) {
$('.wrapper').html('<p>Sorry! Non webkit users. :(</p>');
}
});
</script>
<p style="font-family: 'Ubuntu', sans-serif; font-size: 9.5pt; color: white; text-align: justify; text-justify: inter-word; max-width: 390px; padding-right:5px; padding-left: 15px;">
<b style="background-color:#F8C159">O que é essa área em laranja?</b><br/>Toda a área em laranja neste mapa é composta por "quadrados" de até 1km<sup>2</sup> nos quais a população residente é nula. Esse dado é proveniente da grade estatística do Censo Demográfico 2010, a menor unidade de área recenseada disponibilizada pelo IBGE.
<br/><br/>Em 2010, 13.566.488 "quadrados" foram levantados. A população residente em 10.902.382 deles era igual a ... <b>zero</b>. <br/>Isso corresponde a 6,8 milhões de km<sup>2</sup>, aproximadamente 80% da área do território nacional. Assim, apesar da sua esmagadora população de 207,7 milhões, a maior parte do Brasil permanece inabitada.
<br/><br/><b style="background-color:#F8C159">Isso significa que mais da metade da superfície do país está intocada?</b> <br/>Dificilmente. Sim, grande parte desses quadrados cobrem áreas naturais, na floresta amazônica, no pantanal, no pampa, algumas em áreas protegidas. No entanto, inabitado não significa desocupado, nem inexplorado.
<br/><br/>Uma grande parte dessas áreas inabitadas é coberta por terras agrícolas, indústrias, comércios, infraestruturas de transporte, instalações militares, e muitas outras áreas por onde as pessoas passam, mas onde <b><i>não mora ninguém</i></b>.
</p>
</div>
<div style="position: relative; bottom: 0%; width:20vw; padding-top: 5%;overflow-y: hidden; overflow-x: hidden; z-index: 1000">
<p style="font-family: 'Ubuntu', sans-serif; font-size: 9.5pt; color: white; text-align: justify; text-justify: inter-word; max-width: 390px; padding-right:5px; padding-left: 15px;">
<a href="https://medium.com/@contato_65691/como-foi-feito-aqui-n%C3%A3o-mora-ningu%C3%A9m-61ec534ed5d" target="_blank"><b style="">Como esse mapa foi feito?</b> </a>
</p>
<iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fplanocpoa%2F&width=118&layout=button_count&action=like&size=small&show_faces=false&share=true&height=46&appId" width="118" height="46" style="border:none;overflow:hidden;padding-right:5px; padding-left: 15px; width:20vw" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
</div>
</div>
</div>
<div id=pic style="position: fixed; bottom: 16px; right:2rem; align-self: right">
<img src="img/pic.png" style="max-width: 20vw; z-index: 50; max-height:220px" />
</div>
<!-- NAV BAR -->
<div id="mapid" style="position:fixed; top:0; left:0; right:0; bottom:0; z-index: -50"></div>
<script>
function setInitialMapZoom() {
var viewportWidth = window.innerWidth;
var mapZoom;
if (viewportWidth < [1000]) {mapZoom = [3];}
else if (viewportWidth >= [1000] && viewportWidth < [1300]) {mapZoom = [4];}
else {mapZoom = [5];}
return mapZoom;
}
var map = L.map('mapid').setView([-15.377339, -51.872039], setInitialMapZoom());
map.createPane('ninguemtiles');
map.getPane('ninguemtiles').style.zIndex = 550;
map.getPane('ninguemtiles').style.pointerEvents = 'none';
map.createPane('base');
map.getPane('base').style.zIndex = 150;
map.createPane('labels');
map.getPane('labels').style.zIndex = 650;
L.tileLayer('http://free.tile.hydda.se/hydda/v2/base/{z}/{x}/{y}.png', {
maxZoom: 12,
pane: 'base',
}).addTo(map);
L.tileLayer('http://ninguem.herokuapp.com/v2/aqui_nao_mora_ninguem/{z}/{x}/{y}.png', {
maxZoom: 12,
opacity: 0.8,
pane: 'ninguemtiles',
}).addTo(map);
L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_only_labels/{z}/{x}/{y}.png', {
maxZoom: 12,
pane: 'labels',
opacity: 0.8,
attribution: 'Tiles and data courtesy of © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> © <a href="http://cartodb.com/attributions">CartoDB</a> © <a href="http://mapasinterativos.ibge.gov.br/grade/default.html">IBGE',
subdomains: 'abcd',
}).addTo(map);
</script>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>