Skip to content

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

Upadte folder organization. Fix API call base URLs

parent cda79300
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 188 additions and 254 deletions
public/fordecyt_2019/index.html
View file @ 1eefd883
...@@ -6,23 +6,23 @@ ...@@ -6,23 +6,23 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Proyecto FORDECyT 2018 - 10</title> <title>Proyecto FORDECyT 2018 - 10</title>
<link rel="stylesheet" type="text/css" href="../css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.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"> integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="../css/cover_style.css"> <link rel="stylesheet" type="text/css" href="css/cover_style.css">
<link rel="icon" href="../img/monitoreo.png" sizes="16x16"> <link rel="icon" href="img/monitoreo.png" sizes="16x16">
</head> </head>
<body> <body>
<nav class="navbar navbar-expand-lg navbar-light bg-light sb-navbar"> <nav class="navbar navbar-expand-lg navbar-light bg-light sb-navbar">
<div class="container"> <div class="container">
<a class="navbar-brand" href="http://www.centrogeo.org.mx/"> <a class="navbar-brand" href="http://www.centrogeo.org.mx/">
<img src="../img/centrogeo.png" height="70" alt="CentroGeo"> <img src="img/centrogeo.png" height="70" alt="CentroGeo">
</a> </a>
<a class="mr-sm-2" href="http://conacyt.gob.mx/"> <a class="mr-sm-2" href="http://conacyt.gob.mx/">
<img src="../img/conacyt.png" height="70" alt="CONACyT"> <img src="img/conacyt.png" height="70" alt="CONACyT">
</a> </a>
</nav> </nav>
...@@ -57,12 +57,12 @@ ...@@ -57,12 +57,12 @@
<div class="card-body"> <div class="card-body">
<div class="hovereffect zoom"> <div class="hovereffect zoom">
<img class="card-img" <img class="card-img"
src="../img/sumidero.jpg" alt="Ca&ntilde;&oacute;n del Sumidero"> src="img/sumidero.jpg" alt="Ca&ntilde;&oacute;n del Sumidero">
<span class="photo-credit">Foto: Gabriela L&oacute;pez</span> <span class="photo-credit">Foto: Gabriela L&oacute;pez</span>
<div class="overlay"> <div class="overlay">
<a class="info" href="../grijalva"> <a class="info" href="grijalva/">
<img class="hoverimg mx-auto d-block" src="../img/cuenca.png" width="325px"> <img class="hoverimg mx-auto d-block" src="img/cuenca.png" width="325px">
<span class="btn btn-primary hoverbtn" href="../grijalva" role="button">Visitar <span class="btn btn-primary hoverbtn" href="grijalva/" role="button">Visitar
sitio</span> sitio</span>
<br><br> <br><br>
</a> </a>
...@@ -77,12 +77,12 @@ ...@@ -77,12 +77,12 @@
</div> </div>
<div class="card-body"> <div class="card-body">
<div class="hovereffect zoom"> <div class="hovereffect zoom">
<img class="card-img" src="../img/centropais.jpg" alt="CMCP"> <img class="card-img" src="img/centropais.jpg" alt="CMCP">
<span class="photo-credit">Foto: Lucy Nieto</span> <span class="photo-credit">Foto: Lucy Nieto</span>
<div class="overlay"> <div class="overlay">
<a class="info" href="../centropais"> <a class="info" href="centropais/">
<img class="hoverimg mx-auto d-block" src="../img/cmcp.png" width="325px"> <img class="hoverimg mx-auto d-block" src="img/cmcp.png" width="325px">
<span class="btn btn-primary hoverbtn" href="../centropais" role="button">Visitar <span class="btn btn-primary hoverbtn" href="centropais/" role="button">Visitar
sitio</span> sitio</span>
<br><br> <br><br>
</a> </a>
...@@ -95,7 +95,7 @@ ...@@ -95,7 +95,7 @@
<footer class="pt-4 my-md-5 pt-md-5 border-top"> <footer class="pt-4 my-md-5 pt-md-5 border-top">
<div class="row"> <div class="row">
<div class="col-12 col-md"> <div class="col-12 col-md">
<img class="mb-2" src="../img/geoint.png" alt="GeoInt" height="70px"> <img class="mb-2" src="img/geoint.png" alt="GeoInt" height="70px">
<small class="d-block mb-3 text-muted">&copy; 2019</small> <small class="d-block mb-3 text-muted">&copy; 2019</small>
</div> </div>
<div class="col-6 col-md"> <div class="col-6 col-md">
......
public/js/grijalva_charts.js → public/fordecyt_2019/js/grijalva_charts.js
View file @ 1eefd883
...@@ -26,8 +26,9 @@ const getData = async () => { ...@@ -26,8 +26,9 @@ const getData = async () => {
data[indicator].push({name: `${indicator}0`, values: []}); data[indicator].push({name: `${indicator}0`, values: []});
}); });
const userFilePromises = userFiles.map( async monthYear => { const baseUrl = new URL(`/data`, window.location.href).href;
let queryDB = `../data/query/${monthYear}?columns=${queryColumns.join(",")}`; const userFilePromises = userFiles.map( async monthYear => {
let queryDB = `${baseUrl}/query/${monthYear}?columns=${queryColumns.join(",")}`;
const dbData = await d3.json(queryDB); const dbData = await d3.json(queryDB);
return {date: timeParse(monthYear), value: dbData[0]}; return {date: timeParse(monthYear), value: dbData[0]};
}); });
...@@ -56,6 +57,8 @@ const getDataInSelection = async () => { ...@@ -56,6 +57,8 @@ const getDataInSelection = async () => {
data[indicator] = []; data[indicator] = [];
}); });
const baseUrl = new URL(`/data`, window.location.href).href;
// Convert drawn items to GeoJSON and check what's inside each one of them // Convert drawn items to GeoJSON and check what's inside each one of them
const drawnItemPromises = drawnItems.toGeoJSON().features.map( async (item, i) => { const drawnItemPromises = drawnItems.toGeoJSON().features.map( async (item, i) => {
// set SRID fro drawn features // set SRID fro drawn features
...@@ -67,7 +70,7 @@ const getDataInSelection = async () => { ...@@ -67,7 +70,7 @@ const getDataInSelection = async () => {
let filter = `ST_Intersects(geom, (SELECT ST_Multi(ST_GeomFromGeoJSON('${JSON.stringify(geojson.features[i].geometry)}') ) ) )` let filter = `ST_Intersects(geom, (SELECT ST_Multi(ST_GeomFromGeoJSON('${JSON.stringify(geojson.features[i].geometry)}') ) ) )`
const userFilePromises = userFiles.map(async monthYear => { const userFilePromises = userFiles.map(async monthYear => {
let queryData = `../data/query/${monthYear}?columns=${queryColumns.join(",")}&filter=${filter}&group=1%3D1`; let queryData = `${baseUrl}/query/${monthYear}?columns=${queryColumns.join(",")}&filter=${filter}&group=1%3D1`;
const selectionQuery = await d3.json(queryData); const selectionQuery = await d3.json(queryData);
return {date: timeParse(monthYear), value: selectionQuery[0]}; return {date: timeParse(monthYear), value: selectionQuery[0]};
}); });
......
public/js/grijalva_functions.js → public/fordecyt_2019/js/grijalva_functions.js
View file @ 1eefd883
...@@ -99,7 +99,8 @@ const sortInitialDateAscending = (a, b) => { ...@@ -99,7 +99,8 @@ const sortInitialDateAscending = (a, b) => {
// query available dates on DB // query available dates on DB
const setupDates = () => { const setupDates = () => {
return new Promise( resolve => { return new Promise( resolve => {
let layersQuery = "../data/list_layers"; const baseUrl = new URL(`/data`, window.location.href).href;
let layersQuery = `${baseUrl}/list_layers`;
d3.json(layersQuery).then(layers => { d3.json(layersQuery).then(layers => {
layers.forEach(layer => { layers.forEach(layer => {
dateArray.push(timeParse(layer.f_table_name)); // convert filenames to dates dateArray.push(timeParse(layer.f_table_name)); // convert filenames to dates
...@@ -331,7 +332,8 @@ const queryFiles = () => { ...@@ -331,7 +332,8 @@ const queryFiles = () => {
const getMinMax = table => { const getMinMax = table => {
return new Promise( resolve => { return new Promise( resolve => {
let minmaxQuery = `../data/query/${table}?columns=${cols.join(", ")}`; const baseUrl = new URL(`/data`, window.location.href).href;
let minmaxQuery = `${baseUrl}/query/${table}?columns=${cols.join(", ")}`;
d3.json(minmaxQuery).then( minmax => { d3.json(minmaxQuery).then( minmax => {
resolve(minmax[0]); resolve(minmax[0]);
}); });
......
public/riesgos/index.html → public/fordecyt_2019/riesgos/index.html
View file @ 1eefd883
...@@ -18,8 +18,6 @@ ...@@ -18,8 +18,6 @@
<link rel="stylesheet" type="text/css" href="../css/riesgos/style.css"> <link rel="stylesheet" type="text/css" href="../css/riesgos/style.css">
<link rel="stylesheet" type="text/css" 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">
<!--<link rel="stylesheet" href="./css/map.css" type="text/css">-->
</head> </head>
<body> <body>
...@@ -141,7 +139,6 @@ ...@@ -141,7 +139,6 @@
<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 src="https://unpkg.com/leaflet.vectorgrid@latest/dist/Leaflet.VectorGrid.bundled.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/nezasa/iso8601-js-period/master/iso8601.min.js"></script> <script type="text/javascript" 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 type="text/javascript" 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>
...@@ -150,78 +147,10 @@ ...@@ -150,78 +147,10 @@
<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 type="text/javascript" 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 src="https://npmcdn.com/@turf/turf/turf.min.js"></script>
<script type="text/javascript" src="../js/jszip.min.js"></script> <script type="text/javascript" src="../js/jszip.min.js"></script>
<script src="../js/grijalva_functions.js"></script> <script src="../js/grijalva_functions.js"></script>
<script src="../js/riesgos_basemap.js"></script> <script src="../js/riesgos_basemap.js"></script>
<script src="../js/grijalva_charts.js"></script> <script src="../js/grijalva_charts.js"></script>
<!--<script>
var map = new mapboxgl.Map({
'container': 'mapmex',
'zoom': 7,
'center': [-92.28, 17.22], // cuenca Grijalva
'style': {
'version': 8,
'sources': {
'carto-dark': {
'type': 'raster',
'tiles': [
"http://a.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png",
"http://b.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png",
"http://c.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png",
"http://d.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png"
]
}
},
'layers': [{
'id': 'carto-dark-layer',
'type': 'raster',
'source': 'carto-dark',
'minzoom': 0,
'maxzoom': 22
}]
}
});
map.addControl(new mapboxgl.NavigationControl());
map.on('load', function() {
map.addLayer({
id: 'abril_2018-tiles',
source: {
type: 'vector',
// "http://localhost:8090/data/" + monthYear + "/mvt/{z}/{x}/{y}?geom_column=geom&columns=" + indicators.join();
tiles: ['http://localhost:8090/data/abril_2018/mvt/{z}/{x}/{y}?geom_column=geom&columns=df'],
maxzoom: 14,
minzoom: 5
},
'source-layer': 'abril_2018',
type: 'fill',
minzoom: 5,
'paint': {
'fill-opacity': 0.7,
'fill-color': [
'interpolate',
['linear'],
['get', 'df'],
1, 'rgba(255, 0, 0, 0.5)', // red
1.3, 'rgba(0, 255, 0, 0.5)', // green
],
'fill-outline-color': [
'interpolate',
['linear'],
['get', 'df'],
1, 'rgba(255, 0, 0, 0.6)', // red
1.3, 'rgba(0, 255, 0, 0.6)', // green
]
}
})
})
</script>-->
</body> </body>
</html> </html>
\ 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