Added Mapping of Meetups to website resolves #11

custom.js

@@ -1,6 +1,10 @@
 (function(){
+	const ltc = {};
+		ltc.map;
+		ltc.meetups = [];
+		ltc.markers = {};
 
-	var api = {};
+	const api = {};
 		api.group = 'LearnTeachCode';
 		api.perPage = 15;
 		api.offset = 0;
@@ -19,10 +23,103 @@
 		});
 	}
 
+	function processData(data) {
+		data.results.forEach( function( meetup, index ) {
+			// Get event formatted dates and time
+			data.results[index].d = getDateFormats( meetup );
+		});
+		// Append new meetups
+		ltc.meetups.push(...data.results);
+		// List new meetups
+		listMeetups(data);
+		mapMeetups(data);
+	}
+
+	function mapMeetups(data){
+		let currentMarkers = [];
+		if(data.meta.count){
+			drawMap();
+			data.results.forEach( meetup => {
+				// console.log('venue',meetup.venue.name,meetup.venue.id);
+				if( Math.abs(meetup.venue.lat) && Math.abs(meetup.venue.lon) ) {
+					let meeting = '<li>'+meetup.d.month+' '+meetup.d.d+': <a href="#meetup-'+meetup.id+'" title="'+meetup.name+'">'+meetup.name+'</a></li>';
+					meetup.popup = { meetings: [] };
+					if( ltc.markers[meetup.venue.id] ) {
+						meetup.marker = ltc.markers[meetup.venue.id];
+						// console.log('venue exists!', meetup.venue.name, meetup, meetup.popup);
+
+						meetup.popup.meetings.push( meeting );
+						//let content = meetup.popup.getContent();
+						let newContent = meetup.marker.getPopup().getContent().split("</ul>")[0] + meeting + "</ul>";
+						meetup.marker.setPopupContent( newContent );
+						//console.log( meetup.marker.getPopup().getContent().split("</ul>")[0] + meeting + "</ul>" );
+					} else {
+						meetup.popup.title = '<strong>' + meetup.venue.name + '</strong>';
+						meetup.popup.location = '<br><small>' + meetup.venue.address_1 +', ';
+						meetup.popup.location += meetup.venue.city +', '+ meetup.venue.state.toUpperCase();
+						meetup.popup.location += ( (meetup.venue.zip)? ', '+meetup.venue.zip : '' )+'</small>';
+						meetup.popup.meetings.push( meeting );
+						meetup.popup.content = meetup.popup.title + meetup.popup.location;
+						meetup.popup.content += "<ul>";
+						meetup.popup.meetings.forEach( meeting => {
+							meetup.popup.content += meeting;
+						});
+						meetup.popup.content += "</ul>";
+						// console.log(meetup.popup.meetings);
+
+						// let popup = '<a href="'+meetup.event_url+'" title="'+meetup.name+'">'+meetup.name+'</a>';
+						meetup.marker = L.marker([meetup.venue.lat, meetup.venue.lon]).addTo(ltc.map).bindPopup( meetup.popup.content );
+						ltc.markers[meetup.venue.id] = meetup.marker;
+						currentMarkers.push( meetup.marker );
+					}
+
+				}
+			});
+
+			if( currentMarkers.length > 0 ) {
+				let group = new L.featureGroup( currentMarkers );
+				// Pad allows upper northern markers not to be cut off
+				ltc.map.fitBounds( group.getBounds().pad(0.5) );
+			}
+		}
+	}
+
+	function drawMap() {
+		// If a map has not been created
+		if( !ltc.map ) {
+			// Add height to map div via active class
+			document.getElementById('mapid').classList.add('active');
+
+			// Map Center Coordinates
+			let latlng = [ 34.0522, -118.2437 ];  // Los Angeles
+			let zoomlevel = 13;                   // Greater LA Metro Zoom view
+
+			// Initialize Map and assign to ltc.map
+			ltc.map = L.map('mapid').setView( latlng, zoomlevel );
+
+			// Use Open Street Map default (Mapnik)
+			// L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+			// 	maxZoom: 20,
+			//     attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+			// }).addTo(ltc.map);
+
+			//// CARTO BASE MAPS - FREE TO USE ////
+			//// Max use 75,000 map impressions a Month per CartoDB, Inc.
+			//// MAP STYLE: Voyager
+			// L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png', {
+			//// MAP STYLE: Voyager Labels Under
+			L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager_labels_under/{z}/{x}/{y}{r}.png', {
+				attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
+				subdomains: 'abcd',
+				maxZoom: 20
+			}).addTo(ltc.map);
+		}
+	}
+
 	// Display Meetup Data
