Old school D3 from simpler times

All examples By author By category About

rgdonohue

Full window Github gist

spotlight filter

Faking a spotlight filter of renewable energy power plants in the US.

<!DOCTYPE html>
<html>

<head>
    <meta charset=utf-8 />
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.min.js"></script>

<link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
    <link href='https://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('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png', 
                                         {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="https://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>

Modified http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js to a secure url

https://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js