Commit d3cd72e5 authored by Joseph Alberts's avatar Joseph Alberts
Browse files

Merge branch 'jra-add-calcite-library' into 'master'

Jra add calcite library and update boundary layers

See merge request !5
parents bce4e00d 07b6fe09
......@@ -60,17 +60,35 @@ body {
background-color: rgba(255,255,255,0.8)
}
.esri-ui-top-right.esri-ui-corner {
max-width: 25vw;
}
#parameter-picker {
padding: 10px;
background-color: white;
opacity: 0.75;
opacity: 0.9;
}
/* These select options rules only work in Chrome.
Need to resolve the select2 conflict to handle them properly with JS */
.wrap-options.select2-selection--single,
.wrap-options {
height: 100%;
}
.select2-container .wrap-options.select2-selection--single .select2-selection__rendered,
.wrap-options {
word-wrap: break-word;
text-overflow: inherit;
white-space: normal;
padding: 0.5em 1em;
}
#infoDiv {
padding: 10px;
width: 275px;
height: 40vh;
opacity: 0.75;
opacity: 0.9;
}
.esri-slider__max, .esri-slider__min {
......
......@@ -6,10 +6,14 @@
<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" />
<link rel="stylesheet" href="https://js.arcgis.com/4.16/esri/themes/light/main.css" />
<link rel="stylesheet" href="https://s3-us-west-1.amazonaws.com/patterns.esri.com/files/calcite-web/1.2.5/css/calcite-web.min.css">
<script src="https://js.arcgis.com/4.16/"></script>
<!-- <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script> -->
<script src="sharedAir.js"></script>
</head>
......@@ -18,31 +22,38 @@
<span id="sign-in" class="action">Sign In</span>
</div>
<div id="authenticated-view" class="esri-widget">
<div id="mainViewDiv" class="esri-widget">
<div id="title-view" class="esri-widget">
<span id="username"></span>&nbsp;&nbsp;-&nbsp;
<span id="sign-out" class="action">Sign Out</span>
</div>
<div id="parameter-picker" class="esri-widget">
<label for="parameter-1-select">NWS Parameter:</label>
<select id="parameter-1-select"></select>
<br>
<label for="parameter-2-select">Yale Parameter:</label>
<select id="parameter-2-select"></select>
<br>
<label for="normalize-check">Normalize occurrences by area?</label>
<input type="checkbox" id="normalize-check" />
</div>
<div id="akViewDiv" class="esri-widget"></div>
<div id="hiViewDiv" class="esri-widget"></div>
<!-- <div id="infoDiv" class="esri-widget">
<div id="infoDescription">
Show where the % that believe the global warming is between:
<span id="sliderHighValue">100</span>% and <span id="sliderLowValue">0</span>%.
<!-- <div class="loader is-active padding-leader-3 padding-trailer-3">
<div class="loader-bars"></div>
<div class="loader-text">Loading...</div> -->
<div id="mainViewDiv" class="esri-widget">
<div id="title-view" class="esri-widget">
<span id="username"></span>&nbsp;&nbsp;-&nbsp;
<span id="sign-out" class="action">Sign Out</span>
</div>
<div id="sliderDiv" class"slider"></div>
</div> -->
<div id="parameter-picker" class="esri-widget js-animation animate-in-down">
<label for="parameter-1-select" class="avenir-demi">NWS Parameter:</label>
<select id="parameter-1-select" class="select-full wrap-options"></select>
<br>
<label for="parameter-2-select" class="avenir-demi">Yale Parameter:</label>
<select id="parameter-2-select" class="select-full wrap-options"></select>
<br>
<label for="normalize-check" class="toggle-switch">
<input type="checkbox" id="normalize-check" class="toggle-switch-input" />
<span class="toggle-switch-track margin-right-1"></span>
<span class="toggle-switch-label font-size--1">Normalize occurrences by area?</span>
</label>
</div>
<div id="akViewDiv" class="esri-widget js-animation animate-in-up"></div>
<div id="hiViewDiv" class="esri-widget js-animation animate-in-up"></div>
<!-- <div id="infoDiv" class="esri-widget">
<div id="infoDescription">
Show where the % that believe the global warming is between:
<span id="sliderHighValue">100</span>% and <span id="sliderLowValue">0</span>%.
</div>
<div id="sliderDiv" class"slider"></div>
</div> -->
</div>
</div>
</div>
<!-- </div> -->
</body>
</html>
......@@ -109,13 +109,13 @@ require([
mainView.ui.add('title-view', 'top-right');
const outlineLayerCountries = new FeatureLayer({
url: 'https://services1.arcgis.com/4ezfu5dIwH83BUNL/arcgis/rest/services/World_Countries_Generalized_5070/FeatureServer/0',
url: 'https://services1.arcgis.com/4ezfu5dIwH83BUNL/arcgis/rest/services/USA_Boundaries_shared_air/FeatureServer/0',
legendEnabled: false,
popupEnabled: false
});
const outlineLayer = new FeatureLayer({
url: 'https://services1.arcgis.com/4ezfu5dIwH83BUNL/arcgis/rest/services/USA_States_Generalized_share_air/FeatureServer/0',
url: 'https://services1.arcgis.com/4ezfu5dIwH83BUNL/arcgis/rest/services/USA_Boundaries_shared_air/FeatureServer/1',
legendEnabled: false,
popupEnabled: false
});
......@@ -191,7 +191,7 @@ require([
layer.popupTemplate = popupTemplate;
const map = new Map({
layers: [outlineLayerCountries,outlineLayer, layer]
layers: [outlineLayer, outlineLayerCountries, layer]
});
// Add map to mainView.
......@@ -536,6 +536,11 @@ require([
console.log('Parameter selection lists set.')
}
// Define select2 target class
// var $select2 = $('.select2').select2({
// containerCssClass: "wrap-options"
// })
// add slider widget
// Disabled for now. If re-enabled, uncomment the require and function declarations at the top.
/*mainView.ui.add("infoDiv", {
......
Supports Markdown
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