Skip to content

Instantly share code, notes, and snippets.

@kylejshaffer

kylejshaffer/index.html

Last active August 29, 2015 14:27
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kylejshaffer/18ad479079b5ac051a0d to your computer and use it in GitHub Desktop.
Save kylejshaffer/18ad479079b5ac051a0d to your computer and use it in GitHub Desktop.
Download ZIP
Choropleth Filter
Raw
index.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.0.2/nouislider.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.0.2/nouislider.js"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
</head>
<style>
#map {
height: 100%;
width: 100%;
}
.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;
}
</style>
<body>
<div class="noUi-base" id="slider"></div>
<div id="map"></div>
<script>
// Initializing noUiSlider to create slider
noUiSlider.create(slider, {
start: [367329.0, 3053969840.0],
behaviour: "drag",
connect: true,
range: { min: 367329.0, max: 3053969840.0 }
});
// Leaflet script for map
var map = L.map('map').setView([35.60056, -79.450832], 7);
var tile = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
maxZoom: 20,
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: 'examples.map-i86knfo3'
}).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>2010 Population: </h4>' + (props ?
'<b>POP: ' + props.AWATER10 + '</b><br />' + '<b>Name: ' + props.NAME10 + '</b><br />' + props.POP2010 + ' % of users' : '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: 'nc.geojson',
success: function(data) {
$(data.features).each(function(key, data) {
function highlightFeature(e) {
var layer = e.target;
layer.setStyle({
weight: 5,
color: '#666',
dashArray: '',
fillOpacity: 0.5
});
if (!L.Browser.ie && !L.Browser.opera) {
layer.bringToFront();
}
info.update(layer.feature.properties);
}
function resetHighlight(e) {
zips.resetStyle(e.target);
info.update();
}
function zoomToFeature(e) {
map.fitBounds(e.target.getBounds());
}
function onEachFeature(feature, layer) {
layer.on({
mouseover: highlightFeature,
mouseout: resetHighlight,
click: zoomToFeature
});
}
var zips = L.geoJson(data, {
onEachFeature: onEachFeature,
style: style,
})/*.addTo(map)*/;
var group = L.featureGroup([zips]).addLayer(zips).addTo(map);
// Slider inserted in Ajax function for reading in data.
var slider = document.getElementById("slider");
// JQuery function for filtering based on reading in parameters of slider object.
// This section of the code should perform the filtering of the shapes, but
// currently only removes all shapes.
$("#slider").click(function(event) {
range = $("#slider").val();
rangeMin = range.slice(0,1);
rangeMax = range.slice(1);
console.log(range);
console.log(rangeMin);
console.log(rangeMax);
group.clearLayers();
digital_zips = L.geoJson(data, {
filter: function(feature, layer) {
return (feature.properties.AWATER10 <= rangeMax) & (feature.properties.AWATER10 >= rangeMin);
}
});
group = L.featureGroup().addLayer(digital_zips);
group.addTo(map);
});
});
}
}).error(function() {});
var legend = L.control({position: 'bottomright'});
legend.onAdd = function(map) {
var div = L.DomUtil.create('div', 'info legend'),
grades = [0, 0.2, 0.6, 0.8, 1],
labels = [],
from, to;
for (var i = 0; i < grades.length; i++) {
from = grades[i];
to = grades[i + 1];
labels.push(
'<i style="background:' + getColor(from + 1) + '"></i> ' +
from + (to ? '&ndash;' + to : '+'));
}
div.innerHTML = labels.join('<br>');
return div;
};
legend.addTo(map);
</script>
</body>
</html>
Display the source blob
Display the rendered blob
Raw
nc.geojson
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment