Leaflet polygon filter test

by Alex Azuero

HTML

<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.0.2/nouislider.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.0.2/nouislider.js"></script>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<div id="map"></div>
<br />
<br />
<div class="sliderContainer">
    <div class="noUi-base" id="slider"></div>
</div>

CSS

html, body, #map {
    height: calc(100% - 30px);
    width:100%;
    padding:0px;
    margin:0px;
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #333;
}
.sliderContainer {
    margin: 0 50px;
}
.info {
    padding: 6px 8px;
    font: 14px/16px Arial, Helvetica, sans-serif;
    background: white;
    background: rgba (255, 255, 255, 0.8);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
}
.info h4 {
    margin: 0 0 5px;
    color: #777;
}
.legend {
    text-align: left;
    line-height: 18px;
    color: #555;
}
.legend i {
    width: 18px;
    height: 18px;
    float: left: margin-right: 8px;
    opacity: 0.7;
}

JavaScript

// Initializing noUiSlider to create slider
noUiSlider.create(slider, {
    start: [367329.0, 3053969840.0],
    behaviour: "drag",
    connect: true,
    range: {
        min: 400000000.0,
        max: 2500000000.0
    }
});

// set center coordinates
var coords = [35.60056, -79.450832];

// set default zoom level
var zoomLevel = 7;

// initialize map
var map = L.map('map').setView(coords, zoomLevel);

// set source for map tiles
ATTR = '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a> | ' +
'&copy; <a href="http://cartodb.com/attributions">CartoDB</a>';

CDB_URL = 'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png';

// add tiles to map
L.tileLayer(CDB_URL, {attribution: ATTR}).addTo(map);

var info = L.control();
info.onAdd = function (map) {
    this._div = L.DomUtil.create('div', 'info');
    this.update();
    return this._div;
};
info.update = function (props) {
    this._div.innerHTML = '<h4>Land area: </h4>' + (props ?
        + props.ALAND10/1000000 + ' sq. km<br />' + '<b>Name: ' + props.NAME10 : 'Hover over a County');
};
info.addTo(map);
// Function defining colors for different ranges of data
function getColor(d) {
    return d > 700000 ? '#800026' : d > 300000 ? '#BD0026' : d > 100000 ? '#E31A1C' : d > 70000 ? '#FC4E2A' :
        '#FED976';
}

function style(feature) {
    return {
        color: 'white',
        weight: 2,
        opacity: 1,
        fillOpacity: 0.7,
        fillColor: getColor(feature.properties.POP2010)
    };
}

// Ajax call to read in external geoJson data for choropleth
// This is where I've tried to insert functions to filter the data based on the
// slider, but this has failed thus far.
$.ajax({
    dataType: 'json',
    url: 'https://dl.dropbox.com/s/7ih7qejt54izwbd/nc.geojson',
    success: function (data) {
        $(data.features).each(function (key, data) {
            function highlightFeature(e) {
           ...