<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Crecimiento urbano en la región metropolitana centro paí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="../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/urban.jpeg" sizes="16x16" />
</head>
<body>
<div id="initial-backdrop">
<img class="img_bg" src="../img/centropais2.jpg" alt="Afectación por inundación">
<span class="photo-credit">Foto: Felinto Có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ón metropolitana centro país</h1>
<p class="lead">Consulta el crecimiento de los aglomerados urbanos del Corredor Metropolitano Centro País resultado del análisis de imágenes ópticas de Sentinel-2 y conoce los indicadores que caracterizan su evolución económica
en las últimas décadas.</p>
<hr class="my-4">
<div class="container">
<div class="row justify-content-center">
<div class="col-3 text-center">
<button type="button" class="btn btn-primary btn-lg" id="showFlows">Ver flujos</button>
</div>
<div class="col-3 text-center">
<button type="button" class="btn btn-primary btn-lg" id="showUrban">Ver urbanización</button>
</div>
<div class="col-3 text-center">
<button type="button" class="btn btn-primary btn-lg" id="showPeriurban">Ver dinámica periurbana</button>
</div>
</div>
</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="navbar-nav mx-auto">
<div class="row align-items-center text-center" id="title">
<h2>Crecimiento urbano en la región metropolitana centro paí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-6" id="mexmap">
<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-6" id="overlaydiv"></div>
<div class="col-6" id="story">
<div class="loader"></div>
<div class="row h-50 border-bottom">
<div class="col" id="topChart">
<div class="row h-100">
<div id="odChart"></div>
<div id="barChart"></div>
</div>
</div>
</div>
<div class="row h-50">
<div class="col-6 border-right" id="bottomLeftChart">
<div class="row h-100">
<div id="chordChart"></div>
<div id="pieChart"></div>
</div>
</div>
<div class="col-6 align-self-center" id="odTableRow">
<div class="row h-100 justify-content-center" id="bottomRightChart">
<div id="radarChart"></div>
<div class="card text-center" id="odCard">
<div class="card-body">
<p class="card-text">Haz clic en un nodo del mapa para mostrar sus datos</p>
</div>
</div>
<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>
</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>
<!-- load animation tweening lib requirement for CanvasFlowMapLayer -->
<script src="https://unpkg.com/@tweenjs/tween.js@18.5/dist/tween.umd.js"></script>
<script src="../js/CanvasFlowmapLayer.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>
$("#showFlows").on("click", () => {
let body = document.getElementsByTagName('body')[0];
let script1 = document.createElement('script');
let script2 = document.createElement('script');
let script3 = document.createElement('script');
script1.src = "../js/centropais_functions.js";
body.appendChild(script1);
script2.src = "../js/centropais_basemap.js";
body.appendChild(script2);
script3.src = "../js/centropais_charts.js";
body.appendChild(script3);
});
$("#showUrban").on("click", () => {
let body = document.getElementsByTagName('body')[0];
let script1 = document.createElement('script');
let script2 = document.createElement('script');
script1.src = "../js/evolucion_urbana.js";
script2.src = "../js/evolucion_urbana_charts.js";
body.appendChild(script1);
body.appendChild(script2);
});
$("#showPeriurban").on("click", () => {
let body = document.getElementsByTagName('body')[0];
let script = document.createElement('script');
script.src = "../js/centropais_periurbano.js";
body.appendChild(script);
});
</script>
</body>
</html>