D3 Examples - Laughlin choropleth+hover+popup

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    // initialize the map
    <meta charset='utf-8' />
    <title>Laughlin Housing</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.32.1/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.32.1/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>
  
// style the popup
<style>
.mapboxgl-popup {
    max-width: 400px;
    font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
}
</style>
​
// style the legend
<style>
.legend {
    background-color: #fff;
    border-radius: 3px;
    bottom: 30px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.10);
    font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
    padding: 10px;
    position: absolute;
    right: 10px;
    z-index: 1;
}
​
.legend h4 {
    margin: 0 0 10px;
}
​
.legend div span {
    border-radius: 50%;
    display: inline-block;
    height: 10px;
    margin-right: 5px;
    width: 10px;
}
​
</style>
  
  
<div id='map'></div>
  
<div id='sqft-legend' class='legend'>
    <h4>Homes By Sq Ft</h4>
    <div><span style='background-color: #980043'></span>1843-2274</div>
    <div><span style='background-color: #dd1c77'></span>1653-1842</div>
    <div><span style='background-color: #df65b0'></span>1466-1652</div>
    <div><span style='background-color: #c994c7'></span>1341-1465</div>
    <div><span style='background-color: #d4b9da'></span>1229-1340</div>
    <div><span style='background-color: #3182bd'></span>Not Defined</div>
</div>
  
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoidGtheW5lMjMiLCJhIjoiN2ZuVll5MCJ9.INSHe8gm7HMfO8HZPUuAhg';
var map = new mapboxgl.Map({
    container: 'map',
    // use any style; this is a predefined mapbox style
    style: 'mapbox://styles/mapbox/satellite-streets-v9',
    center: [-100.789, 29.351],
    zoom: 14.2
});
  
map.on('load', function () {
  
    // add navigational control
    var nav = new mapboxgl.NavigationControl();
    map.addControl(nav, 'top-right');
  
    // source is a TMK tileset with data driven info
    map.addSource('laughlincombined4326', {
        type: 'vector',
        url: 'mapbox://tkayne23.5b9u73tj'
     
    });
  
    // add a layer name from the tileset just before the water layer
    // consider dashArray for borders and box/drop shadow for depth
    map.addLayer({
        'id': 'homes-fill',
        // types: background, fill, line, symbol, raster, circle, fill-extrusion
        'type': 'fill',
        'source': 'laughlincombined4326',
        // use source-layer if from a vector tile source
        'source-layer': 'LaughlinCombined4326-durrw3',
        // layout refers to placement and visibility (visible or none)
        'layout': { },
        // paint 5 breaks based on Jenks optimization method
        // light (smaller homes) to dark (larger homes)
        // white means a null value
        'paint': {
              'fill-color': {
              'property': 'Yardi-UnitSqFt',
              'type': 'interval',
              'stops': [
                    [0, '#3182bd'],
                    [1229, '#d4b9da'],
                    [1341, '#c994c7'],
                    [1466, '#df65b0'],
                    [1653, '#dd1c77'],
                    [1843, '#980043']
                  ]
               },
              'fill-outline-color': '#000000',
              'fill-opacity': 0.9
            }
        }, 'water');
​
    map.addLayer({
        'id': 'homes-fill-hover',
        'type': 'fill',
        'source': 'laughlincombined4326',
        'source-layer': 'LaughlinCombined4326-durrw3',
        'layout': {},
        'paint': {
        'fill-color': '#627BC1',
        'fill-outline-color': '#000000',
        'fill-opacity': 1
        },
        'filter': ['==', 'name', '']
    });
​
    // When the user moves their mouse over the page, we look for features
    // at the mouse position (e.point) and within the states layer (states-fill).
    // If a feature is found, then we'll update the filter in the state-fills-hover
    // layer to only show that state, thus making a hover effect.
    map.on('mousemove', function(e) {
        var features = map.queryRenderedFeatures(e.point, { layers: ['homes-fill'] });
        if (features.length) {
            map.setFilter('homes-fill-hover', ['==', 'addr_house', features[0].properties.addr_house]);
        } else {
            map.setFilter('homes-fill-hover', ['==', 'addr_house', '']);
        }
    });
​
    // Reset the state-fills-hover layer's filter when the mouse leaves the map
    map.on('mouseout', function() {
        map.setFilter('homes-fill-hover', ['==', 'addr_house', '']);
    });  
  
  
  
  
  
// When a click event occurs near a polygon, open a popup at the location of
// the feature, with description HTML from its properties.
map.on('click', function (e) {
    var features = map.queryRenderedFeatures(e.point, { layers: ['homes-fill'] });
    if (!features.length) {
        return;
    }
​
    var feature = features[0];
    // give popup info to display
    var popup = new mapboxgl.Popup()
        .setLngLat(map.unproject(e.point))
        .setHTML('<div id="popup" class="popup" style="z-index: 10;"> <h4> Yardi Unit Details: </h4>' +
            '<ul class="list-group">' +
            '<li class="list-group-item"> Unit #: ' + feature.properties['Yardi-Unit'] + " </li>" +
            '<li class="list-group-item"> Unit Sq Ft: ' + feature.properties['Yardi-UnitSqFt'] + " </li>" +
            '<li class="list-group-item"> Unit Type: ' + feature.properties['Yardi-UnitType'] + " </li>" + '</ul> </div>')
        .addTo(map);
  });
​
});
</script>
​
</body>
</html>
​
    