Evanston map - popup w more info

This block shows Evanston parcel outlines (magenta) along with building footprints (teal). If the building footprints cannot be seen, zoom in to view them. A hover is provided for highlighting each parcel and clicking on it to view the PIN number.

14 properties | This layer contains mostly MultiPolygons L_Owner String L_Township String L_Address String L_PropClass String L_TaxCode String L_Assess2EstValue String L_EstVal2LotSize String SHAPE_STAr Number L_AssessPropValue String SHAPE_STLe Number L_TaxRate String PIN14 String L_EstPropValue String L_LotSize String Raw index.html

<!DOCTYPE html>
<html>
<head>
    // initialize the map
    <meta charset='utf-8' />
    <title>Evanston</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>Evanston Parcels</h4>
    <div><span style='background-color: #09d7ce'></span>buildings</div>
    <div><span style='background-color: #d257e0'></span>parcel outlines</div>
    <div><span style='background-color: #04070e'></span>not defined</div>
    <div><span style='background-color: #04070e'></span>click for market value</div>
</div>
  
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoidGtheW5lMjMiLCJhIjoiN2ZuVll5MCJ9.INSHe8gm7HMfO8HZPUuAhg';
var map = new mapboxgl.Map({
    container: 'map',
  	// use any style; this is Evanston with parcels and buildings
    style: 'mapbox://styles/tkayne23/civfnfqk8000o2iqo0sasuhvs',
    center: [-87.686, 42.044],
    zoom: 13.0
});
  
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('loveland4326', {
        type: 'vector',
        url: 'mapbox://tkayne23.1qwl2tck'
     
    });
  
  	// 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': 'parcel-data',
        // types: background, fill, line, symbol, raster, circle, fill-extrusion
        'type': 'fill',
        'source': 'loveland4326',
        // use source-layer if from a vector tile source
        'source-layer': 'LovelandInfo4326-8lupyf',
        // 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
        }, 'evanstonesribuildings-6ijp00');
    map.addLayer({
        'id': 'parcel-data-hover',
        'type': 'fill',
        'source': 'loveland4326',
        'source-layer': 'LovelandInfo4326-8lupyf',
        'layout': {},
        'paint': {
        'fill-color': '#627BC1',
        'fill-outline-color': '#000000',
        'fill-opacity': 0.7
        },
        'filter': ['==', 'PIN14', '']
    });
    // When the user moves their mouse over the page, we look for features
    // at the mouse position (e.point) and within the parcel layer (parcel-data).
    // If a feature is found, then we'll update the filter in the parcel-data-hover
    // layer to only show that parcel, thus making a hover effect.
    map.on('mousemove', function(e) {
        var features = map.queryRenderedFeatures(e.point, { layers: ['parcel-data'] });
        if (features.length) {
            map.setFilter('parcel-data-hover', ['==', 'PIN14', features[0].properties.PIN14]);
        } else {
            map.setFilter('parcel-data-hover', ['==', 'PIN14', '']);
        }
    });
    // Reset the state-fills-hover layer's filter when the mouse leaves the map
    map.on('mouseout', function() {
        map.setFilter('parcel-data-hover', ['==', 'PIN14', '']);
    });

// 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: ['parcel-data'] });
    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> Parcel Details: </h4>' +
            '<ul class="list-group">' +
            '<li class="list-group-item"> PIN #: ' + feature.properties['PIN14'] + " </li>" +
            '<li class="list-group-item"> Owner: ' + feature.properties['L_Owner'] + " </li>" +
            '<li class="list-group-item"> Address: ' + feature.properties['L_Address'] + " </li>" +
            '<li class="list-group-item"> Cook County Market Value: ' + feature.properties['L_EstPropValue'] + " </li>" + '</ul> </div>')
        // take this one out eventually
        // .setHTML(feature.properties.L_EstPropValue)
        .addTo(map);
});
});
</script>

</body>
</html>

https://api.tiles.mapbox.com/mapbox-gl-js/v0.32.1/mapbox-gl.js