<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Richmond GeoTracker Sites</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<!-- latest version of CARTO.js -->
<script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js"></script>
<!-- latest version of jquery -->
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<!-- style sheet for CARTO.js -->
<link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css" />
<!-- style sheet for google fonts -->
<link href='//fonts.googleapis.com/css?family=Vollkorn' rel='stylesheet' type='text/css'>
<style>
body {
margin: 0;
padding: 0;
background: whitesmoke;
font-family: 'Vollkorn';
color: #0D0000;
}
header {
padding:6px 10%;
}
#map {
position: absolute;
width: 100%;
top: 0;
bottom: 0;
}
h1 {
position: absolute; /* Postion relative to parent element (body) */
z-index: 650; /* Ensures element will be higher in stacking order */
top: 10px; /* Postion relative to top */
left: 15px; /* Position relative to left */
padding: 8px 15px;
margin: 0;
color: whitesmoke;
font-size: 1.5em;
background: gray;
border-radius: 5px
}
#layer-controls {
position: absolute;
font-family: 'Vollkorn';
top: 15px;
right: 15px;
margin: 10px 15px;
z-index: 100;
}
button {
display: block;
}
.legend {
padding: 6px 8px;
font-family: "Vollkorn";
font-size: 1em;
background: rgba(255, 255, 255,0.8);
box-shadow: 0 0 15px rgba(0,0,0,2);
border-radius: 5px;
}
.legend h3 {
font-size: 1.1em;
font-weight: normal;
color: #001323;
margin: 0 0 10px 0;
}
.legend span {
width: 20px;
height: 20px;
float: left;
border: 1px solid;
margin: 0 10px 4px 0;
}
.legend label {
font-size: 1.1em;
}
.legend label:after {
content: '';
display: block;
clear: both;
}
.cartodb-logo {
display:none!important;
}
</style>
</head>
<body>
<h1>Richmond GeoTracker Sites</h1>
<div id="layer-controls">
<button id="sublayer0" class="btn">LUST</button>
<button id="sublayer1" class="btn">CLEANUP PROGRAM</button>
<button id="sublayer2" class="btn">MILITARY UST</button>
<button id="sublayer3" class="btn">MILITARY CLEANUP</button>
<button id="sublayer4" class="btn">MILITARY PRIVATIZED</button>
</div>
<div id='map'></div>
<script type="cartocss/html" id="site-styles">
#geotracker_sites {
marker-fill-opacity: 0.9;
marker-line-color: #000000;
marker-line-width: .5;
marker-line-opacity: 1;
marker-placement: point;
marker-type: ellipse;
marker-width: 7;
marker-allow-overlap: true;
[zoom > 12]{
marker-width: 9;
}
}
#geotracker_sites[site_type="LUST CLEANUP SITE"] {
marker-fill: #8dd3c7;
}
#geotracker_sites[site_type="CLEANUP PROGRAM SITE"] {
marker-fill: #ffffb3;
}
#geotracker_sites[site_type="MILITARY UST SITE"] {
marker-fill: #bebada;
}
#geotracker_sites[site_type="MILITARY CLEANUP SITE"] {
marker-fill: #fb8072;
}
#geotracker_sites[site_type="MILITARY PRIVATIZED SITE"] {
marker-fill: #80b1d3;
}
</script>
<script>
// Object to hold map options
var options = {
center: [37.949874, -122.348557], // Portrero and S.22nd
zoom: 12,
minZoom: 12,
maxZoom: 19,
zoomControl: false,
},
// Create map object and pass it our options
map = L.map('map', options);
// Load map tiles from CARTO and add to map
var tiles = L.tileLayer('http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png', {
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> © <a href="http://cartodb.com/attributions">CartoDB</a> | Map Authored by <a href="https://bazini627.github.io/" target="blank">Matthew Bacinskas</a>',
subdomains: 'abcd',
maxZoom: 19
}).addTo(map);
// Move zoom controls to bottom left
L.control.zoom({
position:'bottomright'
}).addTo(map);
var layerSource = {
user_name: 'mjbmaps',
type: 'cartodb',
sublayers: [{
sql: "SELECT * FROM mjbmaps.geotrackerrichmond_copy WHERE site_type = 'LUST CLEANUP SITE'",
cartocss: $("#site-styles").text()
},
{
sql: "SELECT * FROM mjbmaps.geotrackerrichmond_copy WHERE site_type = 'CLEANUP PROGRAM SITE'",
cartocss: $("#site-styles").text()
},
{
sql: "SELECT * FROM mjbmaps.geotrackerrichmond_copy WHERE site_type = 'MILITARY UST SITE'",
cartocss: $("#site-styles").text()
},
{
sql: "SELECT * FROM mjbmaps.geotrackerrichmond_copy where site_type = 'MILITARY CLEANUP SITE'",
cartocss: $("#site-styles").text()
},
{
sql: "SELECT * FROM mjbmaps.geotrackerrichmond_copy where site_type = 'MILITARY PRIVATIZED SITE'",
cartocss: $("#site-styles").text()
}]
}
var sublayers = [];
cartodb.createLayer(map, layerSource)
.addTo(map)
.done(function(layer) {
for (var i = 0; i < layer.getSubLayerCount(); i++) {
sublayers[i] = layer.getSubLayer(i);
cartodb.vis.Vis.addInfowindow(map, layer.getSubLayer(i), ['site_name','address','site_type','status']);
}
})
.error(function(err) {
console.log("An error occurred: " + err);
});
drawLegend();
$("#layer-controls button").on('click', function(e) {
var currentLayer = $(e.target).attr('id'),
currentIndex = currentLayer.slice(-1);
sublayers[currentIndex].toggle();
});
// Function to get color for site types
function getColor(d) {
return d == "LUST CLEANUP SITE" ? '#8dd3c7' :
d == "CLEANUP PROGRAM SITE" ? '#ffffb3' :
d == "MILITARY UST SITE" ? '#bebada' :
d == "MILITARY CLEANUP SITE" ? '#fb8072' :
'#80b1d3';
}
// Function to create legend
function drawLegend() {
// Variable for our Leaflet Control object
var legend = L.control({position: 'bottomleft'});
// Anonymous function to create html elements of our legend
legend.onAdd = function () {
var div = L.DomUtil.create('div', 'legend'),
siteTypes = ['LUST CLEANUP SITE', 'CLEANUP PROGRAM SITE', 'MILITARY UST SITE', 'MILITARY CLEANUP SITE','MILITARY PRIVATIZED SITE'];
div.innerHTML = "<h3>" + "Cleanup Site Types" + "</h3>";
// Loop through site types array declared above
for (var i = 0; i < siteTypes.length; i++) {
var color = getColor(siteTypes[i]); // variable to hold color for each site type from getColor function
// Build structure of the legend
div.innerHTML += '<span style="background:' + color + '"></span> ' + '<label>' + siteTypes[i] + '</label>';
}
return div;
};
legend.addTo(map);
}
</script>
</body>
</html>
// Code goes here
/* Styles go here */