Skip to content

Instantly share code, notes, and snippets.

@omundy

omundy/volunteer.html

Created November 22, 2021 19:17
Show Gist options
  • Save omundy/4f006906985e316a5dc891e2bf26a67c to your computer and use it in GitHub Desktop.
Save omundy/4f006906985e316a5dc891e2bf26a67c to your computer and use it in GitHub Desktop.
Download ZIP
volunteer.html
Raw
volunteer.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="assets/css/styles.css">
<!--fonts-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
<!--Leaflet CSS file-->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
<title>dig245-final</title>
</head>
<body>
<div class="container">
<!-- <div class="vl"> -->
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-3"></div>
<div class="col-lg-6 col-md-4 col-sm-6">
<div class="site-title">
<h3>Volunteer</h3>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-3">
<div class="navbar">
<a class="nav-link dropdown-toggle" style="color:black" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<b>Menu</b>
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Home</a></li>
<li><a class="dropdown-item" href="#">About</a></li>
<li><a class="dropdown-item" href="#">Stories</a></li>
<li><a class="dropdown-item" href="#">Writing</a></li>
<li><a class="dropdown-item" href="volunteer.html">Volunteer</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-lg-6">
<h4>Hospitality in the U.S. often looks like taking the time out of your day to say,
"How can I help you?" Even if it’s a really small gesture, it means the world.</h4>
<p>For many refugees, one of the biggest surprises about life in the U.S. is how busy everyone's lives are.
It can be hard to adjust, find community, and receive assistance when those around them are
preoccupied with work and full schedules.</p>
<p>Even if your schedule does not permit you to spend extended time
with members of the refugee community, there are still plenty of opportunities for you to
get involved, including short-term sponsorship, shopping excursions, tutoring, and financial assistance,
to name a few.</p>
<p>As Luna said above, anything that says, "How can I help you?" goes a long way.</p>
<p>What are ways that you can lend a hand to assist the refugee community near you, either short-term or long-term?
</p>
<p>Use this map to help you find local organizations where you can get invovled.</p>
<div id="wrapper" class="col-lg-3 offset-lg-4 col-md-3">
<button id="location-button">find agencies near me</button>
<div id="output"></div>
</div>
</div>
<!-- <div class="col-lg-0 col-md-3 col-sm-3"></div> -->
<div class="col-lg-6 col-md-6 offset-md-2 offset-lg-0 col-sm-6">
<div id="map"></div>
</div>
<!-- <div class="col-lg-0 col-md-3 col-sm-3"></div> -->
</div>
<br>
<!-- Get Location API -->
<!-- <div id="wrapper" class="row">
<div class="col-lg-4 offset-lg-1 col-md-4 offset-md-1 col-sm-3"></div>
<div class="col-lg-4 col-md-4 col-sm-6">
<button id="location-button">find agencies near me</button>
<div id="output"></div>
</div>
<div class="col-lg-4 col-md-4 col-sm-3"></div>
</div> -->
<!-- <div class="row">
<div class="col">
<footer>Map ©
<a href="https://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>
</footer>
</div>
</div> -->
<!-- VL : </div> -->
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!--Leaflet JavaScript file-->
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin="">
</script>
<script>
//Get location button, this runs as soon as it's clicked (should run first)
var data = [],
markers = [], // references to be able to add / remove markers
lat = 28.538336, // orlando
lng = -81.379234;
$('#location-button').click(function() {
if (navigator.geolocation && navigator.geolocation !== {})
navigator.geolocation.getCurrentPosition(function(position) {
console.log(position); // Could I instead get only lat and long from this? position.latitude or position.longitude? When I log "position.latitude", I get message that says "undefined"
lat = position.coords.latitude;
lng = position.coords.longitude;
getAPI();
}, function(err) {
console.error(err)
});
else
console.log("location is not supported");
});
//source for getting geolocation: https://www.youtube.com/watch?v=KSf417F3ui0&ab_channel=RedStapler
var mymap = L.map('map').setView([lat, lng],
13); //<-- this is set to center in on Charlotte, but I'd need to change this to not show up until button is clicked. Instead set the variables to... position[i].latitude and position[i].longitude?
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
maxZoom: 15,
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1,
accessToken: 'pk.eyJ1IjoiYW5jbGFpcmUiLCJhIjoiY2t2cHFlbGF2ZWw2YTJxcTZudmJic281aSJ9.sj3rEwLet4s4RsJZ7VLuzg'
}).addTo(mymap); //This creates the map and determines the zoom level/tile size etc
var marker = L.icon({
// iconUrl: 'https://www.iconpacks.net/icons/1/free-pin-icon-48-thumb.png',
// iconSize: [38, 95],
// iconAnchor:[22, 94], // variable for the icons used, I decided I don't really want to change it
});
// geolocation API, this runs second after the map appears at the moment, but I'd like it to appear after the user clicks the button
async function getAPI() {
// default
var apiURL = 'https://resources.usahello.org/en/resources?m_lat=' + lat + '&m_lng=' + lng + '&distance=2000';
console.log(apiURL);
var response = await fetch(apiURL);
data = await response.json();
// data has been updated
createMarkers()
console.log(data[0]);
}
getAPI();
function createMarkers() {
console.log(1, markers);
console.log(1, data);
// removes previous
for (var i = 0; i < markers.length; i++) {
mymap.removeLayer(markers[i]);
}
// safety
markers = [];
// add markers to the map
for (var i = 0; i < data.length; i++) {
if ([data[i].latitude && [data[i].latitude != 0 && data[i].longitude] && data[i].longitude] != 0) {
// console.log(data[i])
var marker = L.marker([data[i].latitude, data[i].longitude])
.addTo(mymap)
.bindPopup(
"<h6>Agency Name</h6><p>Description, address, contact</p>"
); //insert something like this instead: var details = L.marker([data[i].description, data[i].address]) and bindPopup(details) so that the details I want show up instead
// add new marker references to markers
markers.push(marker)
}
}
console.log(2, markers);
console.log(2, data);
mymap.setView(new L.LatLng(lat, lng), 8)
// get the bounds automatically
// var bounds = L.latLngBounds(markers);
// var latlngbounds = new L.latLngBounds();
// mymap.fitBounds(latlngbounds);//works!
// mymap.fitBounds(markers.getBounds());
}
// map.setView(latitude, longitude); <-- I want this to call the latitude and longitude of the user's location
//for map setup I followed this video: https://www.youtube.com/watch?v=uxf0--uiX0I&ab_channel=TheCodingTrain
//PSEUDOCODE:
//On click, get geolocation. Print in console.
//Find latitude and longitude IDs and save to global variable
//Update var apiURL according to the long/lat data so it would look something like: var apiURL = 'https://resources.usahello.org/en/resources?m_lat=‘+'lat.variable'+'&m_lng=‘+'lon.variable'+'&distance=2000';
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment