-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
156 lines (137 loc) · 7.29 KB
/
index.html
File metadata and controls
156 lines (137 loc) · 7.29 KB
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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mapa Proyectos Regenerativos</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
<!-- CSS del leaflet-sidebar-v2 con SRI -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet-sidebar-v2@3.2.3/css/leaflet-sidebar.min.css"
integrity="sha256-10dwwxs/pdWEYoC56aJvmY3kbMMa9/3uSWWNkGcrGq8="
crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;600&display=swap" rel="stylesheet">
<!-- Estilo propio -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- Contenedor del mapa -->
<div id="map"></div>
<!-- Sidebar -->
<div id="sidebar" class="leaflet-sidebar collapsed">
<!-- Tabs -->
<div class="leaflet-sidebar-tabs">
<ul role="tablist">
<li class="tabs"><a href="#menu" role="tab"><i class="bi bi-three-dots"></i></a></li>
<li class="tabs"><a href="#predios" role="tab"><i class="bi bi-app-indicator"></i></a></li>
</ul>
<ul role="tablist">
<li class="tabs"><a href="#informacion" role="tab"><i class="bi bi-info-square"></i></a></li>
<li class="tabs"><a href="https://github.com/Tania-Karo/proyectos-regenerativos-mapa" target="_blank" role="button"><i class="bi bi-github"></i></a></li>
<li class="tabs"><a href="#creditos" role="tab"><i class="bi bi-card-checklist"></i></a></li>
<li class="tabs"><a href="https://tania-karo.github.io/proyectos-regenerativos-mapa/" target="_blank" role="button"><i class="bi bi-arrows-angle-expand"></i></a></li>
</ul>
</div>
<!-- Contenido de los paneles -->
<div class="leaflet-sidebar-content">
<!-- Menu -->
<div class="leaflet-sidebar-pane" id="menu">
<h1 class="leaflet-sidebar-header">
Menu
<span class="leaflet-sidebar-close"><i class="fa fa-caret-left"></i></span>
</h1>
<div id="sidebar-content-menu">
<h4><b>Mapa de Proyectos Regenerativos en Paraguay, Uruguay, Argentina y Brasil</b></h4>
<h6>Para obtener información sobre un proyecto de agricultura o ganadería regenerativa, <b>hacer click en un ícono o predio</b>. Los predios resaltados en rojo al utilizar el cursor corresponden al mismo proyecto de créditos de carbono.</h6>
</div>
</div>
<!-- Predios -->
<div class="leaflet-sidebar-pane" id="predios">
<h1 class="leaflet-sidebar-header">
Proyectos
<span class="leaflet-sidebar-close"><i class="fa fa-caret-left"></i></span>
</h1>
<!-- sidebar-details -->
<div id="sidebar-details">
<p>Seleccioná un marcador para ver detalles</p>
</div>
</div>
<!-- Emisiones -->
<div class="leaflet-sidebar-pane" id="emisiones">
<h1 class="leaflet-sidebar-header">
Emisiones
<span class="leaflet-sidebar-close"><i class="fa fa-caret-left"></i></span>
</h1>
<div id="sidebar-content-emisiones">
<p></p>
</div>
</div>
<!-- Incendios
<div class="leaflet-sidebar-pane" id="incendios">
<h1 class="leaflet-sidebar-header">
Incendios
<span class="leaflet-sidebar-close"><i class="fa fa-caret-left"></i></span>
</h1>
<div id="sidebar-content-emisiones">
<p></p>
</div>
</div>-->
<!-- Instrucciones -->
<div class="leaflet-sidebar-pane" id="informacion">
<h1 class="leaflet-sidebar-header">
Información
<span class="leaflet-sidebar-close"><i class="fa fa-caret-left"></i></span>
</h1>
<div id="sidebar-content-instrucciones">
<ul>
<li><p></p>Para obtener información sobre un proyecto de agricultura o ganadería regenerativa, <b>hacer click en un ícono o predio</b>. Los predios resaltados en rojo al utilizar el cursor corresponden al mismo proyecto de créditos de carbono.</p></li>
<li><p>Utilizar el botón en la parte superior derecha para activar o desactivar la capa de <b>Emisiones</b></p></li>
<li><p>Utilizar el botón inferior para expandir este mapa</p></li>
<li><p><b>Emisiones</b>. Imágenes reflejan emisiones de gases de efecto invernadero en co2eq relacionadas a deforestación (2017). Datos: Climate Trace.</p></li>
<!--<li><p><b>Incendios</b>. Imágenes reflejan emisiones de gases de efecto invernadero en co2eq relacionadas a deforestación (2020). Datos: Climate Trace.</p></li>-->
</ul>
</div>
</div>
<!-- Créditos -->
<div class="leaflet-sidebar-pane" id="creditos">
<h1 class="leaflet-sidebar-header">
Créditos
<span class="leaflet-sidebar-close"><i class="fa fa-caret-left"></i></span>
</h1>
<div id="sidebar-content-creditos">
<br>
<p>Este mapa es parte de un proyecto desarrollado por <a href="https://climatetrackerlatam.org/" target="_blank">Climate Tracker</a> y <a href="https://consen.so/" target="_blank">Consenso</a>, con el apoyo de <a href="https://berthafoundation.org/">Bertha Foundation</a></p>
<ul>
<li>Las imágenes satelitales de emisiones son cortesía de <a href="https://climatetrace.org/" target="_blank">Climate Trace</a>.</li>
<li>Los datos de proyectos regenerativos vienen de:
<ul>
<li><a href="https://registry.verra.org/" target="_blank">Verra Registry</a></li>
<li><a href="http://carbonotransparente.proyungas.org.ar/" target="_blank">Carbono Transparente Chaco</a></li>
<li><a href="https://www.goldstandard.org/" target="_blank">Gold Standard</a></li>
<li>Reportería original</li>
</ul>
</li>
<li>Para más información, visitar <a href="https://github.com/Tania-Karo/proyectos-regenerativos-mapa" target="_blank">GitHub</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- Leaflet JS (después del CSS, y antes de mi script) -->
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<!-- Script de Bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
<!-- Script de leaflet-sidebar-v2 -->
<script src="https://cdn.jsdelivr.net/npm/leaflet-sidebar-v2@3.2.3/js/leaflet-sidebar.min.js"
integrity="sha256-4r81BYKeNxSG+nrK/UPQq75pDlH+GkiZn/zc/xkNMLA="
crossorigin="anonymous"></script>
<!-- Script propio -->
<script src="map.js"></script>
</body>
</html>