Skip to content

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

Change start page. Flows on top of map. Populate table. Change to double... 

Change start page. Flows on top of map. Populate table. Change to double quotes. Comment unused stuff
parent 1a99de35
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 161 additions and 111 deletions
public/centropais/index.html
View file @ 655d28ca
...@@ -2,21 +2,19 @@ ...@@ -2,21 +2,19 @@
<html> <html>
<head> <head>
<meta charset='utf-8' /> <meta charset="utf-8" />
<title>Crecimiento urbano en la regi&oacute;n metropolitana centro pa&iacute</title> <title>Crecimiento urbano en la regi&oacute;n metropolitana centro pa&iacute</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" /> <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://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://cdn.rawgit.com/socib/Leaflet.TimeDimension/master/dist/leaflet.timedimension.control.min.css" />
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.0/mapbox-gl.css' rel='stylesheet' /> <link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.0/mapbox-gl.css" />
<link rel="stylesheet" type="text/css" href="../css/font-awesome.min.css"> <link rel="stylesheet" href="../js//Leaflet.BeautifyIcon/leaflet-beautify-marker-icon.css">
<link rel="stylesheet" type="text/css" 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="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="../js/L.VisualClick/L.VisualClick.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://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="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css" />
<link rel="stylesheet" type="text/css" href="../css/riesgos/style.css"> <link rel="stylesheet" href="../css/style.css">
<link rel="stylesheet" type="text/css" href="../css/style.css">
<link rel="icon" href="../img/grijalva.png" sizes="16x16"> <link rel="icon" href="../img/grijalva.png" sizes="16x16">
</head> </head>
...@@ -31,16 +29,16 @@ ...@@ -31,16 +29,16 @@
<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 <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> en las &uacute;ltimas d&eacute;cadas.</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> <!--<p>Escoge las fechas para las que quieres explorar el crecimiento urbano y algunos indicadores.</p>-->
<div class="container"> <div class="container">
<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" placeholder="Fecha inicial" data-calendar="false" /> <input type="text" name="date-initial" id="date-initial" readonly="readonly" size="12" placeholder="Fecha inicial" data-calendar="false" />
</div> </div>
<div class="col-4 text-center"> <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" /> <input type="text" name="date-final" id="date-final" readonly="readonly" size="12" placeholder="Fecha final" data-calendar="true" />
</div>-->
</div> <button type="button" class="btn btn-primary btn-lg" id="showMap">Entrar</button>
</div> </div>
</div> </div>
</div> </div>
...@@ -78,7 +76,19 @@ ...@@ -78,7 +76,19 @@
<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 id="area-graph"></div> <button type="button" class="btn-sm btn-info" id="resetFlows"><i class="fa fa-refresh"></i> Reset</button>
<div id="area-graph">
<table class="table table-dark table-striped" id="tblViajesDesde">
<thead>
<tr>
<th scope="col">Desde</th>
<th scope="col">Hacia</th>
<th scope="col">Viajes</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div> </div>
<div class="col-6"> <div class="col-6">
<div id="perimeter-graph"></div> <div id="perimeter-graph"></div>
...@@ -135,29 +145,28 @@ ...@@ -135,29 +145,28 @@
</div> </div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.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 src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</script>
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></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/Leaflet.BeautifyIcon/leaflet-beautify-marker-icon.js"></script>
<script src="../js/L.VisualClick/L.VisualClick.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://api.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.3.1/leaflet-omnivore.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/nezasa/iso8601-js-period/master/iso8601.min.js"></script> <script src="https://cdn.rawgit.com/nezasa/iso8601-js-period/master/iso8601.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/socib/Leaflet.TimeDimension/master/dist/leaflet.timedimension.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://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://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://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="https://unpkg.com/mapbox-gl-leaflet/leaflet-mapbox-gl.js"></script>
<script type="text/javascript" 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 type="text/javascript" src="../js/jszip.min.js"></script> <script src="../js/jszip.min.js"></script>
<!-- load animation tweening lib requirement for CanvasFlowMapLayer --> <!-- load animation tweening lib requirement for CanvasFlowMapLayer -->
<script src="https://unpkg.com/@tweenjs/tween.js@18.5/dist/tween.umd.js"></script> <script src="https://unpkg.com/@tweenjs/tween.js@18.5/dist/tween.umd.js"></script>
<script src="../js/CanvasFlowmapLayer.js"></script> <script src="../js/CanvasFlowmapLayer.js"></script>
<script src="../js/centropais_functions.js"></script> <script src="../js/centropais_functions.js"></script>
<script src="../js/centropais_basemap.js"></script> <script src="../js/centropais_basemap.js"></script>
<script src="../js/grijalva_charts.js"></script> <!--<script src="../js/grijalva_charts.js"></script>-->
</body> </body>
......
public/js/centropais_basemap.js
View file @ 655d28ca
This diff is collapsed.
public/js/centropais_functions.js
View file @ 655d28ca
...@@ -84,12 +84,23 @@ d3.json("https://unpkg.com/d3-time-format@2.1.1/locale/es-MX.json").then(locale ...@@ -84,12 +84,23 @@ d3.json("https://unpkg.com/d3-time-format@2.1.1/locale/es-MX.json").then(locale
timeParse = d3.timeParse("%B_%Y"); timeParse = d3.timeParse("%B_%Y");
timeFormat = d3.timeFormat("%B_%Y"); timeFormat = d3.timeFormat("%B_%Y");
setupTimeDimensionControl(); //setupTimeDimensionControl();
// FIX: Need to remove setup and populate dates and only setup and populate map // FIX: Need to remove setup and populate dates and only setup and populate map
setupDates() /*setupDates()
.then(dates => populateDates(dates)) .then(dates => populateDates(dates))
.then(userData => setupMap(userData)) .then(userData => setupMap(userData))
.then(map => populateMap(map));*/
$("#showMap").on("click", () => {
// hide initial screen and show map
$("#startHeader").remove();
$("#initial-backdrop").remove();
$("#mainContainer")[0].style.setProperty("display", "flex", "important")
$("#mexmap").show();
setupMap()
.then(map => populateMap(map)); .then(map => populateMap(map));
});
}); });
const sortInitialDateAscending = (a, b) => { const sortInitialDateAscending = (a, b) => {
...@@ -217,7 +228,7 @@ const populateDates = (dates) => { // fill out date pickers with available dates ...@@ -217,7 +228,7 @@ const populateDates = (dates) => { // fill out date pickers with available dates
}) })
} }
const setupMap = (dates) => { const setupMap = () => {//(dates) => {
return new Promise(resolve => { return new Promise(resolve => {
// make body tag to have style height: 100% // make body tag to have style height: 100%
...@@ -236,20 +247,20 @@ const setupMap = (dates) => { ...@@ -236,20 +247,20 @@ const setupMap = (dates) => {
}); });
//let bounds = cuencaBufferMask.getBounds(); //let bounds = cuencaBufferMask.getBounds();
let southWest = L.latLng(19.88, -103.61), let southWest = L.latLng(19.87, -102.87),
northEast = L.latLng(22.63, -98.00), northEast = L.latLng(23.02, -99.31),
bounds = L.latLngBounds(southWest, northEast); bounds = L.latLngBounds(southWest, northEast);
map = L.map("mexmap", { map = L.map("mexmap", {
//center: [17.22, -92.28], //center: [17.22, -92.28],
minZoom: 7, //8 minZoom: 8,
zoom: 7, //6 zoom: 6,
attributionControl: false, attributionControl: false,
timeDimension: true, /*timeDimension: true,
timeDimensionOptions: { timeDimensionOptions: {
times: userDates, times: userDates,
currentTime: dates.min currentTime: dates.min
}, },*/
maxBounds: bounds maxBounds: bounds
}).setView([21.15, -100.94], 8); }).setView([21.15, -100.94], 8);
...@@ -356,7 +367,7 @@ const populateMap = async(mapData) => { ...@@ -356,7 +367,7 @@ const populateMap = async(mapData) => {
}) })
// Define charts with reusable components // Define charts with reusable components
indicators.map(async(indicator, index) => { /*indicators.map(async(indicator, index) => {
// indicatorVars[indicator].chart gives areaChart, perimeterChart, etc. // indicatorVars[indicator].chart gives areaChart, perimeterChart, etc.
// First, make all charts with same general options // First, make all charts with same general options
indicatorVars[indicator].chart = makeIndicatorGraph() indicatorVars[indicator].chart = makeIndicatorGraph()
...@@ -386,25 +397,13 @@ const populateMap = async(mapData) => { ...@@ -386,25 +397,13 @@ const populateMap = async(mapData) => {
// Highlight plot title according to selected option // Highlight plot title according to selected option
let option = $("#indicatorSelect").val(); // option selected from dropdrown let option = $("#indicatorSelect").val(); // option selected from dropdrown
d3.select(indicatorVars[option].container).select("svg text.title").classed("active", true); d3.select(indicatorVars[option].container).select("svg text.title").classed("active", true);
}); });*/
let map = mapData.map, let map = mapData.map,
minIndicators = mapData.minIndicators, minIndicators = mapData.minIndicators,
maxIndicators = mapData.maxIndicators; maxIndicators = mapData.maxIndicators;
let cuencaLayer = L.geoJson(null, {
style: {
stroke: true,
weight: 5,
color: "grey",
opacity: .35,
fillOpacity: 0.05
},
interactive: false
});
let cuencaBufferMask = omnivore.topojson("data/buffer_cuenca.topojson", null, cuencaLayer);
cuencaBufferMask.addTo(map);
//map.createPane("wb-Tiles"); //map.createPane("wb-Tiles");
//map.getPane("wb-Tiles").style.zIndex = 450; //map.getPane("wb-Tiles").style.zIndex = 450;
...@@ -436,7 +435,7 @@ const populateMap = async(mapData) => { ...@@ -436,7 +435,7 @@ const populateMap = async(mapData) => {
} }
});*/ });*/
timeDimensionControl.addTo(map); /*timeDimensionControl.addTo(map);
// Pass dummy geojson layer to timeDimension in order to register and sync // Pass dummy geojson layer to timeDimension in order to register and sync
timeLayer = L.timeDimension.layer.Tile(L.geoJSON(), { timeLayer = L.timeDimension.layer.Tile(L.geoJSON(), {
updateTimeDimension: true, updateTimeDimension: true,
...@@ -444,7 +443,7 @@ const populateMap = async(mapData) => { ...@@ -444,7 +443,7 @@ const populateMap = async(mapData) => {
waitForReady: true, waitForReady: true,
duration: "P1M" duration: "P1M"
}); });
timeLayer.addTo(map); timeLayer.addTo(map);*/
// FIX: comment out to avoid DB calls // FIX: comment out to avoid DB calls
// style currentTiles // style currentTiles
...@@ -470,7 +469,7 @@ const populateMap = async(mapData) => { ...@@ -470,7 +469,7 @@ const populateMap = async(mapData) => {
// setting their z-index // setting their z-index
let glmapChildren = map.getPanes().tilePane.children, let glmapChildren = map.getPanes().tilePane.children,
children = Array.from(glmapChildren); children = Array.from(glmapChildren);
children.forEach( c => c.style.zIndex = 'inherit' ); children.forEach( c => c.style.zIndex = "inherit" );
}); });
} }
......
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