Skip to content

Instantly share code, notes, and snippets.

@kaz-a

kaz-a/index.html

Last active February 11, 2016 00:55
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save kaz-a/8503bfb8b44e97c8e0e9 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save kaz-a/8503bfb8b44e97c8e0e9 to your computer and use it in GitHub Desktop.
Download ZIP
NYC Daycare Finder with Leaflet (Primitive)
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta name='viewport' content="width=device-width,initial-scale=1" />
<title>NYC Daycare Facilities</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/MarkerCluster.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/leaflet.markercluster.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
<style>
body {
margin: 0;
padding: 0;
}
#map {
margin: 30px auto;
width:85%;
height: 800px;
}
.leaflet-cluster-anim .leaflet-marker-icon, .leaflet-cluster-anim .leaflet-marker-shadow {
-webkit-transition: -webkit-transform 0.3s ease-out, opacity 0.3s ease-in;
-moz-transition: -moz-transform 0.3s ease-out, opacity 0.3s ease-in;
-o-transition: -o-transform 0.3s ease-out, opacity 0.3s ease-in;
transition: transform 0.3s ease-out, opacity 0.3s ease-in;
}
.leaflet-cluster-spider-leg {
/* stroke-dashoffset (duration and function) should match with leaflet-marker-icon transform in order to track it exactly */
-webkit-transition: -webkit-stroke-dashoffset 0.3s ease-out, -webkit-stroke-opacity 0.3s ease-in;
-moz-transition: -moz-stroke-dashoffset 0.3s ease-out, -moz-stroke-opacity 0.3s ease-in;
-o-transition: -o-stroke-dashoffset 0.3s ease-out, -o-stroke-opacity 0.3s ease-in;
transition: stroke-dashoffset 0.3s ease-out, stroke-opacity 0.3s ease-in;
}
.marker-cluster-small {
background-color: rgba(181, 226, 140, 0.6);
}
.marker-cluster-small div {
background-color: rgba(110, 204, 57, 0.6);
}
.marker-cluster-medium {
background-color: rgba(241, 211, 87, 0.6);
}
.marker-cluster-medium div {
background-color: rgba(240, 194, 12, 0.6);
}
.marker-cluster-large {
background-color: rgba(253, 156, 115, 0.6);
}
.marker-cluster-large div {
background-color: rgba(241, 128, 23, 0.6);
}
/* IE 6-8 fallback colors */
.leaflet-oldie .marker-cluster-small {
background-color: rgb(181, 226, 140);
}
.leaflet-oldie .marker-cluster-small div {
background-color: rgb(110, 204, 57);
}
.leaflet-oldie .marker-cluster-medium {
background-color: rgb(241, 211, 87);
}
.leaflet-oldie .marker-cluster-medium div {
background-color: rgb(240, 194, 12);
}
.leaflet-oldie .marker-cluster-large {
background-color: rgb(253, 156, 115);
}
.leaflet-oldie .marker-cluster-large div {
background-color: rgb(241, 128, 23);
}
.marker-cluster {
background-clip: padding-box;
border-radius: 20px;
}
.marker-cluster div {
width: 30px;
height: 30px;
margin-left: 5px;
margin-top: 5px;
text-align: center;
border-radius: 15px;
font: 12px "Helvetica Neue", Arial, Helvetica, sans-serif;
}
.marker-cluster span {
line-height: 30px;
}
.button {
/*padding-bottom: 20px;*/
}
.btn-all {
background-color: black;
color: white;
}
.btn-GFDC {
background-color: #f61900;
color: white;
margin-right: 4px;
}
.btn-FDC {
background-color: #faa300;
color: white;
margin-right: 4px;
}
.btn-SACC {
background-color: #74bc00;
color: white;
margin-right: 4px;
}
.btn-GDC {
background-color: #2b8d4c;
color: white;
margin-right: 4px;
}
.btn-SBCC {
background-color: #45cae6;
color: white;
margin-right: 4px;
}
.tool {
padding-top: 20px;
}
.text {
padding-left: 90px;
}
</style>
</head>
<body>
<div class="container-fluid tool">
<div class = "col-xs-2 col-md-2"><h4 class = "text">Modality: </h4></div>
<div class = "col-xs-10 col-md-10 button">
<button type="button" id="all" class="btn btn-all">All</button>
</div>
</div>
<div id="map"></div>
<script>
// initialize the map
var map = L.map('map').setView([40.71, -74.00], 11);
//specify tile map service
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiemFrc2Nsb3NldCIsImEiOiJjaWY2dWxkc2gwcXBjczVtM3pnc3hydnI1In0.ABQHwIrVx95WhAVv_2JPeA', {
attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, Imagery © <a href="http://mapbox.com">Mapbox</a>',
maxZoom: 20,
id: 'zakscloset.nj4mj6hk',
accessToken: 'pk.eyJ1IjoiemFrc2Nsb3NldCIsImEiOiJjaWY2dWxkc2gwcXBjczVtM3pnc3hydnI1In0.ABQHwIrVx95WhAVv_2JPeA'
}).addTo(map);
//marker icons
var daycareIcon = L.icon({iconUrl: "https://raw.githubusercontent.com/Kaz-A/daycare_finder/master/images/daycare.png", iconSize: [30,20]}),
gfdcIcon = L.icon({iconUrl: "https://raw.githubusercontent.com/Kaz-A/daycare_finder/master/images/gfdc.png", iconSize: [30, 20]}),
fdcIcon = L.icon({iconUrl: "https://raw.githubusercontent.com/Kaz-A/daycare_finder/master/images/fdc.png", iconSize: [30, 20]}),
saccIcon = L.icon({iconUrl: "https://raw.githubusercontent.com/Kaz-A/daycare_finder/master/images/sacc.png", iconSize: [30, 20]}),
gdcIcon = L.icon({iconUrl: "https://raw.githubusercontent.com/Kaz-A/daycare_finder/master/images/gdc.png", iconSize: [30, 20]}),
sbccIcon = L.icon({iconUrl: "https://raw.githubusercontent.com/Kaz-A/daycare_finder/master/images/sbcc.png", iconSize: [30, 20]});
//popup function
function popup(feature, layer) {
var popupContent = "<h4>" + feature.properties.CENTER_NAME + "</h4><br />" +
"<p>Address: " + feature.properties.ADDRESS + "<br />" +
"Permit: " + feature.properties.permit + "<br />" +
"Status: " + feature.properties.STATUS + "<br />" +
"Modality: " + feature.properties.Modality + "<br />" +
"Risk Level = " + feature.properties.risklevel + "<br />" +
"Last Inspection: " + feature.properties.last_inspectiondate + "<br />" +
"last_SRI_visitdate: " + feature.properties.last_SRI_visitdate + "<br />" +
"Data by " + feature.properties.CityVState + "</p>";
if (feature.properties && feature.properties.popupContent) {
popupContent += feature.properties.popupContent;
};
layer.bindPopup(popupContent);
};
//load data
var geojson = "https://raw.githubusercontent.com/Kaz-A/daycare_finder/master/childcare.geojson";
$.getJSON(geojson, function(data){
//get unique modality values
var modalityFeatures = data.features;
//console.log(modalityFeatures);
var uniqueModality = [];
modalityFeatures.forEach(function(x){
if (!modalityFeatures[x.properties.Modality]) {
uniqueModality.push(x.properties.Modality);
modalityFeatures[x.properties.Modality] = true;
}
});
console.log(uniqueModality);
//buttons
var buttonList = $(".button").addClass("button");
var i = 0;
var modalityButtons = "";
$.each(uniqueModality, function () {
modalityButtons += '<button type = "button"' + 'id = "' + this + '" class = "btn btn-' + this + '">'+ this + '</button>';
});
$(modalityButtons).appendTo(buttonList);
//show all data
var daycares = L.geoJson(data, {
pointToLayer: function(feature, latlng) {
var marker = L.marker(latlng, { icon: daycareIcon });
popup(feature, marker);
return marker;
}
});
//show only gfdc data
var gfdc = L.geoJson(data, {
filter: function(feature, layer) {
return feature.properties.Modality == "GFDC";
},
pointToLayer: function(feature, latlng) {
var marker = L.marker(latlng, { icon: gfdcIcon });
popup(feature, marker);
return marker;
}
});
//show only fdc data
var fdc = L.geoJson(data, {
filter: function(feature, layer) {
return feature.properties.Modality == "FDC";
},
pointToLayer: function(feature, latlng) {
var marker = L.marker(latlng, { icon: fdcIcon });
popup(feature, marker);
return marker;
}
});
//show only sacc data
var sacc = L.geoJson(data, {
filter: function(feature, layer) {
return feature.properties.Modality == "SACC";
},
pointToLayer: function(feature, latlng) {
var marker = L.marker(latlng, { icon: saccIcon });
popup(feature, marker);
return marker;
}
});
//show only gdc data
var gdc = L.geoJson(data, {
filter: function(feature, layer) {
return feature.properties.Modality == "GDC";
},
pointToLayer: function(feature, latlng) {
var marker = L.marker(latlng, { icon: gdcIcon });
popup(feature, marker);
return marker;
}
});
//show only sbcc data
var sbcc = L.geoJson(data, {
filter: function(feature, layer) {
return feature.properties.Modality == "SBCC";
},
pointToLayer: function(feature, latlng) {
var marker = L.marker(latlng, { icon: sbccIcon });
popup(feature, marker);
return marker;
}
});
console.log(data);
//marker cluster
var daycareClusters = L.markerClusterGroup({
disableClusteringAtZoom: 15
});
daycareClusters.addLayer(daycares);
map.addLayer(daycareClusters);
var gfdcClusters = L.markerClusterGroup({
disableClusteringAtZoom: 14
});
var fdcClusters = L.markerClusterGroup({
disableClusteringAtZoom: 14
});
var saccClusters = L.markerClusterGroup({
disableClusteringAtZoom: 14
});
var gdcClusters = L.markerClusterGroup({
disableClusteringAtZoom: 14
});
var sbccClusters = L.markerClusterGroup({
disableClusteringAtZoom: 14
});
$("#GFDC").click(function() {
gfdcClusters.addLayer(gfdc);
map.addLayer(gfdcClusters);
map.removeLayer(fdcClusters);
map.removeLayer(saccClusters);
map.removeLayer(gdcClusters);
map.removeLayer(sbccClusters);
map.removeLayer(daycareClusters);
});
$("#FDC").click(function() {
fdcClusters.addLayer(fdc);
map.addLayer(fdcClusters);
map.removeLayer(gfdcClusters);
map.removeLayer(saccClusters);
map.removeLayer(gdcClusters);
map.removeLayer(sbccClusters);
map.removeLayer(daycareClusters);
});
$("#SACC").click(function() {
saccClusters.addLayer(sacc);
map.addLayer(saccClusters);
map.removeLayer(gfdcClusters);
map.removeLayer(fdcClusters);
map.removeLayer(gdcClusters);
map.removeLayer(sbccClusters);
map.removeLayer(daycareClusters);
});
$("#GDC").click(function() {
gdcClusters.addLayer(gdc);
map.addLayer(gdcClusters);
map.removeLayer(gfdcClusters);
map.removeLayer(fdcClusters);
map.removeLayer(saccClusters);
map.removeLayer(sbccClusters);
map.removeLayer(daycareClusters);
});
$("#SBCC").click(function() {
sbccClusters.addLayer(sbcc);
map.addLayer(sbccClusters);
map.removeLayer(gfdcClusters);
map.removeLayer(fdcClusters);
map.removeLayer(saccClusters);
map.removeLayer(gdcClusters);
map.removeLayer(daycareClusters);
});
$("#all").click(function() {
daycareClusters.addLayer(daycareClusters);
map.addLayer(daycareClusters);
map.removeLayer(gfdcClusters);
map.removeLayer(fdcClusters);
map.removeLayer(saccClusters);
map.removeLayer(gdcClusters);
map.removeLayer(sbccClusters);
//map.addLayer(gfdcClusters);
//map.addLayer(fdcClusters);
//map.addLayer(saccClusters);
//map.addLayer(gdcClusters);
//map.addLayer(sbccClusters);
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment