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!

Leaflet mega post

Styling specific polygons in a feature collection: http://gis.stackexchange.com/questions/116159/how-to-style-specific-polygons-from-a-geojson-with-leaflet

Leaflet with d3: https://bost.ocks.org/mike/leaflet/

Leaflet with geoJSON: http://leafletjs.com/examples/geojson.html

Correct format for exporting geoJSON with QGIS: http://gis.stackexchange.com/questions/61096/how-to-get-correct-format-of-coordinates-for-export-to-geojson-from-qgis

 

Leaflet mega post