Final Lab Code¶
Up to this point, your lab code should look like the following:
index.html
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<!-- hint: remember to change your page title! -->
<meta charset="utf-8" />
<link rel="shortcut icon" href="#">
<link rel="stylesheet" href="styles/style.css">
<!-- Leaflet's css-->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<!-- Leaflet's JavaScript-->
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script src="js/papaparse.min.js"></script>
</head>
<body>
<header>
Covid Vaccination Stories
</header>
<div class="main">
<div id="contents">
<div id="placeForButtons"></div>
<!-- Be sure to use your own survey here!!!!!!! -->
<div id="theSurvey">
<div id="surveyButton">
<a href="https://docs.google.com/forms/d/e/1FAIpQLScD0IOr_U4r0q4HlBkZ7olkA5OJpgInePF8DQbIrIWDeTm1jw/viewform">📝Take the survey</a>
</div>
</div>
</div>
<div id="the_map">
<div id="legend">
<div id="legend">
<div id="englishFirstLegend">
<input type="checkbox" id="englishCheckbox">
<label for="englishCheckbox">
English as First Language <svg height='10' width='10'><circle cx='5' cy='5' r='4' stroke='black' stroke-width='1' fill='red' /></svg>
</label>
</div>
<div id="nonEnglishFirstLegend">
<input type="checkbox" id="nonEnglishCheckbox">
<label for="nonEnglishCheckbox">
Non-English as First Language <svg height='10' width='10'><circle cx='5' cy='5' r='4' stroke='black' stroke-width='1' fill='blue' /></svg>
</label>
</div>
</div>
</div>
</div>
<div id="footer">
Copyright(2022)
</div>
<script src="js/init.js"></script>
</body>
</html>
js/init.js
// declare variables
let mapOptions = {'center': [34.0709,-118.444],'zoom':5};
let englishFirst = L.featureGroup();
let nonEnglishFirst = L.featureGroup();
let layers = {
"English as First Language <svg height='10' width='10'><circle cx='5' cy='5' r='4' stroke='black' stroke-width='1' fill='red' /></svg>": englishFirst,
"Non-English as First Language <svg height='10' width='10'><circle cx='5' cy='5' r='4' stroke='black' stroke-width='1' fill='blue' /></svg>": nonEnglishFirst
}
let circleOptions = {
radius: 4,
fillColor: "#ff7800",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.8
};
const dataUrl = "https://docs.google.com/spreadsheets/d/e/2PACX-1vS2WyfKTyZJ-_ja3GGrxoAXwranavyDGXYsxeFUO4nvHpCJrkKhChymXQqUEyhdGLnz9VN6BJv5tOjp/pub?gid=1560504149&single=true&output=csv";
const englishFirstLegendHTML = document.getElementById("englishCheckbox");
const nonEnglishFirstLegendHtml = document.getElementById("nonEnglishCheckbox");
const map = L.map('the_map').setView(mapOptions.center, mapOptions.zoom);
let Esri_WorldGrayCanvas = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles © Esri — Esri, DeLorme, NAVTEQ',
maxZoom: 16
});
Esri_WorldGrayCanvas.addTo(map);
// add layer control box
// L.control.layers(null,layers,{collapsed:false}).addTo(map)
function addMarker(data){
if(data['Is your English your first language?'] == "Yes"){
circleOptions.fillColor = "red"
englishFirst.addLayer(L.circleMarker([data.lat,data.lng],circleOptions).bindPopup(`<h2>English First Language</h2>`))
createButtons(data.lat,data.lng,data.Location)
}
else{
circleOptions.fillColor = "blue"
nonEnglishFirst.addLayer(L.circleMarker([data.lat,data.lng],circleOptions).bindPopup(`<h2>Non-English First Language</h2>`))
createButtons(data.lat,data.lng,data.Location)
}
return data
};
function createButtons(lat,lng,title){
const newButton = document.createElement("button"); // adds a new button
newButton.id = "button"+title; // gives the button a unique id
newButton.innerHTML = title; // gives the button a title
newButton.setAttribute("lat",lat); // sets the latitude
newButton.setAttribute("lng",lng); // sets the longitude
newButton.addEventListener('click', function(){
map.flyTo([lat,lng]); //this is the flyTo from Leaflet
})
const spaceForButtons = document.getElementById('placeForButtons')
spaceForButtons.appendChild(newButton);//this adds the button to our page.
};
function loadData(url){
Papa.parse(url, {
header: true,
download: true,
complete: results => processData(results)
})
};
function processData(results){
console.log(results)
results.data.forEach(data => {
console.log(data)
addMarker(data)
})
englishFirst.addTo(map) // add our layers after markers have been made
nonEnglishFirst.addTo(map) // add our layers after markers have been made
let allLayers = L.featureGroup([englishFirst,nonEnglishFirst]);
map.fitBounds(allLayers.getBounds());
};
loadData(dataUrl)
// toggle the legend for englishFirstLegend grouplayer
englishFirstLegendHTML.addEventListener("click",toggleEnglishLayer)
function toggleEnglishLayer(){
if(map.hasLayer(englishFirst)){
map.removeLayer(englishFirst)
}
else{
map.addLayer(englishFirst)
}
}
// toggle the legend for nonEnglishFirstLegend grouplayer
nonEnglishFirstLegendHtml.addEventListener("click",toggleNonEnglishLayer)
function toggleNonEnglishLayer(){
if(map.hasLayer(nonEnglishFirst)){
map.removeLayer(nonEnglishFirst)
}
else{
map.addLayer(nonEnglishFirst)
}
}
styles/style.css
body{
display: grid;
grid-template-rows: 50px auto auto;
grid-template-areas: "header" "main_content" "footer";
background-color: aqua;
gap: 10px;
}
header{
grid-area: header;
justify-self: center;
align-self: center;
}
#footer{
grid-area: footer;
}
.main{
grid-area: main_content;
grid-template-columns: 1fr 1fr;
grid-template-areas: "main_map content";
display: grid;
}
#contents{
grid-area: content;
display: grid;
grid-template-rows: 3fr 1fr;
grid-template-areas: "buttonHome" "survey"
}
#the_map{
height:80vh;
grid-area: main_map;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: repeat(3, minmax(0, 1fr));
align-items: center;
justify-items: right;
}
#legend{
z-index: 9999;
background-color: white;
padding: 10px;
grid-column: 1 / span 3;
grid-row: 1;
}
#theSurvey{
grid-area: survey;
justify-self: center; /* added this to center the button in the div */
}
/* css for the button */
#surveyButton{
padding: 15px 32px;
margin: 10px;
background-color: #4CAF50;
cursor: pointer;
}
/* css for button to get rid of the underline */
#surveyButton a{
text-decoration: none;
}
#placeForButtons{
grid-area: buttonHome;
display:grid;
grid-template-columns: repeat(2, 1fr);
}