Skip to content
Permalink
master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

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
Open in GitHub Desktop
<!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>