Skip to content

Commit

Permalink
college button working plus rearrange functions
Browse files Browse the repository at this point in the history
  • Loading branch information
Benjamin Skinner committed Dec 15, 2017
1 parent 3076443 commit 206e0f6
Show file tree
Hide file tree
Showing 9 changed files with 374 additions and 462 deletions.
6 changes: 5 additions & 1 deletion index.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,11 @@ custom_css:
- main
custom_js:
- index.map
- functions
- func_general
- func_popup
- func_event
- func_mapping
- objects
- settings
- school_array
---
Expand Down
55 changes: 55 additions & 0 deletions js/func_event.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
---
---

// EVENT FUNCTIONS -------------------------------------------------------------

// fly to point when clicking sidebar
function eventFlyTo(feature, popup) {
popup.remove();
map.flyTo({
center: feature.geometry.coordinates,
zoom: 12
});
popup.create(feature);
}

// function to change marker color for colleges
function setCollegeMarker(swToggle) {
var cmColor = (swToggle ? zeroalph : jeffblue);
map.setPaintProperty('schools', 'circle-color', {
'property': 'm',
'type': 'categorical',
'stops': [
[0, getColor(rtorange)],
[1, getColor(cmColor)]
]
});
}

// toggle for colleges
function createToggle() {
// init toggle to be active
var toggle = document.createElement('a');
toggle.href = '#';
toggle.className = 'active';
toggle.textContent = 'hide colleges';
// listener: on click
toggle.onclick = function (e) {
e.preventDefault();
e.stopPropagation();
if (this.className === '') {
this.className = 'active';
this.textContent = 'hide colleges';
swToggle = false;
setCollegeMarker(swToggle);
addToVisible();
} else {
this.className = '';
this.textContent = 'show colleges';
swToggle = true;
setCollegeMarker(swToggle);
addToVisible();
}
};
return toggle;
}
18 changes: 18 additions & 0 deletions js/func_general.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
---
---

// GENERAL FUNCTIONS -----------------------------------------------------------

// color function
function getColor(color) {
return 'rgba(' + color.r + ','
+ color.g + ','
+ color.b + ','
+ color.a + ')';
}

// trim and lower string
function normalize(string) {
return string.trim().toLowerCase();
}

128 changes: 128 additions & 0 deletions js/func_mapping.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,128 @@
---
---

// MAPPING FUNCTIONS -----------------------------------------------------------

// subset existing features into unique values (id)
function getUniqueFeaturesByID(array) {
var existingFeatureKeys = {};
var uniqueFeatures = array.filter(function(el) {
if (existingFeatureKeys[el.id]) {
return false;
} else {
existingFeatureKeys[el.id] = true;
return true;
}
});
return uniqueFeatures;
}

// primary function to populate listings
function renderListings(features) {
// clear any existing listings
elListing.innerHTML = '';
// if there are items visible on the map...
if (features.length) {
// remove instructions
elInstructions.style.visibility = 'hidden';
// return filter text to black
elFilter.style.color = '#000';
// sort so that they are listed alphabetically in list
features.sort(function(x,y) {
if(s[x.id].a < s[y.id].a) return -1;
if(s[x.id].a > s[y.id].a) return 1;
return 0;
});
// for each visible feature...
features.forEach(function(feature) {
// school object
var school = new School(feature);
// change bullet color based on whether HS or College
var bc = (school.iscollege ? getColor(jeffblue) : getColor(rtorange));
// create item for list
var item = document.createElement('a');
item.href = '#';
item.innerHTML = "<span class='bullet' style='color:"
+ bc + ";'>&bull;</span>" + school.name;
// listener: fly to and make active if clicked
item.addEventListener('click', function() {
eventFlyTo(feature, popup);
});
// listener: add popup when mousing over (if not active)
item.addEventListener('mouseover', function() {
popup.create(feature);
});
// listener: remove popup when mouse leaves (if not active)
item.addEventListener('mouseleave', function() {
popup.remove();
});
elListing.appendChild(item);
});
// show the filter input
elFilter.parentNode.style.display = 'block';
} else {
// make empty area
var empty = document.createElement('p');
// if the input filter is being used and doesn't return options...
if (swFilter) {
// ...change color of input text and give message
elFilter.style.color = getColor(rtorange);
message = messages[1];
elListing.appendChild(empty);
swNoFilterMatch = true;
} else {
// ...else show inital instructions
elFilter.parentNode.style.display = 'none';
elInstructions.style.visibility = 'visible';
message = messages[0]
}
empty.textContent = message;
// remove features filter
map.setFilter('schools', ['has', '$id']);
}
}

function addToVisible() {
// reset if bad input in filter
if (swNoFilterMatch) {
swNoFilterMatch = swFilter = false;
map.setFilter('schools', ['has', '$id']);
}
var filter = (swToggle ? ['==','m',0] : false);
// get rendered features
var features = map.queryRenderedFeatures({
layers :['schools'],
filter : filter
});
if (features) {
// limit to unique features
var uniqueFeatures = getUniqueFeaturesByID(features, 'id');
// populate features for the listing overlay
renderListings(uniqueFeatures);
// clear the input container only if !swFilter and reset visible
if (!swFilter) {
elFilter.value = '';
visible = uniqueFeatures;
}
}
}

