Skip to content

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

Two buttons in frontpage and reload icon

parent 09a94557
Show whitespace changes
Inline Side-by-side
Showing with 56 additions and 187 deletions
public/centropais/index.html
View file @ ecf9696b
......@@ -9,13 +9,13 @@
<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="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<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="../js//Leaflet.BeautifyIcon/leaflet-beautify-marker-icon.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous" />
<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="icon" href="../img/grijalva.png" sizes="16x16">
<link rel="stylesheet" href="../css/style.css" />
<link rel="icon" href="../img/grijalva.png" sizes="16x16" />
</head>
<body>
......@@ -38,15 +38,23 @@
<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 class="col-4 text-center">
<button type="button" class="btn btn-primary btn-lg" id="showFlows">Ver flujos</button>
</div>
<div class="col-4 text-center">
<button type="button" class="btn btn-primary btn-lg" id="showUrban">Ver urbanizaci&oacute;n</button>
</div>
</div>
</div>
</div>
</div>
<div class="d-flex flex-column" id="mainContainer">
<header class="page-header py-2">
<div class="container text-center">
<!--<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-undo"></i></a>
<!--<div class="container text-center">-->
<div class="navbar-nav mx-auto">
<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>
......@@ -170,9 +178,27 @@
<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/centropais_functions.js"></script>
<script src="../js/centropais_basemap.js"></script>
<script src="../js/centropais_charts.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 script = document.createElement('script');
script.src = "../js/evolucion_urbana.js";
body.appendChild(script);
});
</script>
</body>
......
public/centropais/index2.html deleted 100644 → 0
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/centropais_functions.js
View file @ ecf9696b
......@@ -144,8 +144,11 @@ d3.json("https://unpkg.com/d3-time-format@2.1.1/locale/es-MX.json").then(locale
.then(userData => setupMap(userData))
.then(map => populateMap(map));*/
$("#showMap").on("click", () => {
//$("#showMap").on("click", () => {
// hide initial screen and show map
// TODO: don't need outer call to d3.json, do I? Move this to the bottom after functions definitions
//TODO: remove unused functions
$("#startHeader").remove();
$("#initial-backdrop").remove();
$("#mainContainer")[0].style.setProperty("display", "flex", "important")
......@@ -153,7 +156,7 @@ d3.json("https://unpkg.com/d3-time-format@2.1.1/locale/es-MX.json").then(locale
setupMap()
.then(map => populateMap(map));
});
//});
});
const sortInitialDateAscending = (a, b) => {
......
public/js/evolucion_urbana.js
View file @ ecf9696b
......@@ -18,19 +18,6 @@ let timeDimensionControl,
tiles,
scale;
$("#showMap").on("click", () => {
// hide initial screen and show map
$("#startHeader").remove();
$("#initial-backdrop").remove();
$("#mainContainer")[0].style.setProperty("display", "flex", "important")
$("#mexmap").show();
setupTimeDimensionControl();
getMinMax("urbanization_year") // get minmax year.Q values to popoulate timeDimension
.then(dates => setupMap(dates))
.then(map => populateMap(map));
});
const getMinMax = table => {
return new Promise(resolve => {
let table = "urbanization_year";
......@@ -42,7 +29,6 @@ const getMinMax = table => {
});
}
const setupMap = (dates) => {
return new Promise(resolve => {
// make body tag to have style height: 100%
......@@ -370,3 +356,15 @@ L.TimeDimension.Layer.Tile = L.TimeDimension.Layer.extend({
L.timeDimension.layer.Tile = (layer, options) => {
return new L.TimeDimension.Layer.Tile(layer, options);
};
// hide initial screen and show map
$("#startHeader").remove();
$(".picker").remove();
$("#initial-backdrop").remove();
$("#mainContainer")[0].style.setProperty("display", "flex", "important")
$("#mexmap").show();
setupTimeDimensionControl();
getMinMax("urbanization_year") // get minmax year.Q values to popoulate timeDimension
.then(dates => setupMap(dates))
.then(map => populateMap(map));
\ 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