Permalink
Cannot retrieve contributors at this time
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 fileThis commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
433 lines (365 sloc)
13.1 KB
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |