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
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
...@@ -19,6 +19,7 @@ let baseLayerPromises = []; ...@@ -19,6 +19,7 @@ let baseLayerPromises = [];
currentBaseLayer = 1;*/ currentBaseLayer = 1;*/
let drawnItems; let drawnItems;
let od, flowMapLayer;
/*Object.keys(baseFileSize).forEach((name) => { /*Object.keys(baseFileSize).forEach((name) => {
if (name.split(".")[1] == "zip") { if (name.split(".")[1] == "zip") {
...@@ -661,7 +662,8 @@ let layer_agebs2005 = new L.geoJson(null, { ...@@ -661,7 +662,8 @@ let layer_agebs2005 = new L.geoJson(null, {
attribution: "", attribution: "",
// pane: "pane_agebs2005", // pane: "pane_agebs2005",
//onEachFeature: pop_ANPs, //onEachFeature: pop_ANPs,
style: style_agebs2005 style: style_agebs2005,
interactive: false
}); });
const style_agebs2010 = () => { const style_agebs2010 = () => {
...@@ -683,7 +685,8 @@ let layer_agebs2010 = new L.geoJson(null, { ...@@ -683,7 +685,8 @@ let layer_agebs2010 = new L.geoJson(null, {
attribution: "", attribution: "",
// pane: "pane_agebs2010", // pane: "pane_agebs2010",
//onEachFeature: pop_ANPs, //onEachFeature: pop_ANPs,
style: style_agebs2010 style: style_agebs2010,
interactive: false
}); });
const style_agebs2015 = () => { const style_agebs2015 = () => {
...@@ -705,7 +708,8 @@ let layer_agebs2015 = new L.geoJson(null, { ...@@ -705,7 +708,8 @@ let layer_agebs2015 = new L.geoJson(null, {
attribution: "", attribution: "",
// pane: "pane_agebs2015", // pane: "pane_agebs2015",
//onEachFeature: pop_ANPs, //onEachFeature: pop_ANPs,
style: style_agebs2015 style: style_agebs2015,
interactive: false
}); });
let crecimiento_urbano = new L.layerGroup([layer_agebs2005, layer_agebs2010, layer_agebs2015], { let crecimiento_urbano = new L.layerGroup([layer_agebs2005, layer_agebs2010, layer_agebs2015], {
...@@ -724,7 +728,7 @@ const style_centros = feature => { ...@@ -724,7 +728,7 @@ const style_centros = feature => {
weight: 0.5, //1.0, weight: 0.5, //1.0,
fill: true, fill: true,
fillOpacity: .4, fillOpacity: .4,
fillColor: getCentrosColor(feature.properties['OCUPADOS']), fillColor: getCentrosColor(feature.properties["OCUPADOS"]),
fillPattern: "stripes" fillPattern: "stripes"
} }
} }
...@@ -733,7 +737,8 @@ let layer_centros = new L.geoJson(null, { ...@@ -733,7 +737,8 @@ let layer_centros = new L.geoJson(null, {
attribution: "", attribution: "",
pane: "pane_centros", pane: "pane_centros",
//onEachFeature: pop_ANPs, //onEachFeature: pop_ANPs,
style: style_centros style: style_centros,
interactive: false
}); });
const style_hacia = feature => { const style_hacia = feature => {
...@@ -747,7 +752,7 @@ const style_hacia = feature => { ...@@ -747,7 +752,7 @@ const style_hacia = feature => {
weight: 0.5, //1.0, weight: 0.5, //1.0,
fill: true, fill: true,
fillOpacity: 0.5, fillOpacity: 0.5,
fillColor: getHaciaColor(feature.properties['PERSONAS']) fillColor: getHaciaColor(feature.properties["PERSONAS"])
} }
} }
...@@ -769,7 +774,7 @@ const style_desde = feature => { ...@@ -769,7 +774,7 @@ const style_desde = feature => {
weight: 0.5, //1.0, weight: 0.5, //1.0,
fill: true, fill: true,
fillOpacity: 0.5, fillOpacity: 0.5,
fillColor: getDesdeColor(feature.properties['PERSONAS']) fillColor: getDesdeColor(feature.properties["PERSONAS"])
} }
} }
...@@ -791,7 +796,7 @@ const style_centrosPOIC = feature => { ...@@ -791,7 +796,7 @@ const style_centrosPOIC = feature => {
weight: 0.5, //1.0, weight: 0.5, //1.0,
fill: true, fill: true,
fillOpacity: .4, fillOpacity: .4,
fillColor: getCentrosColor(feature.properties['POIC']), fillColor: getCentrosColor(feature.properties["POIC"]),
//fillPattern: "stripes" //fillPattern: "stripes"
} }
} }
...@@ -814,7 +819,7 @@ const style_haciaPOIC = feature => { ...@@ -814,7 +819,7 @@ const style_haciaPOIC = feature => {
weight: 0.5, //1.0, weight: 0.5, //1.0,
fill: true, fill: true,
fillOpacity: 0.5, fillOpacity: 0.5,
fillColor: getHaciaPOICColor(feature.properties['PERSONAS']) fillColor: getHaciaPOICColor(feature.properties["PERSONAS"])
} }
} }
...@@ -836,7 +841,7 @@ const style_desdePOIC = feature => { ...@@ -836,7 +841,7 @@ const style_desdePOIC = feature => {
weight: 0.5, //1.0, weight: 0.5, //1.0,
fill: true, fill: true,
fillOpacity: 0.5, fillOpacity: 0.5,
fillColor: getDesdePOICColor(feature.properties['PERSONAS']) fillColor: getDesdePOICColor(feature.properties["PERSONAS"])
} }
} }
...@@ -847,7 +852,7 @@ let layer_desdePOIC = new L.geoJson(null, { ...@@ -847,7 +852,7 @@ let layer_desdePOIC = new L.geoJson(null, {
style: style_desdePOIC style: style_desdePOIC
}); });
const styleDrawnItems = () => { /*const styleDrawnItems = () => {
let currentId = 0; let currentId = 0;
drawnItems.eachLayer(l => { drawnItems.eachLayer(l => {
l.feature.properties.id = currentId; l.feature.properties.id = currentId;
...@@ -881,7 +886,7 @@ const toggleButtons = () => { ...@@ -881,7 +886,7 @@ const toggleButtons = () => {
b.classList.remove("draw-control-disabled"); b.classList.remove("draw-control-disabled");
} }
}) })
} }*/
const makeBaseMap = () => { const makeBaseMap = () => {
createPane("pane_munis", 402); createPane("pane_munis", 402);
...@@ -909,6 +914,7 @@ const makeBaseMap = () => { ...@@ -909,6 +914,7 @@ const makeBaseMap = () => {
createPane("pane_desdePOIC", 414); createPane("pane_desdePOIC", 414);
createPane("pane_haciaPOIC", 415); createPane("pane_haciaPOIC", 415);
createPane("pane_agebs", 421); createPane("pane_agebs", 421);
createPane("pane_flujosDesde", 422);
/*$("#basemap-fileLoad").html("Cargando capa 1 de " + baseLayerCounter + "<br>" + /*$("#basemap-fileLoad").html("Cargando capa 1 de " + baseLayerCounter + "<br>" +
"<span class=\"progress\"><span id=\"baseBar\" class=\"progress-bar progress-bar-striped progress-bar-animated\" role=\"progressbar\" style=\"width: 0%;\" aria-valuenow=\"0\" aria-valuemin=\"0\" aria-valuemax=\"100\"></span>" + "<span class=\"progress\"><span id=\"baseBar\" class=\"progress-bar progress-bar-striped progress-bar-animated\" role=\"progressbar\" style=\"width: 0%;\" aria-valuenow=\"0\" aria-valuemin=\"0\" aria-valuemax=\"100\"></span>" +
...@@ -922,7 +928,8 @@ const makeBaseMap = () => { ...@@ -922,7 +928,8 @@ const makeBaseMap = () => {
zip2Lyr("../centropais/data/agebs_urbanos2005.zip", agebs2005, layer_agebs2005); zip2Lyr("../centropais/data/agebs_urbanos2005.zip", agebs2005, layer_agebs2005);
zip2Lyr("../centropais/data/expansion_agebs2010.zip", agebs2010, layer_agebs2010); zip2Lyr("../centropais/data/expansion_agebs2010.zip", agebs2010, layer_agebs2010);
zip2Lyr("../centropais/data/expansion_agebs2015.zip", agebs2015, layer_agebs2015); zip2Lyr("../centropais/data/expansion_agebs2015.zip", agebs2015, layer_agebs2015);
layerControl.addOverlay(crecimiento_urbano, "Crecimiento urbano 2005-2015<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<svg height=\"15\" width=\"15\"><path d=\"M0 0 L15 0 L15 10 L0 10 Z \" x=\"5\" y=\"5\" fill=\"#730000\" stroke=\"#730000\" stroke-dasharray=\" \"></rect></svg> Expansión del área de los AGEB's urbanos 2015<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<svg height=\"15\" width=\"15\"><path d=\"M0 0 L15 0 L15 10 L0 10 Z \" x=\"5\" y=\"5\" fill=\"#ffaa00\" stroke = \"#ffaa00\" stroke-dasharray=\" \"></rect></svg> Expansión del área de los AGEB's urbanos 2010<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<svg height = \"15\" width=\"15\"><path d=\"M0 0 L15 0 L15 10 L0 10 Z \" x=\"5\" y=\"5\" fill=\"#ffffd3\" stroke = \"#d6c996\" stroke-dasharray=\" \"></rect></svg> Área ocupada por los AGEBS's urbanos en 2005"); layerControl.addOverlay(crecimiento_urbano, "Crecimiento urbano 2005-2015<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<svg height=\"15\" width=\"15\"><path d=\"M0 0 L15 0 L15 10 L0 10 Z \" x=\"5\" y=\"5\" fill=\"#730000\" stroke=\"#730000\" stroke-dasharray=\" \"></rect></svg> Expansión del área de los AGEB's urbanos 2015<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<svg height=\"15\" width=\"15\"><path d=\"M0 0 L15 0 L15 10 L0 10 Z \" x=\"5\" y=\"5\" fill=\"#ffaa00\" stroke = \"#ffaa00\" stroke-dasharray=\" \"></rect></svg> Expansión del área de los AGEB's urbanos 2010<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<svg height = \"15\" width=\"15\"><path d=\"M0 0 L15 0 L15 10 L0 10 Z \" x=\"5\" y=\"5\" fill=\"#ffffd3\" stroke = \"#d6c996\" stroke-dasharray=\" \"></rect></svg> Área ocupada por los AGEBS's urbanos en 2005");
crecimiento_urbano.addTo(map);
zip2Lyr("../centropais/data/industria_automotriz_2010.zip", auto2010, layer_auto2010); zip2Lyr("../centropais/data/industria_automotriz_2010.zip", auto2010, layer_auto2010);
layerControl.addOverlay(layer_auto2010, "&nbsp; <i class=\"fa fa-desechos\" style=\"color:#00799f;margin-top:3px;margin-left:0px;font-size: 8px;opacity:0.75;\"></i>&nbsp;&nbsp;Unidades económicas en la industria automotriz 2010 "); layerControl.addOverlay(layer_auto2010, "&nbsp; <i class=\"fa fa-desechos\" style=\"color:#00799f;margin-top:3px;margin-left:0px;font-size: 8px;opacity:0.75;\"></i>&nbsp;&nbsp;Unidades económicas en la industria automotriz 2010 ");
zip2Lyr("../centropais/data/industria_automotriz_2014.zip", auto2014, layer_auto2014); zip2Lyr("../centropais/data/industria_automotriz_2014.zip", auto2014, layer_auto2014);
...@@ -937,6 +944,7 @@ const makeBaseMap = () => { ...@@ -937,6 +944,7 @@ const makeBaseMap = () => {
layerControl.addOverlay(layer_tecnologia2018, "&nbsp; <i class=\"fa fa-desechos\" style=\"color:#c70039;margin-top:3px;margin-left:0px;font-size: 8px;opacity:0.75;\"></i>&nbsp;&nbsp;Unidades económicas en la industria de tecnología media-alta 2018 "); layerControl.addOverlay(layer_tecnologia2018, "&nbsp; <i class=\"fa fa-desechos\" style=\"color:#c70039;margin-top:3px;margin-left:0px;font-size: 8px;opacity:0.75;\"></i>&nbsp;&nbsp;Unidades económicas en la industria de tecnología media-alta 2018 ");
zip2Lyr("../centropais/data/Centros_de_mercado_de_ocupados.zip", centros, layer_centros); zip2Lyr("../centropais/data/Centros_de_mercado_de_ocupados.zip", centros, layer_centros);
layerControl.addOverlay(layer_centros, "Centros de mercado <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<svg height=\"15\" width=\"15\"><path d=\"M0 0 L15 0 L15 10 L0 10 Z \" x=\"5\" y=\"5\" fill=\"#d1ff73\" stroke=\"#aaff00\" stroke-dasharray=\" \"></rect></svg> Terciario<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<svg height=\"15\" width=\"15\"><path d=\"M0 0 L15 0 L15 10 L0 10 Z \" x=\"5\" y=\"5\" fill=\"#8e1973\" stroke = \"#a80084\" stroke-dasharray=\" \"></rect></svg> Secundario<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<svg height = \"15\" width=\"15\"><path d=\"M0 0 L15 0 L15 10 L0 10 Z \" x=\"5\" y=\"5\" fill=\"#ff5500\" stroke = \"#e60000\" stroke-dasharray=\" \"></rect></svg> Primario"); layerControl.addOverlay(layer_centros, "Centros de mercado <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<svg height=\"15\" width=\"15\"><path d=\"M0 0 L15 0 L15 10 L0 10 Z \" x=\"5\" y=\"5\" fill=\"#d1ff73\" stroke=\"#aaff00\" stroke-dasharray=\" \"></rect></svg> Terciario<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<svg height=\"15\" width=\"15\"><path d=\"M0 0 L15 0 L15 10 L0 10 Z \" x=\"5\" y=\"5\" fill=\"#8e1973\" stroke = \"#a80084\" stroke-dasharray=\" \"></rect></svg> Secundario<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<svg height = \"15\" width=\"15\"><path d=\"M0 0 L15 0 L15 10 L0 10 Z \" x=\"5\" y=\"5\" fill=\"#ff5500\" stroke = \"#e60000\" stroke-dasharray=\" \"></rect></svg> Primario");
layer_centros.addTo(map);
zip2Lyr("../centropais/data/hacia.zip", hacia, layer_hacia); zip2Lyr("../centropais/data/hacia.zip", hacia, layer_hacia);
layerControl.addOverlay(layer_hacia, "Número de ocupados <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<svg height=\"15\" width=\"15\"><path d=\"M0 0 L15 0 L15 10 L0 10 Z \" x=\"5\" y=\"5\" fill=\"#e3fcd9\" stroke=\"#6e6e6e\" stroke-dasharray=\" \"></rect></svg> 0 - 1000<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<svg height=\"15\" width=\"15\"><path d=\"M0 0 L15 0 L15 10 L0 10 Z \" x=\"5\" y=\"5\" fill=\"#b4d787\" stroke = \"#6e6e6e\" stroke-dasharray=\" \"></rect></svg> 1001 - 2000<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<svg height = \"15\" width=\"15\"><path d=\"M0 0 L15 0 L15 10 L0 10 Z \" x=\"5\" y=\"5\" fill=\"#4bc44f\" stroke = \"#6e6e6e\" stroke-dasharray=\" \"></rect></svg> 2001 - 6000 <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<svg height = \"15\" width=\"15\"><path d=\"M0 0 L15 0 L15 10 L0 10 Z \" x=\"5\" y=\"5\" fill=\"#218542\" stroke = \"#6e6e6e\" stroke-dasharray=\" \"></rect></svg> 6001 - 32000 <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<svg height = \"15\" width=\"15\"><path d=\"M0 0 L15 0 L15 10 L0 10 Z \" x=\"5\" y=\"5\" fill=\"#00451c\" stroke = \"#6e6e6e\" stroke-dasharray=\" \"></rect></svg> 32001 - 53300"); layerControl.addOverlay(layer_hacia, "Número de ocupados <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<svg height=\"15\" width=\"15\"><path d=\"M0 0 L15 0 L15 10 L0 10 Z \" x=\"5\" y=\"5\" fill=\"#e3fcd9\" stroke=\"#6e6e6e\" stroke-dasharray=\" \"></rect></svg> 0 - 1000<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<svg height=\"15\" width=\"15\"><path d=\"M0 0 L15 0 L15 10 L0 10 Z \" x=\"5\" y=\"5\" fill=\"#b4d787\" stroke = \"#6e6e6e\" stroke-dasharray=\" \"></rect></svg> 1001 - 2000<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<svg height = \"15\" width=\"15\"><path d=\"M0 0 L15 0 L15 10 L0 10 Z \" x=\"5\" y=\"5\" fill=\"#4bc44f\" stroke = \"#6e6e6e\" stroke-dasharray=\" \"></rect></svg> 2001 - 6000 <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<svg height = \"15\" width=\"15\"><path d=\"M0 0 L15 0 L15 10 L0 10 Z \" x=\"5\" y=\"5\" fill=\"#218542\" stroke = \"#6e6e6e\" stroke-dasharray=\" \"></rect></svg> 6001 - 32000 <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<svg height = \"15\" width=\"15\"><path d=\"M0 0 L15 0 L15 10 L0 10 Z \" x=\"5\" y=\"5\" fill=\"#00451c\" stroke = \"#6e6e6e\" stroke-dasharray=\" \"></rect></svg> 32001 - 53300");
zip2Lyr("../centropais/data/desde.zip", desde, layer_desde); zip2Lyr("../centropais/data/desde.zip", desde, layer_desde);
...@@ -955,140 +963,173 @@ const makeBaseMap = () => { ...@@ -955,140 +963,173 @@ const makeBaseMap = () => {
layerControl.addOverlay(layer_limiteMunicipal, "<img src=\"http://gaia.inegi.org.mx/NLB/tunnel/wms/wms61?version=1.3.0&service=WMS&request=GetLegendGraphic&sld_version=1.1.0&layer=c101&format=image/png&STYLE=default\" alt=\"Límite municipal\"/>"); layerControl.addOverlay(layer_limiteMunicipal, "<img src=\"http://gaia.inegi.org.mx/NLB/tunnel/wms/wms61?version=1.3.0&service=WMS&request=GetLegendGraphic&sld_version=1.1.0&layer=c101&format=image/png&STYLE=default\" alt=\"Límite municipal\"/>");
layerControl.addOverlay(layer_limiteEstatal, "Límite estatal <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src=\"http://gaia.inegi.org.mx/NLB/tunnel/wms/wms61?version=1.3.0&service=WMS&request=GetLegendGraphic&sld_version=1.1.0&layer=c100&format=image/png&STYLE=default\" alt=\"Límite Estatal\"/>"); layerControl.addOverlay(layer_limiteEstatal, "Límite estatal <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src=\"http://gaia.inegi.org.mx/NLB/tunnel/wms/wms61?version=1.3.0&service=WMS&request=GetLegendGraphic&sld_version=1.1.0&layer=c100&format=image/png&STYLE=default\" alt=\"Límite Estatal\"/>");
$.getJSON('data/viajes_ocupados_desde.json', data => { $.getJSON("data/od.geojson", data => {
let flowMapLayer = L.canvasFlowmapLayer(data, { od = data;
});
$.getJSON("data/viajes_ocupados_desde.geojson", data => {
flowMapLayer = L.canvasFlowmapLayer(data, {
// Define origins and destination from json values // Define origins and destination from json values
originAndDestinationFieldIds: { originAndDestinationFieldIds: {
originUniqueIdField: 'id_orig', originUniqueIdField: "id_orig",
originGeometry: { originGeometry: {
x: 'xo', x: "xo",
y: 'yo' y: "yo"
}, },
destinationUniqueIdField: 'id_dest', destinationUniqueIdField: "id_dest",
destinationGeometry: { destinationGeometry: {
x: 'xd', x: "xd",
y: 'yd' y: "yd"
} }
}, },
// Line styles // Line styles
canvasBezierStyle: { canvasBezierStyle: {
type: 'classBreaks', type: "classBreaks",
field: 'viajes', field: "viajes",
classBreakInfos: [{ classBreakInfos: [{
classMinValue: 0, classMinValue: 0,
classMaxValue: 1000, classMaxValue: 1000,
symbol: { symbol: {
strokeStyle: '#00c5ff', strokeStyle: "#00c5ff",
lineWidth: 0.5, lineWidth: 0.5,
lineCap: 'round', lineCap: "round",
shadowColor: '#00c5ff', shadowColor: "#00c5ff",
shadowBlur: 1.5 shadowBlur: 1.5
} }
}, { }, {
classMinValue: 1001, classMinValue: 1001,
classMaxValue: 2000, classMaxValue: 2000,
symbol: { symbol: {
strokeStyle: '#008fdc', strokeStyle: "#008fdc",
lineWidth: 1.5, lineWidth: 1.5,
lineCap: 'round', lineCap: "round",
shadowColor: '#008fdc', shadowColor: "#008fdc",
shadowBlur: 1.5 shadowBlur: 1.5
} }
}, { }, {
classMinValue: 2001, classMinValue: 2001,
classMaxValue: 6000, classMaxValue: 6000,
symbol: { symbol: {
strokeStyle: '#005ce6', strokeStyle: "#005ce6",
lineWidth: 2, lineWidth: 2,
lineCap: 'round', lineCap: "round",
shadowColor: '#005ce6', shadowColor: "#005ce6",
shadowBlur: 1.5 shadowBlur: 1.5
} }
}, { }, {
classMinValue: 6001, classMinValue: 6001,
classMaxValue: 7200, classMaxValue: 7200,
symbol: { symbol: {
strokeStyle: '#4c0073', strokeStyle: "#4c0073",
lineWidth: 10, lineWidth: 10,
lineCap: 'round', lineCap: "round",
shadowColor: '#4c0073', shadowColor: "#4c0073",
shadowBlur: 1.5 shadowBlur: 1.5
} }
}] }]
}, },
// Animated line styles // Animated line styles
animatedCanvasBezierStyle: { animatedCanvasBezierStyle: {
type: 'classBreaks', type: "classBreaks",
field: 'viajes', field: "viajes",
classBreakInfos: [{ classBreakInfos: [{
classMinValue: 0, classMinValue: 0,
classMaxValue: 1000, classMaxValue: 1000,
symbol: { symbol: {
strokeStyle: '#00c5ff', strokeStyle: "#00c5ff",
lineWidth: 0.5, lineWidth: 0.5,
lineDashOffsetSize: 4, lineDashOffsetSize: 4,
lineCap: 'round', lineCap: "round",
shadowColor: '#00c5ff', shadowColor: "#00c5ff",
shadowBlur: 1.5 shadowBlur: 1.5
} }
}, { }, {
classMinValue: 1001, classMinValue: 1001,
classMaxValue: 2000, classMaxValue: 2000,
symbol: { symbol: {
strokeStyle: '#008fdc', strokeStyle: "#008fdc",
lineWidth: 1.5, lineWidth: 1.5,
lineDashOffsetSize: 4, lineDashOffsetSize: 4,
lineCap: 'round', lineCap: "round",
shadowColor: '#008fdc', shadowColor: "#008fdc",
shadowBlur: 1.5 shadowBlur: 1.5
} }
}, { }, {
classMinValue: 2001, classMinValue: 2001,
classMaxValue: 6000, classMaxValue: 6000,
symbol: { symbol: {
strokeStyle: '#005ce6', strokeStyle: "#005ce6",
lineWidth: 4, lineWidth: 4,
lineDashOffsetSize: 4, lineDashOffsetSize: 4,
lineCap: 'round', lineCap: "round",
shadowColor: '#005ce6', shadowColor: "#005ce6",
shadowBlur: 1.5 shadowBlur: 1.5
} }
}, { }, {
classMinValue: 6001, classMinValue: 6001,
classMaxValue: 7200, classMaxValue: 7200,
symbol: { symbol: {
strokeStyle: '#4c0073', strokeStyle: "#4c0073",
lineWidth: 15, lineWidth: 15,
lineDashOffsetSize: 4, lineDashOffsetSize: 4,
lineCap: 'round', lineCap: "round",
shadowColor: '#4c0073', shadowColor: "#4c0073",
shadowBlur: 1.5 shadowBlur: 1.5
} }
}] }]
}, },
// some custom options // some custom options
pathDisplayMode: 'all', pathDisplayMode: "all",
animationStarted: true, animationStarted: true,
//animationEasingFamily: 'Cubic', //animationEasingFamily: "Cubic",
//animationEasingType: 'In', //animationEasingType: "In",
animationEasingFamily: 'Linear', animationEasingFamily: "Linear",
animationEasingType: 'None', animationEasingType: "None",
animationDuration: 2000 animationDuration: 2000,
pane: "pane_flujosDesde" // FIXME: only lines are created in pane, not dots
}).bindTooltip( layer => { // what to display on hover
let coords = layer.getLatLng();
let label = od.features.filter( f => f.properties.X == coords.lng && f.properties.Y == coords.lat);
return label[0].properties.CMCP;
}); });
flowMapLayer.addTo(map); flowMapLayer.addTo(map);
// hack to get origins and destinations in desired map pane
$(".leaflet-pane.leaflet-overlay-pane canvas").detach().appendTo($(".leaflet-pane_flujosDesde-pane"));
// Define what happens when user clicks dots // Define what happens when user clicks dots
flowMapLayer.on('click', e => { flowMapLayer.on("click", e => {
// clear paths
flowMapLayer.clearAllPathSelections();
let origins = "";
// select and draw flows from origins
if (e.sharedOriginFeatures.length) { if (e.sharedOriginFeatures.length) {
flowMapLayer.selectFeaturesForPathDisplay(e.sharedOriginFeatures, 'SELECTION_NEW'); flowMapLayer.selectFeaturesForPathDisplay(e.sharedOriginFeatures, "SELECTION_NEW");
} /*e.sharedOriginFeatures.forEach( origin => {
if (e.sharedDestinationFeatures.length) { origins += `${origin.properties.muni_origen} &rarr; ${origin.properties.muni_destino}: ${origin.properties.viajes} viajes <br>`;
flowMapLayer.selectFeaturesForPathDisplay(e.sharedDestinationFeatures, 'SELECTION_NEW'); });*/
} }
// select and add flows toward those origins, i.e., for dots that are both origins and destinations
let dests = flowMapLayer.originAndDestinationGeoJsonPoints.features.filter( f => f.geometry.coordinates[0] === e.latlng.lng && f.geometry.coordinates[1] === e.latlng.lat);
flowMapLayer.selectFeaturesForPathDisplay(dests, "SELECTION_ADD");
dests.forEach( dest => {
//origins += `${dest.properties.muni_origen} &rarr; ${dest.properties.muni_destino}: ${dest.properties.viajes} viajes <br>`;
origins += `<tr><td>${dest.properties.muni_origen}</td><td>${dest.properties.muni_destino}</td><td>${dest.properties.viajes}</td></tr>`;
});
$("#tblViajesDesde tbody").html(origins);
// if dots are only destinations, add paths when clicked on
/*if (e.sharedDestinationFeatures.length) {
flowMapLayer.selectFeaturesForPathDisplay(e.sharedDestinationFeatures, "SELECTION_NEW");
}*/
});
// reset to all flows displayed
$("#resetFlows").on("click", () => {
flowMapLayer.selectFeaturesForPathDisplay(flowMapLayer.originAndDestinationGeoJsonPoints.features, "SELECTION_NEW");
$("#tblViajesDesde tbody").html("");
}); });
}); });
// Localize Leaflet.Draw texts /* // Localize Leaflet.Draw texts
L.drawLocal = { L.drawLocal = {
draw: { draw: {
toolbar: { toolbar: {
...@@ -1289,4 +1330,5 @@ const makeBaseMap = () => { ...@@ -1289,4 +1330,5 @@ const makeBaseMap = () => {
// after editing shape, update chart with data for polygons contained inside it // after editing shape, update chart with data for polygons contained inside it
updateCharts(); updateCharts();
}); });
*/
} }
\ No newline at end of file
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