-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
college button working plus rearrange functions
- Loading branch information
Benjamin Skinner
committed
Dec 15, 2017
1 parent
3076443
commit 206e0f6
Showing
9 changed files
with
374 additions
and
462 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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(); | ||
} | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 + ";'>•</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(); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | ||
} | ||
|
Oops, something went wrong.