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
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