Skip to content

F
fordecyt_2019
Commit b544b69d authored by Rodrigo Tapia-McClung's avatar Rodrigo Tapia-McClung
Browse files
Options

Merge Grijalva G3WBM module with other index

parent 7956308a
Show whitespace changes
Inline Side-by-side
Showing with 99 additions and 186 deletions
public/css/style.css
View file @ b544b69d
...@@ -49,6 +49,15 @@ body { ...@@ -49,6 +49,15 @@ body {
} }
/* Dates */ /* Dates */
#initialDatePickers {
display: none;
}
#resetButton {
display: none;
}
#date-initial, #date-final { #date-initial, #date-final {
text-align: center; text-align: center;
} }
......
public/grijalva/index.html
View file @ b544b69d
...@@ -30,8 +30,22 @@ ...@@ -30,8 +30,22 @@
por medio de la visualización de cuerpos de agua y por medio de la visualización de cuerpos de agua y
algunos indicadores obtenidos del an&aacute;lisis de im&aacute;genes de radar de Sentinel-1.</p> algunos indicadores obtenidos del an&aacute;lisis de im&aacute;genes de radar de Sentinel-1.</p>
<hr class="my-4"> <hr class="my-4">
<p>Escoge las fechas para las que quieres explorar el contenido de agua y sus indicadores.</p>
<div class="container"> <div class="container">
<div class="row justify-content-center mb-3" id="selectionButtons">
<div class="col-4 text-center">
<button type="button" class="btn btn-primary btn-lg" id="showWBodies">Ver evoluci&oacute;n mensual</button>
</div>
<div class="col-4 text-center">
<button type="button" class="btn btn-primary btn-lg" id="showWBase">Ver comparaci&oacute;n con mapa base</button>
</div>
</div>
<div class="row justify-content-center" id="initialDatePickers">
<div class="col">
<div class="row justify-content-center">
<div class="col text-center mb-3">Escoge las fechas para las que quieres explorar el contenido de agua y sus indicadores.</div>
</div>
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-4 text-center"> <div class="col-4 text-center">
<input type="text" name="date-initial" id="date-initial" readonly="readonly" size="12" <input type="text" name="date-initial" id="date-initial" readonly="readonly" size="12"
...@@ -44,10 +58,18 @@ ...@@ -44,10 +58,18 @@
</div> </div>
</div> </div>
</div> </div>
<div class="row justify-content-center" id="resetButton">
<div class="col text-center">
<button type="button" class="btn btn-primary" id="resetButtons">Reiniciar</button>
</div>
</div>
</div>
</div>
</div> </div>
<div class="d-flex flex-column" id="mainContainer"> <div class="d-flex flex-column" id="mainContainer">
<header class="page-header py-2"> <header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="." aria-label="Regresar"><i class="fas fa-arrow-left"></i></a>
<div class="container text-center"> <div class="container text-center">
<div class="row align-items-center text-center" id="title"> <div class="row align-items-center text-center" id="title">
<h2>Contenido de agua en la cuenca del r&iacute;o Grijalva</h2> <h2>Contenido de agua en la cuenca del r&iacute;o Grijalva</h2>
...@@ -77,18 +99,30 @@ ...@@ -77,18 +99,30 @@
<div class="loader"></div> <div class="loader"></div>
<div class="row h-50 border-bottom"> <div class="row h-50 border-bottom">
<div class="col-6 border-right"> <div class="col-6 border-right">
<div class="row h-100">
<div id="area-graph"></div> <div id="area-graph"></div>
<div id="radarChart"></div>
</div>
</div> </div>
<div class="col-6"> <div class="col-6">
<div class="row h-100">
<div id="perimeter-graph"></div> <div id="perimeter-graph"></div>
<div id="lineChart"></div>
</div>
</div> </div>
</div> </div>
<div class="row h-50"> <div class="row h-50">
<div class="col-6 border-right"> <div class="col-6 border-right">
<div class="row h-100">
<div id="costa-graph"></div> <div id="costa-graph"></div>
<div id="areaChart"></div>
</div>
</div> </div>
<div class="col-6"> <div class="col-6">
<div class="row h-100">
<div id="df-graph"></div> <div id="df-graph"></div>
<div id="barChart"></div>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -150,9 +184,49 @@ ...@@ -150,9 +184,49 @@
<script src="../js/Leaflet.Sync.js"></script> <script src="../js/Leaflet.Sync.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
<script src="../js/jszip.min.js"></script> <script src="../js/jszip.min.js"></script>
<script src="../js/grijalva_functions.js"></script>
<script src="../js/grijalva_basemap.js"></script> <!-- amcharts -->
<script src="../js/grijalva_charts.js"></script> <script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<script>
$("#showWBodies").on("click", () => {
$("#initialDatePickers").show();
$("#selectionButtons").hide();
$("#resetButton").show();
let body = document.getElementsByTagName('body')[0];
let script1 = document.createElement('script');
let script2 = document.createElement('script');
let script3 = document.createElement('script');
script1.src = "../js/grijalva_functions.js";
body.appendChild(script1);
script2.src = "../js/grijalva_basemap.js";
body.appendChild(script2);
script3.src = "../js/grijalva_charts.js";
body.appendChild(script3);
});
$("#showWBase").on("click", () => {
$("#initialDatePickers").show();
$("#selectionButtons").hide();
$("#resetButton").show();
let body = document.getElementsByTagName('body')[0];
let script1 = document.createElement('script');
let script2 = document.createElement('script');
let script3 = document.createElement('script');
script1.src = "../js/cuerpos_functions.js";
body.appendChild(script1);
script2.src = "../js/cuerpos_basemap.js";
body.appendChild(script2);
script3.src = "../js/cuerpos_charts.js";
body.appendChild(script3);
});
$("#resetButtons").on("click", () => {
window.location.href = "./";
});
</script>
</body> </body>
</html> </html>
\ No newline at end of file
public/grijalva/index2.html deleted 100644 → 0
View file @ 7956308a
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Contenido de agua en la cuenca Grijalva</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" />
<link rel="stylesheet" href="https://cdn.rawgit.com/socib/Leaflet.TimeDimension/master/dist/leaflet.timedimension.control.min.css" />
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.0/mapbox-gl.css" />
<link rel="stylesheet" href="../js//Leaflet.BeautifyIcon/leaflet-beautify-marker-icon.css">
<link rel="stylesheet" href="../js/L.VisualClick/L.VisualClick.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css" />
<link rel="stylesheet" href="../css/style.css">
<link rel="stylesheet" href="../css/fontawesome.css" />
<link rel="icon" href="../img/grijalva.png" sizes="16x16">
</head>
<body>
<div id="initial-backdrop">
<img class="img_bg" src="../img/sumidero2.jpg" alt="Ca&ntilde;&oacute;n del Sumidero">
<span class="photo-credit">Foto: Gabriela L&oacute;pez</span>
</div>
<div class="container" id="startHeader">
<div class="jumbotron mt-5" style="background-color: rgba(233,236,239,0.75); opacity: 0.99;">
<h1 class="display-4">Contenido de agua en la cuenca del r&iacute;o Grijalva</h1>
<p class="lead">Explora la apariencia de la cuenca del r&iacute;o Grijalva a trav&eacute;s del tiempo por medio de la visualizaci&oacute;n de cuerpos de agua y algunos indicadores obtenidos del an&aacute;lisis de im&aacute;genes de radar de Sentinel-1.</p>
<hr class="my-4">
<p>Escoge las fechas para las que quieres explorar el contenido de agua y sus indicadores.</p>
<div class="container">
<div class="row justify-content-center">
<div class="col-4 text-center">
<input type="text" name="date-initial" id="date-initial" readonly="readonly" size="12" placeholder="Fecha inicial" data-calendar="false" />
</div>
<div class="col-4 text-center">
<input type="text" name="date-final" id="date-final" readonly="readonly" size="12" placeholder="Fecha final" data-calendar="true" />
</div>
</div>
</div>
</div>
</div>
<div class="d-flex flex-column" id="mainContainer">
<header class="page-header py-2">
<div class="container text-center">
<div class="row align-items-center text-center" id="title">
<h2>Contenido de agua en la cuenca del r&iacute;o Grijalva</h2>
</div>
</div>
</header>
<!-- middle container -->
<div class="container-fluid d-flex flex-fill">
<div class="row d-flex flex-fill">
<div class="col-md-6" id="mexmap">
<div id="datePickers"></div>
<div class="picker">
<select id="indicatorSelect"></select>
</div>
<div class="text-center loader">
<i class="fa fa-spinner2 fa-spin fa-5x loadSpinner"></i><br>
<span class="loadText">Cargando datos...<br>
<span id="wb-fileLoad"></span>
<span id="basemap-fileLoad"></span>
</span>
</div>
</div>
<div class="col-md-6" id="overlaydiv"></div>
<div class="col-md-6" id="story">
<div class="loader"></div>
<div class="row h-50 border-bottom">
<div class="col-6 border-right">
<div class="row h-100">
<div id="radarChart"></div>
</div>
</div>
<div class="col-6">
<div class="row h-100">
<div id="lineChart"></div>
</div>
</div>
</div>
<div class="row h-50">
<div class="col-6 border-right">
<div class="row h-100">
<div id="areaChart"></div>
</div>
</div>
<div class="col-6">
<div class="row h-100">
<div id="barChart"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="page-footer py-2">
<div class="container-fluid text-center">
<div class="row align-items-center">
<div class="col">
<span id="logo-conacyt"><a href="http://www.concayt.gob.mx" target="_blank"><img
src="../img/conacyt3.png" height="70" class="grayscale"></a></span>
</div>
<div class="col">
<span id="logo-cg"><a href="http://www.centrogeo.org.mx" target="_blank"><img
src="../img/centrogeo.png" height="70" class="grayscale"></a></span>
</div>
<div class="col">
<span id="logo-geoint"><a href="http://geoint.mx/" target="_blank"><img
src="../img/geoint.png" height="70" class="grayscale"></a></span>
</div>
</div>
</div>
</footer>
</div>
<!-- Modal -->
<div class="modal fade" id="explainIndicatorModal" tabindex="-1" role="dialog" aria-labelledby="explainIndicatorModal" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="explainIndicatorModalTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>
<script src="../js/Leaflet.BeautifyIcon/leaflet-beautify-marker-icon.js"></script>
<script src="../js/L.VisualClick/L.VisualClick.js"></script>
<script src="https://api.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.3.1/leaflet-omnivore.min.js"></script>
<script src="https://cdn.rawgit.com/nezasa/iso8601-js-period/master/iso8601.min.js"></script>
<script src="https://cdn.rawgit.com/socib/Leaflet.TimeDimension/master/dist/leaflet.timedimension.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.0.3/chroma.min.js"></script>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.0/mapbox-gl.js"></script>
<script src="https://unpkg.com/mapbox-gl-leaflet/leaflet-mapbox-gl.js"></script>
<script src="../js/Leaflet.Sync.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
<script src="../js/jszip.min.js"></script>
<!-- amcharts -->
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<script src="../js/cuerpos_functions.js"></script>
<script src="../js/cuerpos_basemap.js"></script>
<script src="../js/cuerpos_charts.js"></script>
</body>
</html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment