Skip to content
Snippets Groups Projects
Commit 0a5126c8 authored by Azadpour, Elmera's avatar Azadpour, Elmera
Browse files

Revert "update map style to be in columns" 

This reverts commit f6507369.
parent f6507369
No related branches found
No related tags found
1 merge request!16census maps to src/assests/images & edit references for data release
Hide whitespace changes
Inline Side-by-side
Showing
with 59 additions and 85 deletions
src/components/Maps.vue
+ 59
− 85
View file @ 0a5126c8
<template> <template>
<section id="map"> <section id="map">
<div id="grid-container-map"> <div
<div id="title" class="text-container title-text"> id="title"
<h3>Case studies across the Western states</h3> class="text-container title-text"
<p>Orange = Positively correlated to water insecurity conditions</p> >
<p>Blue = Negatively correlated to water insecurity conditions</p> <h3>Case studies across the Western states</h3>
</div> <p>Orange = Positively correlated to water insecurity conditions</p>
<p>Blue = Negatively correlated to water insecurity conditions</p><br>
<div id="map-images" class="img-container"> <img src="@/assets/images/tot_households_2022.png" alt="Map of total households 2022">
<img src="@/assets/images/tot_households_2022.png" alt="Map of total households 2022"> <img src="@/assets/images/tot_female_households_2022.png" alt="Map of total female led households 2022">
<img src="@/assets/images/tot_female_households_2022.png" alt="Map of total female led households 2022"> <img src="@/assets/images/med_income_census_2022.png" alt="Map of median income 2022">
<img src="@/assets/images/med_income_census_2022.png" alt="Map of median income 2022"> <img src="@/assets/images/median_rent_2022.png" alt="Map of median rent 2022">
<img src="@/assets/images/median_rent_2022.png" alt="Map of median rent 2022"> <img src="@/assets/images/tot_latino_census_2022.png" alt="Map of total latino population 2022">
<img src="@/assets/images/tot_latino_census_2022.png" alt="Map of total latino population 2022"> <img src="@/assets/images/perc_latino_census_2022.png" alt="Map of percent latino population 2022"><br><br>
<img src="@/assets/images/perc_latino_census_2022.png" alt="Map of percent latino population 2022"> Factors associated with social vulnerability to water insecurity are not equally distributed across the Western United States. Certain races and ethnicities are more heavily concentrated in some geographic areas than in others. Similarly, some counties have much lower median household incomes than other counties do. Understanding where these vulnerable populations live is important information for water-resource managers to make equitable decisions about water availability and use.
</div> </div>
<!-- <h3 v-html="mapsText.title"/> -->
<div id="description" class="text-container"> <div id="map-container"></div>
<p> <!-- <div
Factors associated with social vulnerability to water insecurity are not equally distributed across the Western United States. id="text1"
Certain races and ethnicities are more heavily concentrated in some geographic areas than in others. Similarly, some counties class="text-container"
have much lower median household incomes than other counties do. Understanding where these vulnerable populations live is >
important information for water-resource managers to make equitable decisions about water availability and use. <p v-html="mapsText.paragraph1"/>
</p> </div> -->
</div>
</div>
</section> </section>
</template> </template>
<script> <script>
import { onMounted, ref } from "vue"; import { onMounted, ref } from "vue";
import { isMobile } from 'mobile-device-detect'; import { isMobile } from 'mobile-device-detect';
import * as d3 from 'd3'; import * as d3 from 'd3';
import mapText from './../assets/text/mapText'; import mapText from './../assets/text/mapText';
// global variables
const mobileView = isMobile;
const mapsText = mapText.mapText;
export default {
name: "MapSection",
components: {},
data() {
return {
mobileView: isMobile,
mapsText: mapText.mapText
};
},
mounted() {
const self = this;
}
};
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
#grid-container-map { #grid-container-interactive {
display: grid; display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto auto auto;
grid-template-areas:
"title"
"map-images"
"description"
"map-container";
justify-content: center;
max-width: 90vw;
margin: auto;
display: grid;
padding: 20px 0 20px 0;
gap: 5px;
margin: 0rem auto 3rem auto;
max-width: 90vw;
min-width: 90vw;
}
#title {
grid-area: title;
margin: 1rem 0;
text-align: center;
max-width: 90vw;
margin: auto;
display: grid;
padding: 20px 0 20px 0; padding: 20px 0 20px 0;
gap: 5px; gap: 5px;
grid-template-columns: 65vw 25vw;
grid-template-rows: max-content max-content max-content max-content;
grid-template-areas:
"title title"
"text text"
"map legend";
justify-content: center;
margin: auto; margin: auto;
max-width: 90vw; max-width: 90vw;
min-width: 90vw; min-width: 90vw;
} // @media screen and (max-height: 770px) {
// row-gap: 4vh;
// margin: 4rem 0rem 5rem 0rem;
// }
}
#map-images { #grid-title {
grid-area: map-images; grid-area: title;
display: flex; align-self: center;
flex-wrap: wrap; }
justify-content: center;
gap: 1rem;
margin: 5rem 0;
}
.img-container img { #text {
width: 100%; grid-area: text;
max-width: 35%; }
}
#map-container {
pointer-events: none;
grid-area: map;
height: 100%;
max-height: 70vh;
}
#description {
grid-area: description;
}
</style> </style>
\ No newline at end of file
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