Skip to content

Commit

Permalink
update: lab5 cleaner
Browse files Browse the repository at this point in the history
  • Loading branch information
@albertkun
albertkun authored Jul 25, 2024
1 parent 4155ab0 commit 143c6fd
Show file tree
Hide file tree
Showing 2 changed files with 102 additions and 113 deletions.
56 changes: 25 additions & 31 deletions docs/labs/week5/2.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -542,51 +542,46 @@ function toggleMarkersVisibility(category, isVisible) {
```

```css title="css/styles.css"
/* Global reset to ensure consistency across browsers */
* {
font-family: Arial, sans-serif; /* Sets a default font for the whole page */
margin: 0; /* Removes default margins */
padding: 0; /* Removes default padding */
box-sizing: border-box; /* Makes sure borders and paddings are included in the element's total width and height */
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* Sets the background color of the whole page and ensures content fits the screen height */

html {
background-color: aqua; /* Sets a light blue background color */
background-color: aqua;
}

/* Applies to both <html> and <body> */
html, body {
height: 80vh; /* Sets the height to 80% of the viewport height, making sure the content fits on the screen */
padding: 1rem; /* Adds a bit of space around the content for better readability */
box-sizing: border-box; /* Ensures padding does not add to the set height */
height: 80vh;
padding: 1rem;
box-sizing: border-box;
}

/* Defines the main layout of the page using CSS Grid */
body {
display: grid; /* Enables CSS Grid layout */
display: grid;
grid-template-areas:
"header" /* Top area for the header */
"main" /* Middle area for the main content */
"footer"; /* Bottom area for the footer */
grid-template-rows: auto 1fr auto; /* Sizes: auto for header and footer to fit content, 1fr for main to fill remaining space */
"header"
"main"
"footer";
grid-template-rows: auto 1fr auto;
}

/* Sets up the layout for the main content area, dividing it into two columns */
main {
display: grid; /* Enables CSS Grid within the main element */
display: grid;
grid-template-areas:
"portfolio map"; /* Divides the main area into portfolio and map sections side by side */
grid-template-columns: 1fr 1fr; /* Allocates equal width to both sections */
"portfolio map";
grid-template-columns: 1fr 1fr;
}

/* Grid area assignments for each major section, linking them to their respective areas in the grid */
header {
grid-area: header; /* Assigns the header to its grid area */
grid-area: header;
}

main {
grid-area: main; /* Assigns the main content to its grid area */
grid-area: main;
}

.portfolio {
Expand All @@ -599,16 +594,16 @@ main {


#map {
grid-area: map; /* Assigns the map section to its grid area */
height: 80vh; /* Sets the map's height to 80% of the viewport height */
grid-area: map;
height: 80vh;
}

#footer {
grid-area: footer;
padding: 5px; /* Adds padding for better spacing */
background-color: #4677a0; /* Sets a dark background for contrast */
color: #fff; /* Ensures text is readable against the dark background */
text-align: center; /* Centers the footer content */
padding: 5px;
background-color: #4677a0;
color: #fff;
text-align: center;
}

.marker-vaccinated, .marker-notVaccinated {
Expand All @@ -632,5 +627,4 @@ main {
#notVaccinated:checked + label {
color: red;
}

```
159 changes: 77 additions & 82 deletions docs/labs/week5/3.md
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,56 @@
# ✅ Final Template Code

```html title="index.html" linenums="1"
<!DOCTYPE html>
<html>
<head>
<title>Hello World with MapLibreGl</title>
<!-- hint: remember to change your page title! -->
<meta charset="utf-8" />
<link rel="shortcut icon" href="#">
<link rel="stylesheet" href="styles/style.css">

<!-- MapLibreGL's css-->
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" />

<!-- MapLibreGL's JavaScript-->
<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js"></script>
</head>

<body>
<header>
COVID Vaccination Stories
<a href="https://docs.google.com/forms/d/e/1FAIpQLSfcElv5dlXInR7XHQz27_OcYJlWcIUr-GBbc-ocefWlGd1uXg/viewform?embedded=true" target="_blank">
<button id="surveyButton">Take the Survey</button>
</a>
</header>

<main>
<div class="portfolio">
<div id="contents">
<div id="legend"></div>
</div>

</div>
<div id="map"></div>
</main>
<div id="footer">
Copyright(2024)
</div>
<script src="js/init.js"></script>
</body>
</html>
```

```js title="js/init.js"
let mapOptions = {'centerLngLat': [-118.444,34.0709],'startingZoomLevel':5}

const map = new maplibregl.Map({
container: 'map', // container ID
style: 'https://api.maptiler.com/maps/streets-v2-light/style.json?key=wsyYBQjqRwKnNsZrtci1', // Your style URL
center: mapOptions.centerLngLat, // Starting position [lng, lat]
zoom: mapOptions.startingZoomLevel // Starting zoom level
container: 'map',
style: 'https://api.maptiler.com/maps/streets-v2-light/style.json?key=wsyYBQjqRwKnNsZrtci1',
center: mapOptions.centerLngLat,
zoom: mapOptions.startingZoomLevel
});

function addMarker(data){
Expand All @@ -25,13 +67,13 @@ function addMarker(data){
else{
popup_message = `<h2>Not Vaccinated</h2><p>Zip Code: ${homeZipcode}</p>`
}
// add a new div element to hold the marker

const newMarkerElement = document.createElement('div');

// add a class to the marker element based on the category

newMarkerElement.className = `marker marker-${category}`;

// create a new marker using the marker element

new maplibregl.Marker({element:newMarkerElement})
.setLngLat([longitude, latitude])
.setPopup(new maplibregl.Popup()
Expand Down Expand Up @@ -59,7 +101,6 @@ function createButtons(lat,lng,title){

const dataUrl = "https://docs.google.com/spreadsheets/d/e/2PACX-1vSNq8_prhrSwK3CnY2pPptqMyGvc23Ckc5MCuGMMKljW-dDy6yq6j7XAT4m6GG69CISbD6kfBF0-ypS/pub?output=csv"

// When the map is fully loaded, start adding GeoJSON data
map.on('load', function() {
createFilterUI();
Papa.parse(dataUrl, {
Expand All @@ -79,12 +120,11 @@ function processData(results){
};

function createCheckboxForCategory(category, filterGroup) {
// Create a container for the checkbox, label, and markerLegend
const container = document.createElement('div');
container.style.display = 'grid';
container.style.gridTemplateColumns = 'auto auto 1fr'; // Define the grid columns
container.style.alignItems = 'center'; // Align items vertically in the center
container.style.gap = '8px'; // Add some space between the items
container.style.gridTemplateColumns = 'auto auto 1fr';
container.style.alignItems = 'center';
container.style.gap = '8px';

const input = document.createElement('input');
input.type = 'checkbox';
Expand All @@ -98,12 +138,10 @@ function createCheckboxForCategory(category, filterGroup) {
const markerLegend = document.createElement('div');
markerLegend.className = `marker marker-${category}`;

// Append the elements to the container instead of directly to the filterGroup
container.appendChild(input);
container.appendChild(label);
container.prepend(markerLegend);

// Append the container to the filterGroup
filterGroup.appendChild(container);

input.addEventListener('change', function(event) {
Expand Down Expand Up @@ -134,51 +172,46 @@ function toggleMarkersVisibility(category, isVisible) {
```

```css title="css/styles.css"
/* Global reset to ensure consistency across browsers */
* {
font-family: Arial, sans-serif; /* Sets a default font for the whole page */
margin: 0; /* Removes default margins */
padding: 0; /* Removes default padding */
box-sizing: border-box; /* Makes sure borders and paddings are included in the element's total width and height */
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* Sets the background color of the whole page and ensures content fits the screen height */

html {
background-color: aqua; /* Sets a light blue background color */
background-color: aqua;
}

/* Applies to both <html> and <body> */
html, body {
height: 80vh; /* Sets the height to 80% of the viewport height, making sure the content fits on the screen */
padding: 1rem; /* Adds a bit of space around the content for better readability */
box-sizing: border-box; /* Ensures padding does not add to the set height */
height: 80vh;
padding: 1rem;
box-sizing: border-box;
}

/* Defines the main layout of the page using CSS Grid */
body {
display: grid; /* Enables CSS Grid layout */
display: grid;
grid-template-areas:
"header" /* Top area for the header */
"main" /* Middle area for the main content */
"footer"; /* Bottom area for the footer */
grid-template-rows: auto 1fr auto; /* Sizes: auto for header and footer to fit content, 1fr for main to fill remaining space */
"header"
"main"
"footer";
grid-template-rows: auto 1fr auto;
}

/* Sets up the layout for the main content area, dividing it into two columns */
main {
display: grid; /* Enables CSS Grid within the main element */
display: grid;
grid-template-areas:
"portfolio map"; /* Divides the main area into portfolio and map sections side by side */
grid-template-columns: 1fr 1fr; /* Allocates equal width to both sections */
"portfolio map";
grid-template-columns: 1fr 1fr;
}

/* Grid area assignments for each major section, linking them to their respective areas in the grid */
header {
grid-area: header; /* Assigns the header to its grid area */
grid-area: header;
}

main {
grid-area: main; /* Assigns the main content to its grid area */
grid-area: main;
}

.portfolio {
Expand All @@ -191,16 +224,16 @@ main {


#map {
grid-area: map; /* Assigns the map section to its grid area */
height: 80vh; /* Sets the map's height to 80% of the viewport height */
grid-area: map;
height: 80vh;
}

#footer {
grid-area: footer;
padding: 5px; /* Adds padding for better spacing */
background-color: #4677a0; /* Sets a dark background for contrast */
color: #fff; /* Ensures text is readable against the dark background */
text-align: center; /* Centers the footer content */
padding: 5px;
background-color: #4677a0;
color: #fff;
text-align: center;
}

.marker-vaccinated, .marker-notVaccinated {
Expand All @@ -226,41 +259,3 @@ main {
}
```

```html title="index.html" linenums="1"
<!DOCTYPE html>
<html>
<head>
<title>Hello World with MapLibreGl</title>
<!-- hint: remember to change your page title! -->
<meta charset="utf-8" />
<link rel="shortcut icon" href="#">
<link rel="stylesheet" href="styles/style.css">

<!-- MapLibreGL's css-->
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" />

<!-- MapLibreGL's JavaScript-->
<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js"></script>
</head>

<body>
<header>
COVID Vaccination Stories
</header>

<main>
<div class="portfolio">
<div id="contents">
</div>
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSfcElv5dlXInR7XHQz27_OcYJlWcIUr-GBbc-ocefWlGd1uXg/viewform?embedded=true" width="100%" height="100%" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
</div>
<div id="map"></div>
</main>
<div id="footer">
Copyright(2024)
</div>
<script src="js/init.js"></script>
</body>
</html>
```

0 comments on commit 143c6fd

Please sign in to comment.