Commit 85084fcf authored by Peter Knoop's avatar Peter Knoop
Browse files

Merge branch 'knoop-bivariate'

parents 2adb1e7b dd3788b7
html,
body {
padding: 0px;
margin: 0px;
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
height: 100%;
width: 100%;
}
.action {
color: blue;
cursor: pointer;
text-decoration: underline;
color: blue;
cursor: pointer;
text-decoration: underline;
}
#anonymous-view {
display: block;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
padding: 10px;
margin: 0px;
height: 100%;
width: 100%;
text-align: center;
display: block;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
padding: 10px;
margin: 0px;
height: 100%;
width: 100%;
text-align: center;
}
#authenticated-view {
display: none;
padding: 0px;
margin: 0px;
height: 100%;
width: 100%;
display: none;
padding: 0px;
margin: 0px;
height: 100%;
width: 100%;
}
#title-view {
position: absolute;
padding: 10px;
left: 50%;
transform: translate(-50%, 0);
background-color: white;
opacity: 0.6;
z-index: 2;
position: absolute;
padding: 10px;
left: 50%;
transform: translate(-50%, 0);
background-color: white;
opacity: 0.6;
z-index: 2;
}
#username {
font-weight: bold;
font-weight: bold;
}
#mainViewDiv {
position: relative;
z-index: 1;
padding: 0px;
margin: 0px;
height: 100%;
width: 100%;
position: relative;
z-index: 1;
padding: 0px;
margin: 0px;
height: 100%;
width: 100%;
}
#akViewDiv {
padding: 0;
margin: 0;
height: 255px;
width: 300px;
background-color: rgba(255,255,255,0.8)
padding: 0;
margin: 0;
height: 255px;
width: 300px;
background-color: rgba(255,255,255,0.8)
}
#hiViewDiv {
padding: 0;
margin: 0;
height: 135px;
width: 200px;
background-color: rgba(255,255,255,0.8)
padding: 0;
margin: 0;
height: 135px;
width: 200px;
background-color: rgba(255,255,255,0.8)
}
#legend {
padding: 0;
margin: 0;
height: 300px;
width: 300px;
background-color: rgba(255,255,255,0.8)
#parameter-picker {
position: absolute;
padding: 10px;
left: 100%;
transform: translate(-100%, 0);
background-color: white;
opacity: 0.6;
z-index: 3;
}
#infoDiv {
......
......@@ -4,6 +4,7 @@
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>SharedAir</title>
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="sharedAir.css">
<link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css" />
......@@ -13,14 +14,21 @@
</head>
<body>
<div id="anonymous-view">
<div id="anonymous-view" class="esri-widget">
<span id="sign-in" class="action">Sign In</span>
</div>
<div id="authenticated-view">
<div id="authenticated-view" class="esri-widget">
<div id="title-view">
<span id="username"></span>&nbsp;&nbsp;-&nbsp;
<span id="sign-out" class="action">Sign Out</span>
</div>
<div id="parameter-picker">
<label for="parameter-1">NWS Parameter:</label>
<select id="parameter-1-select"></select>
<br>
<label for="parameter-2-">Yale Parameter:</label>
<select id="parameter-2-select"></select>
</div>
<div id="mainViewDiv"></div>
<div id="akViewDiv" class="esri-widget"></div>
<div id="hiViewDiv" class="esri-widget"></div>
......@@ -32,6 +40,5 @@
<div id="sliderDiv" class"slider"></div>
</div>
</div>
</div>
</body>
</html>
require([
"esri/portal/Portal",
"esri/identity/OAuthInfo",
"esri/identity/IdentityManager",
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/widgets/Slider",
"dojo/dom-style",
"dojo/dom-attr",
"dojo/on",
"dojo/dom"
'esri/portal/Portal',
'esri/identity/OAuthInfo',
'esri/identity/IdentityManager',
'esri/Map',
'esri/views/MapView',
'esri/layers/FeatureLayer',
'esri/widgets/Slider',
'esri/widgets/Legend',
'esri/widgets/Home',
'esri/renderers/smartMapping/creators/relationship',
'dojo/dom-style',
'dojo/dom-attr',
'dojo/on',
'dojo/dom'
], function(
Portal,
OAuthInfo,
identityManager,
Map,
MapView,
FeatureLayer,
Slider,
domStyle,
domAttr,
on,
dom
Portal,
OAuthInfo,
identityManager,
Map,
MapView,
FeatureLayer,
Slider,
Legend,
Home,
relationshipRendererCreator,
domStyle,
domAttr,
on,
dom
) {
// Set Portal URL.
const portalUrl = "https://umich.maps.arcgis.com/sharing"
// Set App ID for the ArcGIS Online item associated with this app.
// If hosting the app locally, update the App Registration with the URI to its location, if needed.
// https://umich.maps.arcgis.com/home/item.html?id=b0f8c825ce4746e6ac89da2133905018
const oAuthInfo = new OAuthInfo({
appId: 'hxlrAtw9pmxp6sCi',
popup: false
});
identityManager.registerOAuthInfos([oAuthInfo]);
// Process login action.
// Listen for clicks on the sign-in link
on(dom.byId("sign-in"), "click", function() {
identityManager.getCredential(portalUrl);
});
// Process logout action.
// Listen for clicks on the sign-out link
on(dom.byId("sign-out"), "click", function() {
identityManager.destroyCredentials();
// Reset page to initial state.
window.location.reload();
});
// When login is successful, swap div in view and display content.
identityManager.checkSignInStatus(portalUrl).then(function() {
dom.byId('anonymous-view').style.display = 'none';
dom.byId('authenticated-view').style.display = 'block'
displayView();
});
// Display content.
function displayView() {
const portal = new Portal();
// Once the portal has loaded successfully, then the user is signed in.
portal.load().then(function() {
console.log("start")
// Display username of logged in user.
dom.byId("username").innerHTML = portal.user.username;
// Popup template for Yale state level data.
const popupTemplate = {
title:"{GeoType}: {NAME}",
content: [
{
type:"fields",
fieldInfos: [
{
fieldName: "TotalPop",
label: "Total Population"
},
{
fieldName: "happening",
label: "Believe global warming is happening"
},
{
fieldName: "happeningOppose",
label: "Do not believe global warming is happeing"
}
]
}
]
}
// Create a layer from the Yale State Level data
var layer = new FeatureLayer({
url: "https://services1.arcgis.com/4ezfu5dIwH83BUNL/arcgis/rest/services/Yale_State_Level/FeatureServer/0",
popupTemplate: popupTemplate,
outFields: ["NAME", "TotalPop", "happening", "happeningOppose"],
title: "U.S. States"
});
var basemapLayer = new FeatureLayer({
url: "https://services1.arcgis.com/4ezfu5dIwH83BUNL/arcgis/rest/services/USA_States_Generalized_share_air/FeatureServer/0",
title: "U.S. States"
});
var districtsLayer = new FeatureLayer({
url: "https://services1.arcgis.com/4ezfu5dIwH83BUNL/arcgis/rest/services/usa_116th_congressional_districts/FeatureServer/0",
popupTemplate: popupTemplate,
outFields: ["DISTRICTID", "NAME", "PARTY"],
title: "U.S. 116th Congressional Districts"
});
var map = new Map({
layers: [districtsLayer, basemapLayer, layer]
});
// Create the map views and assign to their respective containers/divs
const mainView = new MapView({
container: "mainViewDiv",
map: map,
popup: {
highlightEnabled: false,
dockEnabled: true,
dockOptions: {
breakpoint: false,
position: "bottom-right"
}
},
extent: {
xmin: -3094834,
ymin: -44986,
xmax: 2752687,
ymax: 3271654,
spatialReference: {
wkid: 5070
}
},
spatialReference: {
// NAD_1983_Contiguous_USA_Albers
wkid: 5070
},
ui: {
components: ["attribution"]
// Set Portal URL.
const portalUrl = 'https://umich.maps.arcgis.com/sharing'
// Set App ID for the ArcGIS Online item associated with this app.
// If hosting the app locally, update the App Registration with the URI to its location, if needed.
// https://umich.maps.arcgis.com/home/item.html?id=b0f8c825ce4746e6ac89da2133905018
const oAuthInfo = new OAuthInfo({
appId: 'hxlrAtw9pmxp6sCi',
popup: false
});
identityManager.registerOAuthInfos([oAuthInfo]);
// Process login action.
// Listen for clicks on the sign-in link
on(dom.byId('sign-in'), 'click', function() {
identityManager.getCredential(portalUrl);
});
// Process logout action.
// Listen for clicks on the sign-out link
on(dom.byId('sign-out'), 'click', function() {
identityManager.destroyCredentials();
// Reset page to initial state.
window.location.reload();
});
// When login is successful, swap div in view and display content.
identityManager.checkSignInStatus(portalUrl).then(function() {
dom.byId('anonymous-view').style.display = 'none';
dom.byId('authenticated-view').style.display = 'block'
displayView();
});
// Display content.
function displayView() {
const portal = new Portal();
// Once the portal has loaded successfully, then the user is signed in.
portal.load().then(function() {
console.log('start')
// Display username of logged in user.
dom.byId('username').innerHTML = portal.user.username;
// Create the map views and assign to their respective containers/divs
const mainView = new MapView({
container: 'mainViewDiv',
//map: map,
popup: {
highlightEnabled: false,
dockEnabled: true,
dockOptions: {
breakpoint: false,
position: 'bottom-center'
}
},
extent: {
xmin: -3094834,
ymin: -44986,
xmax: 2752687,
ymax: 3271654,
spatialReference: {
wkid: 5070
}
},
spatialReference: {
// NAD_1983_Contiguous_USA_Albers
wkid: 5070
},
ui: {
components: ['attribution']
}
});
// Create a layer from Perry's alert and Yale's opinion data at the level of Congressional Districts (115th).
const layer = new FeatureLayer({
//url: 'https://services1.arcgis.com/4ezfu5dIwH83BUNL/arcgis/rest/services/Yale_Congressional_District_115_Level/FeatureServer/0',
url: 'https://services1.arcgis.com/4ezfu5dIwH83BUNL/arcgis/rest/services/Yale_Perry_115_Congressional_Districts/FeatureServer/0',
//popupTemplate: popupTemplate,
//outFields: ['NAME', 'TotalPop', 'happening', 'happeningOppose'],
outFields: ['*'],
title: 'U.S. 115th Congressional Districts'
});
// Define initial set of parameters to display.
var parameter1 = 'FL';
var parameter2 = 'happening';
// Populate selection lists for parameters.
setParameterSelectionLists();
// Set relationship (or bivariate) renderer for data.
setRelationshipRenderer();
// Popup template for data.
var popupTemplate = '';
setPopupTemplate();
layer.popupTemplate = popupTemplate;
const map = new Map({
layers: [layer]
});
// Add map to mainView.
//mainView.map = map;
const akView = new MapView({
container: 'akViewDiv',
map: map,
extent: {
xmin: 396381,
ymin: -2099670,
xmax: 3393803,
ymax: 148395,
spatialReference: {
wkid: 5936
}
},
spatialReference: {
// WGS_1984_EPSG_Alaska_Polar_Stereographic
wkid: 5936
},
ui: {
components: []
}
});
mainView.ui.add('akViewDiv', 'bottom-left');
const hiView = new MapView({
container: 'hiViewDiv',
map: map,
extent: {
xmin: -342537,
ymin: 655453,
xmax: 231447,
ymax: 1023383,
spatialReference: {
wkid: 102007
}
},
spatialReference: {
// Hawaii_Albers_Equal_Area_Conic
wkid: 102007
},
ui: {
components: []
}
});
mainView.ui.add('hiViewDiv', 'bottom-left');
// Create legend for layer to place in mainView.
const legend = new Legend({
view: mainView,
layerInfos: [
{
layer: layer,
title: 'Alerts and Opinions'
}
]
});
// Add legend to the mainView
mainView.ui.add(legend, 'bottom-right');
// Add Home button to mainView.
const homeButton = new Home({
view: mainView
});
// Add the home button to the top left corner of the view
mainView.ui.add(homeButton, 'top-left');
mainView
.when(maintainFixedExtent)
// .then(disableNavigation)
.then(disablePopupOnClick)
.then(enableHighlightOnPointerMove)
.then(enableParameter1Selection)
.then(enableParameter2Selection)
.then(mainView.map = map);
akView
.when(disableNavigation)
.then(disablePopupOnClick)
.then(enableHighlightOnPointerMove);
hiView
.when(disableNavigation)
.then(disablePopupOnClick)
.then(enableHighlightOnPointerMove);
function maintainFixedExtent(view) {
var fixedExtent = view.extent.clone();
// keep a fixed extent in the view
// when the view size changes
view.on('resize', function() {
view.extent = fixedExtent;
});
return view;
}
var highlight = null;
function enableHighlightOnPointerMove(view) {
view.whenLayerView(layer).then(function(layerView) {
view.on('pointer-move', function(event) {
// console.log('Highlight');
view.hitTest(event).then(function(response) {
var lastHighlight = highlight;
// if a feature is returned, highlight it
// and display its attributes in the popup
// if no features are returned, then close the popup
var id = null;
if (response.results.length) {
var feature = response.results.filter(function(result) {
return result.graphic.layer === layer;
})[0].graphic;
feature.popupTemplate = layer.popupTemplate;
id = feature.attributes.OBJECTID_12_13;
// Log feature
//console.log(feature);
highlight = layerView.highlight([id]);
var selectionId = mainView.popup.selectedFeature
? mainView.popup.selectedFeature.attributes.OBJECTID_1
: null;
if (highlight && id !== selectionId) {
mainView.popup.open({
features: [feature]
});
}
});
const akView = new MapView({
container: "akViewDiv",
map: map,
extent: {
xmin: 396381,
ymin: -2099670,
xmax: 3393803,
ymax: 148395,
spatialReference: {
wkid: 5936
}
},
spatialReference: {
// WGS_1984_EPSG_Alaska_Polar_Stereographic
wkid: 5936
},
ui: {
components: []
} else {
if (mainView.popup.visible) {
mainView.popup.close();
mainView.popup.clear();
}
});
}
mainView.ui.add("akViewDiv", "bottom-left");
const hiView = new MapView({
container: "hiViewDiv",
map: map,
extent: {
xmin: -342537,
ymin: 655453,
xmax: 231447,
ymax: 1023383,
spatialReference: {
wkid: 102007
}
},