tkayne23/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
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

  
## index.html
<!DOCTYPE html>
<html>
<head>
    // initialize the map
    <meta charset='utf-8' />
    <title>Evanston Parcels</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>

// add this for the geocoder
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.0.1/mapbox-gl-geocoder.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.0.1/mapbox-gl-geocoder.css' type='text/css' />

<div id='map'></div>

<div id='sqft-legend' class='legend'>
    <h4>Evanston Residential Classifications</h4>
    <div><span style='background-color: #d257e0'></span>parcel outlines</div>
    <div><span style='background-color: #09d7ce'></span>2-01 Garage</div>
    <div><span style='background-color: #04070e'></span>2-03 1 story,any age, 1000-1800 sq ft</div>
    <div><span style='background-color: #04070e'></span>2-04 1 story, any age, 1801 +</div>
    <div><span style='background-color: #04070e'></span>2-05 2+ stories, over 62 yrs, up to 2200 sq ft</div>
    <div><span style='background-color: #04070e'></span>2-06 2+ stories, over 62 yrs, 2201 - 4999 sq ft</div>
    <div><span style='background-color: #04070e'></span>2-07 2+ stories, up to 62 yrs, up to 2000 sq ft</div>
    <div><span style='background-color: #04070e'></span>2-08 2+ stories, up to 62 yrs, 3801 - 4999 sq ft</div>
    <div><span style='background-color: #04070e'></span>2-09 2+ stories, any age, 5000+ sq ft</div>
    <div><span style='background-color: #04070e'></span>2-10 row house, over 62 yrs</div>
    <div><span style='background-color: #04070e'></span>2-11 apartment bldg, 2 - 6 units, any age</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 a geocoder
    map.addControl(new MapboxGeocoder({
    accessToken: mapboxgl.accessToken
    }));

    // add navigational control
    var nav = new mapboxgl.NavigationControl();
    map.addControl(nav, 'top-left');

  	// 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': { },
        // will use paint for 5 breaks based on Jenks optimization method
        // light (less something) to dark (higher something)
        // white means a null value; either don't have value or no tax generated
        }, '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"> Property Class: ' + feature.properties['L_PropClass'] + " </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>
	<!DOCTYPE html>
	<html>
	<head>
	// initialize the map
	<meta charset='utf-8' />
	<title>Evanston Parcels</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>

	// add this for the geocoder
	<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.0.1/mapbox-gl-geocoder.js'></script>
	<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.0.1/mapbox-gl-geocoder.css' type='text/css' />

	<div id='map'></div>

	<div id='sqft-legend' class='legend'>
	<h4>Evanston Residential Classifications</h4>
	<div><span style='background-color: #d257e0'></span>parcel outlines</div>
	<div><span style='background-color: #09d7ce'></span>2-01 Garage</div>
	<div><span style='background-color: #04070e'></span>2-03 1 story,any age, 1000-1800 sq ft</div>
	<div><span style='background-color: #04070e'></span>2-04 1 story, any age, 1801 +</div>
	<div><span style='background-color: #04070e'></span>2-05 2+ stories, over 62 yrs, up to 2200 sq ft</div>
	<div><span style='background-color: #04070e'></span>2-06 2+ stories, over 62 yrs, 2201 - 4999 sq ft</div>
	<div><span style='background-color: #04070e'></span>2-07 2+ stories, up to 62 yrs, up to 2000 sq ft</div>
	<div><span style='background-color: #04070e'></span>2-08 2+ stories, up to 62 yrs, 3801 - 4999 sq ft</div>
	<div><span style='background-color: #04070e'></span>2-09 2+ stories, any age, 5000+ sq ft</div>
	<div><span style='background-color: #04070e'></span>2-10 row house, over 62 yrs</div>
	<div><span style='background-color: #04070e'></span>2-11 apartment bldg, 2 - 6 units, any age</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 a geocoder
	map.addControl(new MapboxGeocoder({
	accessToken: mapboxgl.accessToken
	}));

	// add navigational control
	var nav = new mapboxgl.NavigationControl();
	map.addControl(nav, 'top-left');

	// 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': { },
	// will use paint for 5 breaks based on Jenks optimization method
	// light (less something) to dark (higher something)
	// white means a null value; either don't have value or no tax generated
	}, '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"> Property Class: ' + feature.properties['L_PropClass'] + " </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>