Skip to content

/ hacolp-cds

Permalink
master

hacolp-cds/mapbox-hacolp-github/Website/HACOLP_template_LayerFilter.html

Go to file
 
 
Cannot retrieve contributors at this time
433 lines (365 sloc) 13.1 KB
Raw Blame
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="assets/ico/favicon.ico">
<title>Historical Atlast of Canada</title>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/flick/jquery-ui.css">
<!-- Mapbox -->
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.37.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.37.0/mapbox-gl.css' rel='stylesheet' />
<style>
/* Full Screen Mapbox + Navbar edits */
html, body {
height:100%;
width: 100%;
margin:0;
overflow:hidden;
}
#map {
height:100%;
width:100%
}
/*Container bottom left*/
#console {
position: absolute;
width: 420px;
margin: 10px;
padding: 10px 20px;
background-color: white;
bottom:20px;
z-index:10000;
}
#console hr {
margin-left:-20px;
margin-right:-20px;
color: #123455;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
padding: 0;
}
.mapboxgl-popup {
max-width: 400px;
}
.mapboxgl-popup-content {
margin:0;
padding:10px;
padding-bottom: 0;
}
.mapboxgl-popup-content h5{
margin:0;
font-size:15px;
margin-right:15px;
margin-bottom:5px;
}
#popup > li {
border:0;
padding:0;
margin:0;
margin-left:20px
}
h1 {
font-size: 20px;
margin-top:0
}
h2 {
font-size: 14px;
}
a {
text-decoration: none;
color: #2DC4B2;
}
.label {
width: 15%;
display: inline-block;
text-align: center;
}
/* Customize jQuery Slider UI - Handle color and shape*/
.ui-slider .ui-slider-handle {
width: 20px;
height: 20px;
background: #f6931f;
border-radius: 50%;
border: none;
cursor: pointer;
}
/* Customizing Slider UI - Handle placement along slider to line up*/
.ui-slider-horizontal .ui-slider-handle {
top: 50%;
margin-top: -10px;
}
.ui-slider-horizontal {
height: 6px;
}
/* Style the counter*/
#yearCount{
border:0;
color:#f6931f;
font-weight:bold;
font-size:14px;
width:50px
}
#console > label {
font-weight:bold;
font-size:14px;
}
/* Style the legend inside the sliderLegend div */
label_scale{
display: inline-block;
text-align:center;
font-size:10px;
}
/* Style the legend inside the sliderLegend div - ensures the first label appears over the slider start */
label_scale:first-child{
text-align:left;
margin-left:-10px;
margin-right:10px;
}
/* Style the legend inside the sliderLegend div - ensures the last label appears over the slider end */
label_scale:last-child{
text-align:right;
margin-right:-10px;
padding-left:10px;
}
</style>
</head>
<body>
<!-- Map Container positioned below Bootsrap bar-->
<div id='map'>
</div>
<!-- Top left container -->
<div id='console'>
<!-- Counter that updates as slider is changed to declare selected value -->
<label class="control-label">Time Slider - Census Year:</label>
<input type="text" id="yearCount" readonly>
<!-- Spacing -->
<br>
<br>
<!-- jQuery Slider -->
<div id="slider" style="width:100%;" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"></div>
<!-- Legend that appears below the slider -->
<div id="sliderLegend"></div>
<!-- End of top left container contents -->
</div>
<script>
//Mapbox GL API Access token
mapboxgl.accessToken = 'pk.eyJ1IjoiYnlyb25tb2xkb2Zza3kiLCJhIjoiY2lrNXh0Y2s1MDBoZnY2a3RldHpwZXlicSJ9.mXxviu6Tv9tq9uPusa1qKg';
//Declare map options
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/byronmoldofsky/cj2q57drs00302rqm2lsrwjq3',
center: [-95.0, 55.0],
minZoom: 3,
// Layer maxZoom is set to 9 below, will not display beyond zoom level. Prevents the map view from zooming beyong that point as well
maxZoom:9,
zoom: 3
});
// disable map rotation using right click + drag
map.dragRotate.disable();
// disable map rotation using touch rotation gesture
map.touchZoomRotate.disableRotation();
// Add zoom and rotation controls to the map.
map.addControl(new mapboxgl.NavigationControl());
// arrays that will be used to style the layer census division
var breaks = [
// stop domain values must appear in ascending order
// Pop Dens threshold [0] Color [1]
[0.0, 'rgb(204,204,204)'],
[0.0001, 'rgb(255,255,204)'],
[0.5, 'rgb(255,255,102)'],
[2.0, 'rgb(255,229,153)'],
[4.0, 'rgb(255,204,102)'],
[8.0, 'rgb(255,178,0)'],
[12.0, 'rgb(204,153,48)'],
[20.0, 'rgb(204,102,51)'],
[30.0, 'rgb(204,0,0)'],
[100.0, 'rgb(153,51,51)'],
[1000.0, 'rgb(102,51,0)'],
];
map.on('load', function() {
// Define map layer, sets a Layer id and options
map.addLayer({
'id': 'cd-popdensity',
'source': {
'type': 'vector',
'url': 'mapbox://byronmoldofsky.7g9ujcjr'
},
'source-layer': 'cds_1851_1961_merge_year_WMAS-9rtzuv',
'type': 'fill',
'filter': ['==', 'YEAR_', 1851],
'paint': {
'fill-color': {
// Set polygon fill color based on attribute for population density CDPOPDENS
property: 'CDPOPDENS',
type : 'interval',
// Loading array declared in the breaks variable
stops: breaks,
},
'fill-opacity': 1
}
},
// place the layer beneath this layer in the basemap
'admin-2-boundaries-dispute'
);
// Click to open callout
// When a click event occurs near a feature, open a popup at the location of
// the feature, with HTML description from its properties
map.on('click', function(e) {
var features = map.queryRenderedFeatures(e.point, { layers: ['cd-popdensity'] });
// if the features have no info, return nothing
if (!features.length) {
return;
}
var feature = features[0];
// Populate the popup and set its coordinates
// based on the feature found
var popup = new mapboxgl.Popup()
.setLngLat(e.lngLat)
// Census Division
.setHTML('<div id="popup" class="popup" style="z-index: 10;"> <h5>' + feature.properties['PROVNAME'] + ', ' +'CD: ' + feature.properties['CDNAME'] + '</h5>' +
'<li class="list-group-item"> <b>Population:</b> ' + feature.properties['CDPOP'] + " </li>" +
'<li class="list-group-item"> <b>Population Density:</b> ' + feature.properties['CDPOPDENS'] + ' people per km' + " </li>" +
'<li class="list-group-item"> <b>Year:</b> ' + feature.properties['YEAR_'] + " </li>" + '</div>')
.addTo(map);
});
// Use the same approach as above to indicate that the Census Division polygon areas are clickable
// by changing the cursor style to 'pointer' when mouse over the Census Division Polygons
map.on('mousemove', function(e) {
var features = map.queryRenderedFeatures(e.point, { layers: ['cd-popdensity'] });
map.getCanvas().style.cursor = (features.length) ? 'pointer' : '';
});
// CD boundaries Line/Arc Layer
map.addLayer({
'id': 'cd-bounds-arc',
'type': 'line',
'filter': ['==', 'YEAR_', 1851],
'source': {
type: 'vector',
url: 'mapbox://byronmoldofsky.bbjisli6'
},
'source-layer': 'cds_1851_1961_arcs_merge_year-9q88va',
'layout': {
'visibility': 'visible',
'line-join': 'round',
'line-cap': 'round'
},
'paint': {
'line-color': '#877b59',
'line-width': 1
}
});
// Provincial Boundaries Line/Arc layer
map.addLayer({
'id': 'provs-bounds-arc',
'type': 'line',
'filter': ['==', 'YEAR_', 1851],
'source': {
type: 'vector',
url: 'mapbox://byronmoldofsky.6zorlyrz'
},
'source-layer': 'boundaries_1851_1961_arcs_mer-1rrn56',
'layout': {
'visibility': 'visible',
'line-join': 'round',
'line-cap': 'round'
},
'paint': {
'line-color': '#ada182',
'line-width': 2.5
}
});
// Provincial Boundaries point/label layer
// byronmoldofsky.aajek76z
// boundaries_1851_1961_cent_mer-73ngaf
// Symbol Layer, added to the mapbox style
map.addLayer({
'id': 'provincial-boundary-label',
'type': 'symbol',
'source': {
type: 'vector',
url: 'mapbox://byronmoldofsky.aajek76z'
},
'source-layer': 'boundaries_1851_1961_cent_mer-73ngaf',
'filter': ['==', 'YEAR_', 1851],
'layout': {
'text-font': ['Open Sans Bold', 'Arial Unicode MS Bold'],
'text-size': 10,
'text-field': '{PROV_NAME}',
'text-anchor': 'center',
'text-transform': 'uppercase',
'text-letter-spacing': 0.2,
'text-offset': [0, 1.5]
},
'paint':{
'text-halo-color': '#FFFFFF',
'text-halo-width': 1,
'text-halo-blur' :1,
'text-opacity': 1,
},
});
//jQuery Slider Widget http://api.jqueryui.com/slider/
// Value is the default location of handle on slider
// Min is the minimum value of the slider
// Max is the maximum value of the slider
// Step determines the size or amount of each interval or step the slider takes between the min and max.
$( "#slider" ).slider({
value:1851,
min: 1851,
max: 1961,
step: 10,
// Change event captures when the the slider handle HAS MOVED location. Change event only updates/captured after the slider handle is moved.
change: function( event, ui ) {
// update the year counter based on the location/value of the handle on the slider
$( "#yearCount" ).val( ui.value );
// runs filter query on Mapbox layer based on the location/value of the handle on the slider
map.setFilter('cd-popdensity', ['==', 'YEAR_', ui.value]);
map.setFilter('cd-bounds-arc', ['==', 'YEAR_', ui.value]);
map.setFilter('provs-bounds-arc', ['==', 'YEAR_', ui.value]);
map.setFilter('provincial-boundary-label', ['==', 'YEAR_', ui.value]);
//If a popup is open when the slider is used then popup is hidden
if (popup = new mapboxgl.Popup()) {
$(".mapboxgl-popup").hide();
}
},
// Slide event captures when the the slider handle IS BEING MOVED location. Slide event updates/captured while the slider handle is being moved.
slide: function( event, ui ) {
// update the year counter based on the location/value of the handle on the slider
$( "#yearCount" ).val( ui.value );
// runs filter query on Mapbox layer based on the location/value of the handle on the slider
map.setFilter('cd-popdensity', ['==', 'YEAR_', ui.value]);
map.setFilter('cd-bounds-arc', ['==', 'YEAR_', ui.value]);
map.setFilter('provs-bounds-arc', ['==', 'YEAR_', ui.value]);
map.setFilter('provincial-boundary-label', ['==', 'YEAR_', ui.value]);
}
});
// yearCount value, required to displace default value when the page loads
$( "#yearCount" ).val( $( "#slider" ).slider( "value" ) );
// Legend to place labels below slider
// Itemes are the labels that will appear
// To update the legend only items variable needs to be updated
// Number of items must mach number of intervals, this example there are 12
// Start and end items must match the min and max declared for the slider
var items =[ '1851','1861','1871','1881','1891','1901','1911','1921','1931','1941','1951','1961'];
// Calculate the legth of the legend based on number of items declared to identify spacing required
// Do not change when updating the items variable
var length = 100 / (items.length - 1);
$.each(items, function(key,value){
var spacing = length;
if(key === 0 || key === items.length-1)
spacing = length/2;
// Updates sliderLegend div below the slider using spacing variable to set calculated label spacing width and include label value for the label
// Do not change when updating the items variable
$("#sliderLegend").append("<label_scale style='width: "+spacing+"%'>"+value+"</label_scale>");
});
});
</script>
</body>
</html>
You can’t perform that action at this time.