// function to filter schools with text input
function textFilter(e, visible) {
// set switch
swFilter = true;
// get input text
var inputText = normalize(e.target.value);
// remove visible features that don't match the input value.
var filtered = visible.filter(function(feature) {
var name = normalize(s[feature.id].a);
return name.indexOf(inputText) > -1;
});
// populate the sidebar with filtered results
renderListings(filtered);
// set the filter to populate features into the layer
map.setFilter('schools', ['in', '$id'].concat(filtered.map(function(feature) {
return feature.id;
})));
popup.remove();
}
53 changes: 53 additions & 0 deletions js/func_popup.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
---
---

// POPUPS ----------------------------------------------------------------------

// add .create() method
mapboxgl.Popup.prototype.create = function(feature) {
this.setLngLat(feature.geometry.coordinates)
.setHTML(this.text(feature))
.addTo(map);
}

// adds .text() method
mapboxgl.Popup.prototype.text = function(feature) {

// init popup format string
var htmlstr;

// get information
var school = new School(feature);
var district = new District(feature);

if (!school.iscollege) {
htmlstr = "<h2>" + school.name + "</h2>";
htmlstr += "<h3>District: " + district.name + "</h3>";
htmlstr += "<table>";
htmlstr += "<tr><th></th><th>District</th><th>School</th></tr>";
htmlstr += "<tr><td>12th grade enrollment</td>"
+ "<td class = 'num'>" + district.enroll + "</td>"
+ "<td class = 'num'>" + school.enroll + "</td></tr>";
htmlstr += "<tr><td>FRPL (%)</td>"
+ "<td class = 'num'>" + district.frpl + "</td>"
+ "<td class = 'num'>" + school.frpl + "</td></tr>";
htmlstr += "<tr><td>Students per counselor</td>"
+ "<td class = 'num'>" + district.csr + "</td>"
+ "<td class = 'num'>" + school.csr + "</td></tr>";
htmlstr += "</table>";

// get advising orgs, splitting on pipe (|)
htmlstr += "<h2>Advising organizations</h2>";
if (school.advorgs != undefined) {
for (i = 0; i < school.advorgs.length; i++) {
htmlstr += school.advorgs[i] + "</br>";
}
} else {
htmlstr += "None"
}
} else {
htmlstr = "<h2>" + school.name + "</h2>";
htmlstr += "<b>Sector: </b>" + school.sector;
}
return htmlstr;
}
87 changes: 32 additions & 55 deletions js/functions.js
Original file line number Diff line number Diff line change
@@ -1,69 +1,46 @@
---
---

// reference
// school information: s (array)
//
// a := name
// b := fips
// c := sector (college)
// d := enrollment (hs)
// e := frpl pct (hs)
// f := stu/cou ratio (hs)
// g := district name
// h := district enrollment g12
// i := district frpl pct
// j := district stu/cou ratio
// k := district fafsa pct
// l := hs advising orgs
// m := is college

// GENERAL FUNCTIONS -----------------------------------------------------------

// color function
function getColor(color) {
return 'rgb(' + color.r + ',' + color.g + ',' + color.b + ')';
}

function flyToSchool(currentFeature) {
map.flyTo({
center: currentFeature.geometry.coordinates,
zoom: 12
});
// adds .remove() function if using old browser
if (!('remove' in Element.prototype)) {
Element.prototype.remove = function() {
if (this.parentNode) {
this.parentNode.removeChild(this);
}
};
}

function createPopUp(currentFeature) {
var popUps = document.getElementsByClassName('mapboxgl-popup');
// check if there is already a popup on the map and if so, remove it
if (popUps[0]) popUps[0].remove();

var popup = new mapboxgl.Popup({ closeOnClick: false })
.setLngLat(currentFeature.geometry.coordinates)
.setHTML('<h4>' + s[currentFeature.id].a + '</h4>')
.addTo(map);
// trim and lower string
function normalize(string) {
return string.trim().toLowerCase();
}

// add school to information bar
function buildSchoolInfoList(data) {

// iterate through the list of schools
for (i = 0; i < data.features.length; i++) {
var currentFeature = data.features[i];
// shorten to prop
var id = currentFeature.id;

// select the info container in the HTML and append a div
// with the class 'item' for each school
var listings = document.getElementById('info');
var listing = listings.appendChild(document.createElement('div'));
listing.className = 'item';
listing.id = 'info-' + i;

// create a new link with the class 'title' for each school
// and fill it with the school name
var link = listing.appendChild(document.createElement('a'));
link.href = '#';
link.className = 'title';
link.dataPosition = i;
link.innerHTML = s[id].a;

// Add an event listener for the links in the sidebar listing
link.addEventListener('click', function(e) {
// Update the currentFeature to the store associated with the clicked link
var clickedListing = data.features[this.dataPosition];
// 1. fly to the point associated with the clicked link
flyToSchool(clickedListing);
// 2. close all other popups and display popup for clicked school
createPopUp(clickedListing);
// 3. highlight listing in sidebar (and remove highlight for all other listings)
var activeItem = document.getElementsByClassName('active');
if (activeItem[0]) {
activeItem[0].classList.remove('active');
}
this.parentNode.classList.add('active');
});

}
// check input text
function checkInput(text) {
return (text === '' ? false : true);
}

Loading

0 comments on commit 206e0f6

Please sign in to comment.