Faking a spotlight filter of renewable energy power plants in the US.
forked from rgdonohue‘s block: spotlight filter
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<link rel="stylesheet" href="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<link href='//fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
width: 100%;
top: 0;
bottom: 0;
}
</style>
</head>
<body>
<div id='map'></div>
<script src="power-plants.js"></script>
<script>
var map = L.map('map', {
center: [36,-94],
zoom: 4,
});
var tiles = L.tileLayer('//{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
{
attribution: '© <a href="//www.openstreetmap.org/copyright">OpenStreetMap</a> © <a href="//cartodb.com/attributions">CartoDB</a>',
subdomains: 'abcd',
minZoom: 0,
maxZoom: 18
});
map.addLayer(tiles);
plants.features.sort(function(a,b) {
return b.properties.capacity_mw - a.properties.capacity_mw;
});
var commonStyles = {
stroke: false,
fill: false,
fillOpacity: .8
}
var radiusCircle = L.circle([0,0], 500000, {
fillColor: false,
fillOpacity: .1,
stroke: false,
weight: 3,
}).addTo(map);
var layerInfo = {
hydroLayer: {source:"Hydro", color:'#1f78b4'},
windLayer: {source:"Wind", color:'#a6cee3'},
solarLayer: {source:"Solar", color:'#ffff99'},
}
var geoJsonLayers = {};
for(var layer in layerInfo) {
geoJsonLayers[layer] = L.geoJson(plants, {
pointToLayer: function(feature,latlng) {
return L.circleMarker(latlng, commonStyles);
},
filter: function(feature) {
if(feature.properties.fuel_source[layerInfo[layer].source]) {
return feature;
}
},
style: function(feature) {
return {
color: layerInfo[layer].color,
fillColor: layerInfo[layer].color,
radius: getRadius(feature.properties.fuel_source[layerInfo[layer].source])
}
}
}).addTo(map);
}
function getRadius(val) {
var radius = Math.sqrt(val/Math.PI);
return radius * .8;
}
map.on('mousemove', function(e) {
radiusCircle.setStyle({fillColor: "white"}).setLatLng(e.latlng);
for(var l in geoJsonLayers) {
geoJsonLayers[l].eachLayer(function(layer) {
var distance = e.latlng.distanceTo(layer.getLatLng())/1000;
if(distance > 500) {
layer.setStyle({
fill: false
});
} else {
layer.setStyle({
fill: true
});
layer.bindPopup(distance.toLocaleString()+" km from click");
}
});
}
});
var sourcesLayers = {
"<b style='color:#1f78b4'>Hydro</b>": geoJsonLayers.hydroLayer,
"<b style='color:#a6cee3'>Wind</b>": geoJsonLayers.windLayer,
"<b style='color:#ffff99; text-shadow: 0px 0px 1px #333;'>Solar</b>": geoJsonLayers.solarLayer
}
L.control.layers(null, sourcesLayers, { collapsed:false }).addTo(map);
</script>
</body>
</html>