Creating a geojson-vt and displaying in Leaflet 0.7 - leaflet

Question

I have a GEOJSON that I am loading up and displaying on a map using Leaflet it is, colour coding them depending on the abundance of the animal in an area and able to display a popup with more information.
What I have been trying to do is turn this into a vectorTile using geojson-vt and display this. This polygon geojson is one of the smaller and takes a long time to load and some others crash the browser.
I have tired to work through the example here http://bl.ocks.org/Sumbera/c67e5551b21c68dc8299 but I cannot understand what is happening.
I am definitely open to other ideas on how to display this data, I am very much a newbie.
If you wish to see what I have so far please look at http://huntingspots.co.nz/gareth/leaflet_layering.html.
Thank you very much for your time.
//Pig Layer
var pigLayer = new L.LayerGroup();
$.getJSON("feralpig.geojson",function(hoodData){
L.geoJson( hoodData, {
style: function(feature){
var fillColour,
abundance = feature.properties.Abundance;
if (abundance == "H") fillColour = "#194866";
else if ( abundance == "M" ) fillColour = "#2c7eb2";
else if ( abundance == "L" ) fillColour = "#40b5ff";
else fillColour = "#f7f7f7"; // no data
return { color: "#999", weight: 1, fillColor: fillColour, fillOpacity: .4 };
},
onEachFeature: function( feature, layer ){
layer.bindPopup( "<strong>" + "Species: " + "</strong>" + feature.properties.Scientific
+ "<br/>" + "<strong>" + "Common Name: " + "</strong>" + feature.properties.CommonName
+ "<br/>" + "<strong>" + "Abundance: " + "</strong>" + feature.properties.Abundance
+ "<br/>" + "<strong>" + "Data collection method: " + "</strong>" + feature.properties.AbundRelia
+ "<br/>" + "<strong>" + "Notes: " + "</strong>" + feature.properties.AbundNotes);
}
}).addTo(pigLayer);
});