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 @@
<html>
<head>
<meta charset='utf-8' />
<meta charset="utf-8" />
<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' />
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<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 href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.0/mapbox-gl.css' rel='stylesheet' />
<link rel="stylesheet" type="text/css" href="../css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="../js//Leaflet.BeautifyIcon/leaflet-beautify-marker-icon.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" 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://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" type="text/css" href="../css/style.css">
<link rel="stylesheet" href="../css/style.css">
<link rel="icon" href="../img/grijalva.png" sizes="16x16">
</head>
......@@ -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
en las &uacute;ltimas d&eacute;cadas.</p>
<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="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" />
</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>
</div>-->
<button type="button" class="btn btn-primary btn-lg" id="showMap">Entrar</button>
</div>
</div>
</div>
......@@ -78,7 +76,19 @@
<div class="loader"></div>
<div class="row h-50 border-bottom">
<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 class="col-6">
<div id="perimeter-graph"></div>
......@@ -135,29 +145,28 @@
</div>
<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="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</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 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 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://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 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 type="text/javascript" src="../js/jszip.min.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>
<script src="../js/centropais_functions.js"></script>
<script src="../js/centropais_basemap.js"></script>
<script src="../js/grijalva_charts.js"></script>
<!--<script src="../js/grijalva_charts.js"></script>-->
</body>
......
public/js/centropais_basemap.js
View file @ 655d28ca
......@@ -19,6 +19,7 @@ let baseLayerPromises = [];
currentBaseLayer = 1;*/
let drawnItems;
let od, flowMapLayer;
/*Object.keys(baseFileSize).forEach((name) => {
if (name.split(".")[1] == "zip") {
......@@ -661,7 +662,8 @@ let layer_agebs2005 = new L.geoJson(null, {
attribution: "",
// pane: "pane_agebs2005",
//onEachFeature: pop_ANPs,
style: style_agebs2005
style: style_agebs2005,
interactive: false
});
const style_agebs2010 = () => {
......@@ -683,7 +685,8 @@ let layer_agebs2010 = new L.geoJson(null, {
attribution: "",
// pane: "pane_agebs2010",
//onEachFeature: pop_ANPs,
style: style_agebs2010
style: style_agebs2010,
interactive: false
});
const style_agebs2015 = () => {
......@@ -705,7 +708,8 @@ let layer_agebs2015 = new L.geoJson(null, {
attribution: "",
// pane: "pane_agebs2015",
//onEachFeature: pop_ANPs,
style: style_agebs2015
style: style_agebs2015,
interactive: false
});
let crecimiento_urbano = new L.layerGroup([layer_agebs2005, layer_agebs2010, layer_agebs2015], {
......@@ -724,7 +728,7 @@ const style_centros = feature => {
weight: 0.5, //1.0,
fill: true,
fillOpacity: .4,
fillColor: getCentrosColor(feature.properties['OCUPADOS']),
fillColor: getCentrosColor(feature.properties["OCUPADOS"]),
fillPattern: "stripes"
}
}
......@@ -733,7 +737,8 @@ let layer_centros = new L.geoJson(null, {
attribution: "",
pane: "pane_centros",
//onEachFeature: pop_ANPs,
style: style_centros
style: style_centros,
interactive: false
});
const style_hacia = feature => {
......@@ -747,7 +752,7 @@ const style_hacia = feature => {
weight: 0.5, //1.0,
fill: true,
fillOpacity: 0.5,
fillColor: getHaciaColor(feature.properties['PERSONAS'])
fillColor: getHaciaColor(feature.properties["PERSONAS"])
}
}
......@@ -769,7 +774,7 @@ const style_desde = feature => {
weight: 0.5, //1.0,
fill: true,
fillOpacity: 0.5,
fillColor: getDesdeColor(feature.properties['PERSONAS'])
fillColor: getDesdeColor(feature.properties["PERSONAS"])
}
}
......@@ -791,7 +796,7 @@ const style_centrosPOIC = feature => {
weight: 0.5, //1.0,
fill: true,
fillOpacity: .4,
fillColor: getCentrosColor(feature.properties['POIC']),
fillColor: getCentrosColor(feature.properties["POIC"]),
//fillPattern: "stripes"
}
}
......@@ -814,7 +819,7 @@ const style_haciaPOIC = feature => {
weight: 0.5, //1.0,
fill: true,
fillOpacity: 0.5,
fillColor: getHaciaPOICColor(feature.properties['PERSONAS'])
fillColor: getHaciaPOICColor(feature.properties["PERSONAS"])
}
}
......@@ -836,7 +841,7 @@ const style_desdePOIC = feature => {
weight: 0.5, //1.0,
fill: true,
fillOpacity: 0.5,
fillColor: getDesdePOICColor(feature.properties['PERSONAS'])
fillColor: getDesdePOICColor(feature.properties["PERSONAS"])
}
}
......@@ -847,7 +852,7 @@ let layer_desdePOIC = new L.geoJson(null, {
style: style_desdePOIC
});
const styleDrawnItems = () => {
/*const styleDrawnItems = () => {
let currentId = 0;
drawnItems.eachLayer(l => {
l.feature.properties.id = currentId;
......@@ -881,7 +886,7 @@ const toggleButtons = () => {
b.classList.remove("draw-control-disabled");
}
})
}
}*/
const makeBaseMap = () => {
createPane("pane_munis", 402);
......@@ -909,6 +914,7 @@ const makeBaseMap = () => {
createPane("pane_desdePOIC", 414);
createPane("pane_haciaPOIC", 415);
createPane("pane_agebs", 421);
createPane("pane_flujosDesde", 422);
/*$("#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>" +
......@@ -922,7 +928,8 @@ const makeBaseMap = () => {
zip2Lyr("../centropais/data/agebs_urbanos2005.zip", agebs2005, layer_agebs2005);
zip2Lyr("../centropais/data/expansion_agebs2010.zip", agebs2010, layer_agebs2010);
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);
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);
......@@ -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 ");
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");
layer_centros.addTo(map);
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");
zip2Lyr("../centropais/data/desde.zip", desde, layer_desde);
......@@ -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_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 => {
let flowMapLayer = L.canvasFlowmapLayer(data, {
$.getJSON("data/od.geojson", data => {
od = data;
});
$.getJSON("data/viajes_ocupados_desde.geojson", data => {
flowMapLayer = L.canvasFlowmapLayer(data, {
// Define origins and destination from json values
originAndDestinationFieldIds: {
originUniqueIdField: 'id_orig',
originUniqueIdField: "id_orig",
originGeometry: {
x: 'xo',
y: 'yo'
x: "xo",
y: "yo"
},
destinationUniqueIdField: 'id_dest',
destinationUniqueIdField: "id_dest",
destinationGeometry: {
x: 'xd',
y: 'yd'
x: "xd",
y: "yd"
}
},
// Line styles
canvasBezierStyle: {
type: 'classBreaks',
field: 'viajes',
type: "classBreaks",
field: "viajes",
classBreakInfos: [{
classMinValue: 0,
classMaxValue: 1000,
symbol: {
strokeStyle: '#00c5ff',
strokeStyle: "#00c5ff",
lineWidth: 0.5,
lineCap: 'round',
shadowColor: '#00c5ff',
lineCap: "round",
shadowColor: "#00c5ff",
shadowBlur: 1.5
}
}, {
classMinValue: 1001,
classMaxValue: 2000,
symbol: {
strokeStyle: '#008fdc',
strokeStyle: "#008fdc",
lineWidth: 1.5,
lineCap: 'round',
shadowColor: '#008fdc',
lineCap: "round",
shadowColor: "#008fdc",
shadowBlur: 1.5
}
}, {
classMinValue: 2001,
classMaxValue: 6000,
symbol: {
strokeStyle: '#005ce6',
strokeStyle: "#005ce6",
lineWidth: 2,
lineCap: 'round',
shadowColor: '#005ce6',
lineCap: "round",
shadowColor: "#005ce6",
shadowBlur: 1.5
}
}, {
classMinValue: 6001,
classMaxValue: 7200,
symbol: {
strokeStyle: '#4c0073',
strokeStyle: "#4c0073",
lineWidth: 10,
lineCap: 'round',
shadowColor: '#4c0073',
lineCap: "round",
shadowColor: "#4c0073",
shadowBlur: 1.5
}
}]
},
// Animated line styles
animatedCanvasBezierStyle: {
type: 'classBreaks',
field: 'viajes',
type: "classBreaks",
field: "viajes",
classBreakInfos: [{
classMinValue: 0,
classMaxValue: 1000,
symbol: {
strokeStyle: '#00c5ff',
strokeStyle: "#00c5ff",
lineWidth: 0.5,
lineDashOffsetSize: 4,
lineCap: 'round',
shadowColor: '#00c5ff',
lineCap: "round",
shadowColor: "#00c5ff",
shadowBlur: 1.5
}
}, {
classMinValue: 1001,
classMaxValue: 2000,
symbol: {
strokeStyle: '#008fdc',
strokeStyle: "#008fdc",
lineWidth: 1.5,
lineDashOffsetSize: 4,
lineCap: 'round',
shadowColor: '#008fdc',
lineCap: "round",
shadowColor: "#008fdc",
shadowBlur: 1.5
}
}, {
classMinValue: 2001,
classMaxValue: 6000,
symbol: {
strokeStyle: '#005ce6',
strokeStyle: "#005ce6",
lineWidth: 4,
lineDashOffsetSize: 4,
lineCap: 'round',
shadowColor: '#005ce6',
lineCap: "round",
shadowColor: "#005ce6",
shadowBlur: 1.5
}
}, {
classMinValue: 6001,
classMaxValue: 7200,
symbol: {
strokeStyle: '#4c0073',
strokeStyle: "#4c0073",
lineWidth: 15,
lineDashOffsetSize: 4,
lineCap: 'round',
shadowColor: '#4c0073',
lineCap: "round",
shadowColor: "#4c0073",
shadowBlur: 1.5
}
}]
},
// some custom options
pathDisplayMode: 'all',
pathDisplayMode: "all",
animationStarted: true,
//animationEasingFamily: 'Cubic',
//animationEasingType: 'In',
animationEasingFamily: 'Linear',
animationEasingType: 'None',
animationDuration: 2000
//animationEasingFamily: "Cubic",
//animationEasingType: "In",
animationEasingFamily: "Linear",
animationEasingType: "None",
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);
// 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
flowMapLayer.on('click', e => {
flowMapLayer.on("click", e => {
// clear paths
flowMapLayer.clearAllPathSelections();
let origins = "";
// select and draw flows from origins
if (e.sharedOriginFeatures.length) {
flowMapLayer.selectFeaturesForPathDisplay(e.sharedOriginFeatures, 'SELECTION_NEW');
}
if (e.sharedDestinationFeatures.length) {
flowMapLayer.selectFeaturesForPathDisplay(e.sharedDestinationFeatures, 'SELECTION_NEW');
flowMapLayer.selectFeaturesForPathDisplay(e.sharedOriginFeatures, "SELECTION_NEW");
/*e.sharedOriginFeatures.forEach( origin => {
origins += `${origin.properties.muni_origen} &rarr; ${origin.properties.muni_destino}: ${origin.properties.viajes} viajes <br>`;
});*/
}
// 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 = {
draw: {
toolbar: {
......@@ -1289,4 +1330,5 @@ const makeBaseMap = () => {
// after editing shape, update chart with data for polygons contained inside it
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
timeParse = d3.timeParse("%B_%Y");
timeFormat = d3.timeFormat("%B_%Y");
setupTimeDimensionControl();
//setupTimeDimensionControl();
// FIX: Need to remove setup and populate dates and only setup and populate map
setupDates()
/*setupDates()
.then(dates => populateDates(dates))
.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));
});
});
const sortInitialDateAscending = (a, b) => {
......@@ -217,7 +228,7 @@ const populateDates = (dates) => { // fill out date pickers with available dates
})
}
const setupMap = (dates) => {
const setupMap = () => {//(dates) => {
return new Promise(resolve => {
// make body tag to have style height: 100%
......@@ -236,20 +247,20 @@ const setupMap = (dates) => {
});
//let bounds = cuencaBufferMask.getBounds();
let southWest = L.latLng(19.88, -103.61),
northEast = L.latLng(22.63, -98.00),
let southWest = L.latLng(19.87, -102.87),
northEast = L.latLng(23.02, -99.31),
bounds = L.latLngBounds(southWest, northEast);
map = L.map("mexmap", {
//center: [17.22, -92.28],
minZoom: 7, //8
zoom: 7, //6
minZoom: 8,
zoom: 6,
attributionControl: false,
timeDimension: true,
/*timeDimension: true,
timeDimensionOptions: {
times: userDates,
currentTime: dates.min
},
},*/
maxBounds: bounds
}).setView([21.15, -100.94], 8);
......@@ -356,7 +367,7 @@ const populateMap = async(mapData) => {
})
// Define charts with reusable components
indicators.map(async(indicator, index) => {
/*indicators.map(async(indicator, index) => {
// indicatorVars[indicator].chart gives areaChart, perimeterChart, etc.
// First, make all charts with same general options
indicatorVars[indicator].chart = makeIndicatorGraph()
......@@ -386,25 +397,13 @@ const populateMap = async(mapData) => {
// Highlight plot title according to selected option
let option = $("#indicatorSelect").val(); // option selected from dropdrown
d3.select(indicatorVars[option].container).select("svg text.title").classed("active", true);
});
});*/
let map = mapData.map,
minIndicators = mapData.minIndicators,
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.getPane("wb-Tiles").style.zIndex = 450;
......@@ -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
timeLayer = L.timeDimension.layer.Tile(L.geoJSON(), {
updateTimeDimension: true,
......@@ -444,7 +443,7 @@ const populateMap = async(mapData) => {
waitForReady: true,
duration: "P1M"
});
timeLayer.addTo(map);
timeLayer.addTo(map);*/
// FIX: comment out to avoid DB calls
// style currentTiles
......@@ -470,7 +469,7 @@ const populateMap = async(mapData) => {
// setting their z-index
let glmapChildren = map.getPanes().tilePane.children,
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