Skip to content
Snippets Groups Projects
Commit 1c109774 authored by Darío de la Torre Guinaldo's avatar Darío de la Torre Guinaldo
Browse files

Añadida leyenda y título al mapa

parent d9434b74
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
src/app/dash/dash.component.ts
+ 8
− 2
View file @ 1c109774
......@@ -168,6 +168,7 @@ export class DashComponent {
break;
}
}
datoNumerico = Math.round(datoNumerico*1000)/1000;
this.datosLineas.push(datoNumerico); //Añadimos el dato para el gráfico de líneas
}
this.graficoBarras.updateChart(this.datosLineas, this.etiquetaLineas, this.comunidad);
......@@ -176,6 +177,7 @@ export class DashComponent {
async getDatosCsvSectores() {
this.datosSectores = []
await this.getDatosCsvPoblacionSectores();
console.log(this.datosPoblacionSectores);
const url = "/assets/"+this.year+".csv";
const response = await fetch(url);
const datos = await response.text();
......@@ -225,6 +227,8 @@ export class DashComponent {
datoNumerico = this.stringNumeroESPtoNumber(columnas[5])
if(this.opcionSecundaria == "% sobre la población"){
datoNumerico = (datoNumerico/this.datosPoblacionSectores[i])*100
console.log(datoNumerico);
this.totalNacional=100;
}
break;
......@@ -240,6 +244,7 @@ export class DashComponent {
break;
}
}
datoNumerico = Math.round(datoNumerico*1000)/1000; //Añadimos el dato para el gráfico de sectores y el mapa
this.datosSectores.push(datoNumerico);
}
this.mapaCoropletas.updateMap(this.datosSectores, this.etiquetaSectores, this.totalNacional);
......@@ -254,9 +259,10 @@ export class DashComponent {
//Quitamos las primeras 7 líneas que son los títulos y el global del país, y la última línea porque está en blanco.
const datosPorLinea = datos.split('\n').slice(7);
var columnaPoblacionYear = this.yearList.reverse().indexOf(this.year) + 1;
for(let i=0; i<datosPorLinea.length-5;i++){
for(let i=0; i<=datosPorLinea.length-5;i++){
var columnas = datosPorLinea[i].split(';');
var datoNumericoPoblacion = this.stringNumeroESPtoNumber(columnas[columnaPoblacionYear]);
console.log(datoNumericoPoblacion);
this.datosPoblacionSectores.push(datoNumericoPoblacion);
}
}
......
......
src/app/mapa-coropletas/mapa-coropletas.component.css
+ 53
− 1
View file @ 1c109774
.globusContainer{
height: 95vh;
height: 90vh;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: stretch;
}
.gradient {
width: 85%;
white-space: nowrap;
position: relative;
display: inline-block;
top: 4px;
padding-bottom: 15px;
}
.gradient .domain-min {
position: absolute;
left: 0;
font-size: 11px;
bottom: 3px;
}
.gradient .domain-1cuartil {
position: absolute;
left: 25%;
text-align: center;
font-size: 11px;
bottom: 3px;
}
.gradient .domain-med {
position: absolute;
right: 25%;
left: 25%;
text-align: center;
font-size: 11px;
bottom: 3px;
}
.gradient .domain-3cuartil {
position: absolute;
right: 25%;
text-align: center;
font-size: 11px;
bottom: 3px;
}
.gradient .domain-max {
position: absolute;
right: 0;
font-size: 11px;
bottom: 3px;
}
.grad-step {
display: inline-block;
height: 20px;
width: 20%;
}
\ No newline at end of file
src/app/mapa-coropletas/mapa-coropletas.component.html
+ 19
− 0
View file @ 1c109774
<div class="globusContainer" id="globus" ></div>
<div style="display:inline-block;margin-right:30px;
margin-top: 10px;
font-size: x-large;
font-weight: 700;
text-align: left;
" >{{tituloMapa}}</div>
<div class="gradient" style="width: 400px; display:inline-block;">
<span class="grad-step" [style.background]="colorMin"> </span>
<span class="grad-step" [style.background]="colorPrimerCuartil"> </span>
<span class="grad-step" [style.background]="colorMed"> </span>
<span class="grad-step" [style.background]="colorTercerCuartil"> </span>
<span class="grad-step" [style.background]="colorMax"> </span>
<span class="domain-min">{{intervaloMin}}</span>
<span class="domain-1cuartil">{{intervaloPrimerCuartil}}</span>
<span class="domain-med">{{intervaloMed}}</span>
<span class="domain-3cuartil">{{intervaloTercerCuartil}}</span>
<span class="domain-max">{{intervaloMax}}</span>
</div>
src/app/mapa-coropletas/mapa-coropletas.component.ts
+ 32
− 7
View file @ 1c109774
......@@ -18,6 +18,18 @@ export class MapaCoropletasComponent implements OnInit {
primera : boolean = true;
idComunidad: number;
miPopUp;
tituloMapa = "Mapa de coropletas de:";
colorMin = "red";
colorPrimerCuartil = "yellow";
colorMed = "orange";
colorTercerCuartil = "pink"
colorMax = "red"
intervaloMin = 0;
intervaloPrimerCuartil = 0.25;
intervaloMed = 0.5;
intervaloTercerCuartil = 0.75;
intervaloMax = 1;
ngOnInit() {
this.osm = new og.layer.XYZ('OpenStreetMap', {
......@@ -26,11 +38,12 @@ export class MapaCoropletasComponent implements OnInit {
visibility: true,
});
this.globus = new og.Globe({
target: 'globus', // a HTMLDivElement which its id is `globus`
target: 'globus',
name: 'Earth',
terrain: new og.terrain.GlobusTerrain(),
layers: [this.osm],
autoActivated: true
autoActivated: true,
});
this.globus.planet.flyLonLat(new og.LonLat(0, 37, 3000000));
this.miPopUp = new og.Popup({
......@@ -40,7 +53,6 @@ export class MapaCoropletasComponent implements OnInit {
})
}
@Output() clickComunidad = new EventEmitter<object>();
updateMap(datos, etiqueta, totalNacional){
......@@ -71,10 +83,10 @@ export class MapaCoropletasComponent implements OnInit {
}
return 0;
});
var valorMaximo = Math.max(...datos);
for (var i = 0; i < f.length; i++) {
var fi = f[i];
var valorDato = datos[i];
var valorMaximo = Math.max(...datos);
var colorComunidad = this.ValorToColor(valorDato/valorMaximo);
var stringColorComunidad = "rgba("+colorComunidad[0]+","+colorComunidad[1]+","+colorComunidad[2]+","+colorComunidad[3]+")"
comunidades.add(new og.Entity({
......@@ -88,9 +100,22 @@ export class MapaCoropletasComponent implements OnInit {
}
}));
}
this.tituloMapa = "Mapa de coropletas de "+etiqueta;
this.intervaloMin = 0;
this.intervaloPrimerCuartil = Math.round((valorMaximo/4)*100)/100;
this.intervaloMed = Math.round((valorMaximo/2)*100)/100;
this.intervaloTercerCuartil = Math.round((valorMaximo*3/4)*100)/100;
this.intervaloMax = Math.round((valorMaximo)*100)/100;
var color1 = this.ValorToColor(this.intervaloMin/valorMaximo);
this.colorMin = "rgba("+color1[0]+","+color1[1]+","+color1[2]+","+color1[3]+")";
var color2 = this.ValorToColor(this.intervaloPrimerCuartil/valorMaximo);
this.colorPrimerCuartil = "rgba("+color2[0]+","+color2[1]+","+color2[2]+","+color2[3]+")";
var color3 = this.ValorToColor(this.intervaloMed/valorMaximo);
this.colorMed = "rgba("+color3[0]+","+color3[1]+","+color3[2]+","+color2[3]+")";
var color4 = this.ValorToColor(this.intervaloTercerCuartil/valorMaximo);
this.colorTercerCuartil = "rgba("+color4[0]+","+color4[1]+","+color4[2]+","+color4[3]+")";
var color5 = this.ValorToColor(this.intervaloMax/valorMaximo);
this.colorMax = "rgba("+color5[0]+","+color5[1]+","+color5[2]+","+color5[3]+")";
comunidades.events.on("mouseleave", function (e) {
e.pickingObject.geometry.setLineColor(0.5, 0.5, 0.5, 1.0);
});
......
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please to comment