font awesome 5 makes pseudo elements hard

You need to set the font-weight to 900 for no freaking reason .

 

https://stackoverflow.com/questions/47712987/font-awesome-5-on-pseudo-elements

Advertisements
font awesome 5 makes pseudo elements hard

ur npm packages are out of date

fix ’em: https://stackoverflow.com/questions/16525430/npm-check-and-update-package-if-needed

if it isn’t working, you’re probably specifying a specific version in the package. Make sure there’s a little caret next to the version number so it can update:

“dependencies”: {
“aws-sdk”: “^2.178.0”,
“ejs”: “^2.5.7”,
“express”: “^4.16.2”,
“tabletop”: “^1.5.1”
},
ur npm packages are out of date

leaflet, with tabs!

Using Bootstrap tabs:

<ul class="nav nav-tabs">
 <li id="class-one" class="active top-tab"><a>Class 1</a></li>
 <li id="biggest" class="top-tab"><a>Biggest</a></li>
</ul>
 if(mymap !== undefined){
 mymap.invalidateSize(); //allow the map box to be removed and added without breaking
 }


$.getJSON('assets/data.json', function(data){
 landfillData = data;
 if (mymap == undefined && isClassOne){
 buildMap(landfillData);
 }

});

$('.top-tab').off().on('click', function(){
 
 console.log("CLICK");
 
 $('.top-tab').toggleClass('active');
 
 console.log(isClassOne);
 
 if(isClassOne && $(this).attr('id') == "class-one"){
 console.log("do nothing");
 } else {
 if($(this).attr('id') == "class-one"){
 isClassOne = true;
 console.log("is class one");
 buildMap(landfillData);
 } else if ($(this).attr('id') == "biggest"){
 isClassOne = false;
 console.log("isn't class one");
 clearMap();
 }
 }
 
 if (pymChild) {
 pymChild.sendHeight();
 }
 
 });

function clearMap(){
 $('#mapid').toggleClass('hidden');
 mymap.remove();
 console.log($('#mapid').hasClass('hidden'));
 }

function buildMap(data) {
 if (mymap !== undefined){
 clearMap();
 }

mymap = L.map('mapid').setView([31.9685988, -99.90181310000003], 5);

var landfills = data.CLASS1;
 var markers = [];

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
 attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
 id: 'mapbox.light',
 maxZoom: 9,
 minZoom: 4,
 accessToken: ''
 }).addTo(mymap);

mymap.scrollWheelZoom.disable();

/*add all the markers*/
 for (var x in landfills){
 var thisMarker = L.marker([landfills[x].lat, landfills[x].long])
 .bindPopup("<h2>" + landfills[x].facility_name + "</h2>" + "<p class='popup-county'>" + landfills[x].county + " County</p>")
 .openPopup();
 thisMarker.on('click', function(e) {
 console.log("you clicked a marker!");
 mymap.panTo([landfills[x].lat, landfills[x].long]);
 });
 markers.push(thisMarker);
 markers[x].addTo(mymap);

}


 }
leaflet, with tabs!