-	function displayMeetups(data){
+	function listMeetups(data){
 		// List Items
-		var list = '';
+		let list = '';
 
 		// Check count of upcoming events
 		if(data.meta.count){
@@ -37,42 +134,29 @@
 			list += '<li>No Meetups Currently Scheduled. Stay tuned.</li>';
 		}
 
-		// Remove load-more button, if exists, just before adding new elements
+		// Remove load-more button just before adding new elements, which may include new load-more button
 		$('.load-more').remove();
+
 		// Add the list to the element
 		$(".meetups").append(list);
-
-		$('.load-more a').click( function(e) {
-			e.preventDefault();
-			api.offset++;
-			getData( api.url + '&offset=' + api.offset, displayMeetups, api.err);
-		});
 	}
 
 	/**
 	 * formatEvents() will get a set of meetups and format accordingly
 	 * @param {meetups}
 	 * @returns {(object|Array)}
 	 */
-	function getFormattedMeetups(meetups) {
-		var formattedMeetups = [];
+	function getFormattedMeetups( meetups ) {
+		let formattedMeetups = [];
 
 		// For each event create a list item
-		meetups.filter( function( meetup, index) {
-			// Setup event date info
-			var d = {};
-			d.date = new Date(meetup.time);
-			d.months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
-			d.month = d.months[d.date.getMonth()];
-			d.d = d.date.getDate();
-			d.wkdys = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
-			d.dow = d.wkdys[ d.date.getDay() ];
-			d.day = (d.d > 9)? d.d : "0"+d.d;
-			d.time = formatAMPM( d.date );
+		meetups.filter( function( meetup ) {
+			// Get event formatted dates and time
+			let d = getDateFormats( meetup );
 
 			// Formant and add current event to list
 			formattedMeetups.push(
-				'<li class="meetup">'
+				'<li id="meetup-' + meetup.id + '" class="meetup">'
 				+ '<div class="datebox">'
 				+ ' <div class="dow">' + d.dow + '</div>'
 				+ ' <div class="date">' + d.month + ' ' + d.day + '</div>'
@@ -88,22 +172,62 @@
 		return formattedMeetups;
 	}
 
+	function getDateFormats(meetup) {
+		const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+		const weekdays = ['Sunday','Monday','Tueday','Wednesday','Thursday','Friday','Saturday'];
+		const dt = new Date(meetup.time);
+
+		// Setup event date info
+		let d = {};
+		d.year = dt.getFullYear();
+		d.yyyy = d.year;
+		d.monthFull = months[dt.getMonth()];
+		d.month = d.monthFull.substring(0, 3);
+		d.m = dt.getMonth()+1;
+		d.mm = (d.m > 9)? d.m : "0"+d.m;
+		d.d = dt.getDate();
+		d.dowFull = weekdays[dt.getDay()];
+		d.dow = d.dowFull.substring(0, 3);
+		d.day = (d.d > 9)? d.d : "0"+d.d;
+		d.dd = d.day;
+		d.time = formatAMPM( dt );
+		return d;
+	}
+
 	function formatAMPM(date) {
-		var hours = date.getHours();
-		var minutes = date.getMinutes();
-		var ampm = hours >= 12 ? 'pm' : 'am';
+		let hours = date.getHours();
+		let minutes = date.getMinutes();
+		let ampm = hours >= 12 ? 'pm' : 'am';
 		hours = hours % 12;
 		hours = hours ? hours : 12; // the hour '0' should be '12'
 		minutes = minutes < 10 ? '0'+minutes : minutes;
-		var strTime = hours + ':' + minutes + ' ' + ampm;
+		let strTime = hours + ':' + minutes + ' ' + ampm;
 		return strTime;
 	}
 
 	/**
 	 * Get initial set of group meetups
 	 */
 	$(document).ready(function(){
-		getData( api.url, displayMeetups, api.err);
+		// Get intial set of meetups
+		getData( api.url, processData, api.err);
+
+		// Click Event for Load More
+		$('.meetups').on('click','.load-more a',function(e) {
+			e.preventDefault();
+			api.offset++;
+			getData( api.url + '&offset=' + api.offset, processData, api.err);
+		});
+
+		// Click Popup Event (when it exists) link to go to info
+		$('#mapid').on('click', '.leaflet-popup-content a', function(evt) {
+			evt.preventDefault();
+			let id = evt.target.hash.replace("#", "");
+			let meetupListItem = document.getElementById( id );
+			meetupListItem.scrollIntoView();
+			meetupListItem.classList.add('active');
+			setTimeout( () => { meetupListItem.classList.remove('active'); }, 3000);
+		});
 	});
 
 })();

index.html

@@ -3,7 +3,9 @@
 <html lang="en">
 <head>
 	<meta charset="utf-8">
-
+	<link rel="shortcut icon" href=" ">
+	<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> -->
+	<meta name="viewport" content="width=device-width, user-scalable=no" />
 	<title>Learn Teach Code</title>
 
 	<!-- Google Analytics - Global site tag (gtag.js) -->
@@ -16,6 +18,9 @@
 	</script>
 	<!-- Google Analytics - END -->
 
+	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
+   integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
+   crossorigin=""/>
 	<link rel="stylesheet" href="style.css">
 </head>
 
@@ -30,6 +35,8 @@ <h1>Learn Teach Code</h1>
 	<section>
 		<h2>Upcoming Events:</h2>
 
+		<div id="mapid"></div>
+
 		<ul class="meetups"></ul>
 
 		<p>Visit our <a href="https://www.meetup.com/LearnTeachCode/">Meetup.com page</a> for details on our next meetings.</p>
@@ -58,7 +65,11 @@ <h2>Stuff we do at Learn Teach Code:</h2>
 			<strong>Want to sponsor us?</strong> We're always on the lookout for more meeting spaces. Let us know if you have any suggestions or would like to sponsor us at your office!
 		</p>
 	</footer>
+
 	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+	<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"
+	integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
+	crossorigin=""></script>
 	<script src="custom.js"></script>
 	</body>
 </html>

style.css

@@ -1,3 +1,7 @@
+html {
+	scroll-behavior: smooth;
+}
+
 body {
 	font-family: "Helvetica", "Arial", sans-serif;
 	font-size:1.1em;
@@ -66,6 +70,17 @@ section {
 	border-bottom: 1px solid #ddd;
 }
 
+/** MAP **/
+#mapid.active {
+	height: 300px;
+}
+.leaflet-popup-content ul {
+	list-style: none;
+	padding-left: 0px;
+	max-height: 150px;
+    overflow-y: auto;
+}
+
 /** UPCOMING EVENTS **/
 .meetups {
 	list-style: none;
@@ -76,6 +91,14 @@ section {
 	display: grid;
 	grid-template-columns: 70px repeat(6, 10%);
 	margin-bottom: 0.4rem;
+	transition: background .30s ease-in-out;
+	-moz-transition: background .30s ease-in-out;
+	-webkit-transition: background .30s ease-in-out;
+}
+
+.meetup.active {
+	background-color: rgba(183, 73, 73, 0.25);
+	border-radius: 5px;
 }
 
 .datebox {