Skip to content

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

Urbanization tiles with timedimension

parent 4c9f8000
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 530 additions and 0 deletions
public/centropais/index2.html 0 → 100644
View file @ 09a94557
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Crecimiento urbano en la regi&oacute;n metropolitana centro pa&iacute;s</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="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="../css/style.css">
<link rel="icon" href="../img/grijalva.png" sizes="16x16">
</head>
<body>
<div id="initial-backdrop">
<img class="img_bg" src="../img/centropais2.jpg" alt="Afectaci&oacute;n por inundaci&oacute;n">
<span class="photo-credit">Foto: Felinto C&oacute;rdoda </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">Monitoreo de crecimiento urbano en la regi&oacute;n metropolitana centro pa&iacute;s</h1>
<p class="lead">Consulta el crecimiento de los aglomerados urbanos del Corredor Metropolitano Centro Pa&iacute;s resultado del an&aacute;lisis de im&aacute;genes &oacute;pticas de Sentinel-2 y conoce los indicadores que caracterizan su evoluci&oacute;n econ&oacute;mica
en las &uacute;ltimas d&eacute;cadas.</p>
<hr class="my-4">
<!--<p>Escoge las fechas para las que quieres explorar el crecimiento urbano y algunos 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>-->
<button type="button" class="btn btn-primary btn-lg" id="showMap">Entrar</button>
</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>Crecimiento urbano en la regi&oacute;n metropolitana centro pa&iacute;s</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 class="col-md-10" 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="col">
<div id="amchartdiv"></div>
</div>
<!--<div class="col-6">
<div id="df-graph"></div>
</div>-->
</div>
<div class="row h-50">
<div class="col-6 border-right">
<div id="tablediv">
<table class="table table-dark table-striped table-fixed" id="tblViajes">
<thead class="thead-dark">
<tr>
<th scope="col">Origen</th>
<th scope="col">Destino</th>
<th scope="col">Viajes</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
<div class="col-6">
<div id="perimeter-graph"></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://d3js.org/d3.v5.min.js"></script>
<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="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://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="../js/evolucion_urbana.js"></script>
</body>
</html>
\ No newline at end of file
public/js/evolucion_urbana.js 0 → 100644
View file @ 09a94557
This diff is collapsed.
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