Skip to content

GitLab

Note: The default ITS GitLab runner is a shared resource and is subject to slowdowns during heavy usage.
You can run your own GitLab runner that is dedicated just to your group if you need to avoid processing delays.

Commit 2865f799 authored by Peter Knoop's avatar Peter Knoop
Browse files

* some re-org to tackle double-drawing of layer initially 

* replaced " with ' (according to Esri JavaScript style guide); except for JSON strings which must have "
parent 7ff47610
Hide whitespace changes
Inline Side-by-side
sharedAir.js
View file @ 2865f799
require([
"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"
'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,
......@@ -30,7 +30,7 @@ require([
dom
) {
// Set Portal URL.
const portalUrl = "https://umich.maps.arcgis.com/sharing"
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
......@@ -43,13 +43,13 @@ require([
// Process login action.
// Listen for clicks on the sign-in link
on(dom.byId("sign-in"), "click", function() {
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() {
on(dom.byId('sign-out'), 'click', function() {
identityManager.destroyCredentials();
// Reset page to initial state.
window.location.reload();
......@@ -70,47 +70,21 @@ require([
// Once the portal has loaded successfully, then the user is signed in.
portal.load().then(function() {
console.log("start")
console.log('start')
// Display username of logged in user.
dom.byId("username").innerHTML = portal.user.username;
// Define initial set of parameters to display.
var parameter1 = "FL";
var parameter2 = "happening";
// 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"
});
// Popup template for data.
var popupTemplate = '';
setPopupTemplate();
layer.popupTemplate = popupTemplate;
const map = new Map({
layers: [layer]
});
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,
container: 'mainViewDiv',
//map: map,
popup: {
highlightEnabled: false,
dockEnabled: true,
dockOptions: {
breakpoint: false,
position: "bottom-center"
position: 'bottom-center'
}
},
extent: {
......@@ -127,13 +101,45 @@ require([
wkid: 5070
},
ui: {
components: ["attribution"]
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",
container: 'akViewDiv',
map: map,
extent: {
xmin: 396381,
......@@ -153,10 +159,10 @@ require([
}
});
mainView.ui.add("akViewDiv", "bottom-left");
mainView.ui.add('akViewDiv', 'bottom-left');
const hiView = new MapView({
container: "hiViewDiv",
container: 'hiViewDiv',
map: map,
extent: {
xmin: -342537,
......@@ -176,10 +182,7 @@ require([
}
});
mainView.ui.add("hiViewDiv", "bottom-left");
// Create relationship (or bivariate) renderer.
createRelationshipRenderer();
mainView.ui.add('hiViewDiv', 'bottom-left');
// Create legend for layer to place in mainView.
const legend = new Legend({
......@@ -187,19 +190,19 @@ require([
layerInfos: [
{
layer: layer,
title: "Alerts and Opinions"
title: 'Alerts and Opinions'
}
]
});
// Add widget to the bottom right corner of the view
mainView.ui.add(legend, "bottom-right");
// 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.ui.add(homeButton, 'top-left');
mainView
.when(maintainFixedExtent)
......@@ -207,7 +210,8 @@ require([
.then(disablePopupOnClick)
.then(enableHighlightOnPointerMove)
.then(enableParameter1Selection)
.then(enableParameter2Selection);
.then(enableParameter2Selection)
.then(mainView.map = map);
akView
.when(disableNavigation)
.then(disablePopupOnClick)
......@@ -217,11 +221,12 @@ require([
.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.on('resize', function() {
view.extent = fixedExtent;
});
return view;
......@@ -233,8 +238,8 @@ require([
function enableHighlightOnPointerMove(view) {
view.whenLayerView(layer).then(function(layerView) {
view.on("pointer-move", function(event) {
// console.log("Highlight");
view.on('pointer-move', function(event) {
// console.log('Highlight');
view.hitTest(event).then(function(response) {
var lastHighlight = highlight;
......@@ -293,23 +298,23 @@ require([
view.navigation.mouseWheelZoomEnabled = false;
// disable zooming via double-click on the view
view.on("double-click", stopEvtPropagation);
view.on('double-click', stopEvtPropagation);
// disable zooming out via double-click + Control on the view
view.on("double-click", ["Control"], stopEvtPropagation);
view.on('double-click', ['Control'], stopEvtPropagation);
// disables pinch-zoom and panning on the view
view.navigation.browserTouchPanEnabled = false;
view.on("drag", stopEvtPropagation);
view.on('drag', stopEvtPropagation);
// disable the view's zoom box to prevent the Shift + drag
// and Shift + Control + drag zoom gestures.
view.on("drag", ["Shift"], stopEvtPropagation);
view.on("drag", ["Shift", "Control"], stopEvtPropagation);
view.on('drag', ['Shift'], stopEvtPropagation);
view.on('drag', ['Shift', 'Control'], stopEvtPropagation);
// prevents zooming and rotation with the indicated keys
view.on("key-down", function(event) {
var prohibitedKeys = ["+", "-", "_", "=", "a", "d"];
view.on('key-down', function(event) {
var prohibitedKeys = ['+', '-', '_', '=', 'a', 'd'];
var keyPressed = event.key.toLowerCase();
if (prohibitedKeys.indexOf(keyPressed) !== -1) {
event.stopPropagation();
......@@ -321,7 +326,7 @@ require([
// prevents the user from opening the popup with click
function disablePopupOnClick(view) {
view.on("click", function(event) {
view.on('click', function(event) {
event.stopPropagation();
});
return view;
......@@ -329,31 +334,31 @@ require([
// Allows the user to pick the parameters to display.
function enableParameter1Selection(view) {
var selectNode = document.getElementById("parameter-1");
selectNode.addEventListener("change", function(event) {
console.log("Parameter 1 old selection:", parameter1 );
var selectNode = document.getElementById('parameter-1-select');
selectNode.addEventListener('change', function(event) {
console.log('Parameter 1 old selection:', parameter1 );
parameter1 = event.target.value;
console.log("Parameter 1 new selection:", parameter1 );
createRelationshipRenderer();
console.log('Parameter 1 new selection:', parameter1 );
setRelationshipRenderer();
setPopupTemplate();
layer.popupTemplate = popupTemplate;
});
}
function enableParameter2Selection(view) {
var selectNode = document.getElementById("parameter-2");
selectNode.addEventListener("change", function(event) {
console.log("Parameter 2 old selection:", parameter2 );
var selectNode = document.getElementById('parameter-2-select');
selectNode.addEventListener('change', function(event) {
console.log('Parameter 2 old selection:', parameter2 );
parameter2 = event.target.value;
console.log("Parameter 2 new selection:", parameter2 );
createRelationshipRenderer();
console.log('Parameter 2 new selection:', parameter2 );
setRelationshipRenderer();
setPopupTemplate();
layer.popupTemplate = popupTemplate;
});
}
// Create relationship (or bivariate) renderer.
function createRelationshipRenderer() {
function setRelationshipRenderer() {
const params = {
layer: layer,
view: mainView,
......@@ -364,11 +369,11 @@ require([
field: parameter2
},
// Set orientation of legend to a diamond.
focus: "HH",
// Number of classes for grid 2 = 2x2 grid (value can also be 3 or 4)
numClasses: 2
focus: 'HH',
// Number of classes for grid (i.e., 2 = 2x2 grid; value can also be 3 or 4)
numClasses: 4
};
// Apply relationship renderer to the layer.
// Apply renderer to layer.
relationshipRendererCreator.createRenderer(params).then(function(response) {
layer.renderer = response.renderer;
});
......@@ -377,14 +382,14 @@ require([
// Set the popup template
function setPopupTemplate() {
popupTemplate = {
title:"{CD_Code}",
title:'{CD_Code}',
content: [
{
type:"fields",
type:'fields',
fieldInfos: [
{
fieldName: "TotalPop",
label: "Total Population"
fieldName: 'TotalPop',
label: 'Total Population'
},
{
fieldName: parameter1,
......@@ -399,24 +404,54 @@ require([
]
}
};
// Set the options for the parameter select lists.
function setParameterSelectionLists() {
var parameter1options = {
// 'HT' : 'Heat Advisory', // Not enough data...
'FL' : 'Flood Advisory',
//'HU' : 'Hurricane Warning', // Not enough data...
//'RP' : 'Rip Current', // Not enough data...
'SV' : 'Severe Thunderstorm'
//'WS' : 'Winter Storm' // Not enough data...
};
var select = document.getElementById('parameter-1-select');
select.options.length = 0
for(index in parameter1options) {
select.options[select.options.length] = new Option(parameter1options[index], index);
}
var parameter2options = {
'happening' : 'Believe global warming is happening',
'happeningOppose' : 'Do not believe global warming is happening'
};
var select = document.getElementById('parameter-2-select');
select.options.length = 0
for(index in parameter2options) {
select.options[select.options.length] = new Option(parameter2options[index], index);
}
console.log('Parameter selection lists set.')
}
// // add slider widget
// // Joe is adding a comment for some reason...
// const slider = new Slider({
// container: document.getElementById("sliderDiv"),
// container: document.getElementById('sliderDiv'),
// min: 0,
// max: 100,
// values: [ 50 ],
// rangeLabelsVisible: true,
// precision: 0,
// layout: "vertical"
// layout: 'vertical'
// });
//
// mainView.ui.add(slider, {
// position: "top-right",
// position: 'top-right',
// });
console.log("complete")
console.log('complete')
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment