<!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ñón del Sumidero"> <span class="photo-credit">Foto: Gabriela Ló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ío Grijalva</h1> <p class="lead">Explora la apariencia de la cuenca del río Grijalva a través del tiempo por medio de la visualización de cuerpos de agua y algunos indicadores obtenidos del análisis de imágenes de radar de Sentinel-1.</p> <hr class="my-4"> <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ón mensual</button> </div> <div class="col-4 text-center"> <button type="button" class="btn btn-primary btn-lg" id="showWBase">Ver comparació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="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 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 class="navbar navbar-expand flex-column flex-md-row bd-navbar"> <a href="../" aria-label="Regresar" class="navbar-brand text-dark"> <i class="fas fa-arrow-left"></i> Regresar </a> </div> </div> </div> <div class="d-flex flex-column" id="mainContainer"> <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="row align-items-center text-center" id="title"> <h2>Contenido de agua en la cuenca del rí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="area-graph"></div> <div id="radarChart"></div> </div> </div> <div class="col-6"> <div class="row h-100"> <div id="perimeter-graph"></div> <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="costa-graph"></div> <div id="areaChart"></div> </div> </div> <div class="col-6"> <div class="row h-100"> <div id="df-graph"></div> <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">×</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> $("#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> </html>