Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Cancel
- Home
- :
- About MasonBindl
MasonBindl
New Contributor II
since
04-21-2017
07-20-2023
5
Posts created
9
Kudos given
0
Solutions
0
Kudos received
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
My Ideas
(0 Idea Submissions)Latest Contributions by MasonBindl
|
POST
|
I'm trying to adapt this example from Tamia Rudnicky and Christian Bischof where they create multiple layer lists with different layers. I think the example above was adapted from this example by Robert Scheitlin, GISP. That example succesfully parses the layers into two lists. arcgis-js-api-4.15 I'm hoping to get two of the layers to show up in the list on the bottom left and one layer to show up in the layer list on the bottom right. Right now, I can only control the layers in the list on the bottom left using: view.when(function() {
watchUtils.when(lList, 'operationalItems.length', function() {
var elementsLeftList = document.getElementsByClassName('esri-layer-list__item esri-layer-list__item--has-children');
elementsLeftList[2].style.display = "none";
console.log(elementsLeftList);
});
});
Does anybody know how to control the layers that are visible in each list? Thanks, Mason Here is the full code: <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>Tahoe Imagery Swipe</title>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.16/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.16/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/TileLayer",
"esri/widgets/Fullscreen",
"esri/widgets/LayerList",
"esri/widgets/Swipe",
"esri/widgets/Expand",
"dojo/query",
"esri/core/watchUtils",
"dojo/dom-style"
], function(Map, MapView, TileLayer, Fullscreen, LayerList, Swipe, Expand,query, watchUtils, domStyle) {
const map = new Map({
basemap: "satellite"
});
const fifteenLayer = new TileLayer({
url: "https://maps.trpa.org/server/rest/services/2015_Imagery/MapServer",
maxScale: 3000
});
map.add(fifteenLayer);
const fortyLayer = new TileLayer({
url: "https://maps.trpa.org/server/rest/services/1940_Imagery/MapServer",
maxScale: 3000
});
map.add(fortyLayer);
const sixtynineLayer = new TileLayer({
url: "https://maps.trpa.org/server/rest/services/1969_Imagery/MapServer",
maxScale: 3000
});
map.add(sixtynineLayer);
const view = new MapView({
container: "viewDiv",
map: map,
center: [-120.01,38.93],
zoom: 15,
constraints: {
maxZoom: 17,
minZoom: 8
}
});
var lList = new LayerList({
view: view
});
var rList = new LayerList({
view: view
});
view.when(function() {
watchUtils.when(lList, 'operationalItems.length', function() {
var elementsLeftList = document.getElementsByClassName('esri-layer-list__item esri-layer-list__item--has-children');
elementsLeftList[2].style.display = "none";
// elementsLeftList[1].style.display = "none";
console.log(elementsLeftList);
});
watchUtils.when(rList, 'operationalItems.length', function() {
var elementsRightList = document.getElementsByClassName('esri-layer-list__item esri-layer-list__item--has-children');
elementsRightList[2].style.display = "none";
console.log(elementsRightList);
});
});
view.ui.add(lList, "bottom-left");
view.ui.add(rList, "bottom-right");
var leftlayerListExpand = new Expand({
expandIconClass: "esri-icon-layer-list", // see https://developers.arcgis.com/javascript/latest/guide/esri-icon-font/
expandTooltip: "Expand LayerList", // optional, defaults to "Expand" for English locale
view: view,
expanded: true,
content: lList.domNode
});
view.ui.add(leftlayerListExpand, "bottom-left")
var rightlayerListExpand = new Expand({
expandIconClass: "esri-icon-layer-list", // see https://developers.arcgis.com/javascript/latest/guide/esri-icon-font/
expandTooltip: "Expand LayerList", // optional, defaults to "Expand" for English locale
view: view,
expanded: true,
content: rList.domNode
});
view.ui.add(rightlayerListExpand, "bottom-right")
var fullscreen = new Fullscreen({
view: view
});
view.ui.add(fullscreen, "top-left");
// create a new Swipe widget
const swipe = new Swipe({
leadingLayers: [fortyLayer, fifteenLayer],
trailingLayers: [sixtynineLayer],
position: 50, // set position of widget to 35%
view: view
});
// add swipe to view
view.ui.add(swipe);
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
... View more
07-22-2020
08:00 PM
|
0
|
1
|
1255
|
|
POST
|
Hi Tamia Rudnicky, I'm trying to adapt your code for my use case. I'm having trouble hiding layers in my second layer list. It seems i'm only able to manipulate the first layer list. What am I doing wrong? Here is my code: <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>Tahoe Imagery Swipe</title>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.14/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.14/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
.overlay {
opacity:0;
position:fixed;
top:-999em;
left:-999em;
width:100%;
height:100%;
display:table;
background:rgba(0,0,0,0.8);
-webkit-animation: splash 20s forwards;
animation: splash 20s forwards;
}
.overlay-inner {
display:table-cell;
vertical-align:middle;
text-align:center;
}
.title{
align-content: center;
}
.message {
/* border:1px solid #6e6e6e;*/
border-radius: 4px;
background: rgba(102,128,168, 0.6);
display:inline-block;
vertical-align:middle;
width:50%;
text-align:center;
font-family: "Avenir Next W00";
color: #f9f9f9;
padding:10px;
}
.active {
background: #6680a8;
color: #4c4c4c;
}
.overlay-wrap {
position:fixed;
top:0;
left:0;
right:0;
z-index:99;
}
.overlay-wrap .hide {
position:absolute;
top:-999em;
right:20px;
/* border:1px solid #6e6e6e;*/
border-radius: 2px;
background: rgba(102,128,168, 0.6);
display:inline-block;
text-align:middle;
font-family: "Avenir Next W00";
opacity:0;
color:#f9f9f9;
padding:2px;
font-size:100%;
z-index:2;
cursor:pointer;
-webkit-animation:15s fadein 2s forwards;
-moz-animation:15s fadein 2s forwards;
-ms-animation:15s fadein 2s forwards;
animation:15s fadein 2s forwards;
}
#hide {
position:absolute;
left:-999em;
top:-999em;
}
.overlay2{
position:absolute;
opacity:1;
-webkit-transition:all 2s;
-moz-transition:all 2s;
-ms-transition:all 2s;
transition:all 2s ;
}
#hide:checked ~ div,#hide:checked ~ div *, #hide:checked + label {
opacity:0;
left:-999em;
right:auto;
top:-999em;
pointer-events:none;
}
@-webkit-keyframes splash {
0% {opacity: 0;top:0;left:0}
20% {opacity:1;top:0;left:0}
60% {opacity:1;top:0;left:0}
99% {top:0;left:0}
100% {opacity:0;top:-999em;left:-999em}
}
@-moz-keyframes splash {
0% {opacity: 0;top:0;left:0}
20% {opacity:1;top:0;left:0}
60% {opacity:1;top:0;left:0}
99% {top:0;left:0}
100% {opacity:0;top:-999em;left:-999em}
}
@-ms-keyframes splash {
0% {opacity: 0;top:0;left:0}
20% {opacity:1;top:0;left:0}
60% {opacity:1;top:0;left:0}
99% {top:0;left:0}
100% {opacity:0;top:-999em;left:-999em}
}
@keyframes splash {
0% {opacity: 0;top:0;left:0}
20% {opacity:1;top:0;left:0}
60% {opacity:1;top:0;left:0}
99% {top:0;left:0}
100% {opacity:0;top:-999em;left:-999em}
}
@-webkit-keyframes fadein {
0% {opacity: 0;top:10px;}
20% {opacity:1;top:10px;}
60%{opacity:1;top:10px}
99% {top:10px}
100%{opacity:0;top:-999em}
}
@-moz-keyframes fadein {
0% {opacity: 0;top:10px;}
20% {opacity:1;top:10px;}
60%{opacity:1;top:10px}
99% {top:10px}
100%{opacity:0;top:-999em
}
@-ms-keyframes fadein {
0% {opacity: 0;top:10px;}
20% {opacity:1;top:10px;}
60%{opacity:1;top:10px}
99% {top:10px}
100%{opacity:0;top:-999em
}
@keyframes fadein {
0% {opacity: 0;top:10px;}
20% {opacity:1;top:10px;}
60%{opacity:1;top:10px}
99% {top:10px}
100%{opacity:0;top:-999em}
}
</style>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/TileLayer",
"esri/layers/MapImageLayer",
"esri/widgets/LayerList",
"esri/widgets/Swipe",
"esri/widgets/Expand",
"dojo/query",
"esri/core/watchUtils",
"dojo/dom-style"
], function(Map, MapView, TileLayer, MapImageLayer, LayerList, Swipe, Expand,query, watchUtils, domStyle) {
const map = new Map({
basemap: "satellite"
});
const fortyLayer = new MapImageLayer({
url: "https://maps.trpa.org/server/rest/services/1940_Imagery/MapServer",
maxScale: 3000
});
map.add(fortyLayer);
const sixtynineLayer = new MapImageLayer({
url: "https://maps.trpa.org/server/rest/services/1969_Imagery/MapServer",
maxScale: 3000
});
map.add(sixtynineLayer);
const fifteenLayer = new MapImageLayer({
url: "https://maps.trpa.org/server/rest/services/2015_Imagery/MapServer",
maxScale: 3000
});
map.add(fifteenLayer);
// const eighteenLayer = new TileLayer({
// url: "https://maps.trpa.org/server/rest/services/2015_Imagery/MapServer",
// maxScale: 3000
// });
// map.add(eighteenLayer);
const view = new MapView({
container: "viewDiv",
map: map,
center: [-120.01,38.93],
zoom: 15,
constraints: {
maxZoom: 17,
minZoom: 8
}
});
var lList = new LayerList({
view: view
});
view.when(function() {
watchUtils.when(lList, 'operationalItems.length', function() {
var elementsLeftList = document.getElementsByClassName('esri-layer-list__item esri-layer-list__item--has-children');
elementsLeftList[0].style.display = "none";
console.log(elementsLeftList);
});
});
view.ui.add(lList, "bottom-left");
var rList = new LayerList({
view: view
});
view.when(function() {
watchUtils.when(rList, 'operationalItems.length', function() {
var elementsRightList = document.getElementsByClassName('esri-layer-list__item esri-layer-list__item--has-children');
elementsRightList[1].style.display = "none";
elementsRightList[2].style.display = "none";
console.log(elementsRightList);
});
});
view.ui.add(rList, "bottom-right");
// create a new Swipe widget
const swipe = new Swipe({
leadingLayers: [fortyLayer, sixtynineLayer],
trailingLayers: [fifteenLayer],
position: 50, // set position of widget to 35%
view: view
});
// add swipe to view
view.ui.add(swipe);
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div class="overlay-wrap">
<input type="checkbox" name="hide" id="hide">
<label class="hide" for="hide">X</label>
<div class="overlay2">
<div class="overlay">
<div class="overlay-inner">
<div class="message">
<p><h2>Historic Image Swipe</h2></p>
<p>Use this map to <b>SWIPE</b> between the hisotric image layers. Toggle them off to view the most recent imagery underneath.</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
... View more
07-22-2020
01:25 PM
|
0
|
0
|
1748
|
|
POST
|
Robert Scheitlin, GISP here's the app I made using your example/help Tahoe SEZ I just saw the beta FeatureTable | ArcGIS API for JavaScript 4.15 came out. What are your thoughts on that? At first glance it looks promising. Is it built on top of DGrid? Thanks again for the help/example, Mason
... View more
04-10-2020
03:57 PM
|
0
|
1
|
2700
|
|
POST
|
That did it. Thank you Robert! I'm new to creating apps with the 4.x JS API and JS in general, so your examples and guidance have been invaluable. Much appreciated! After I clean up this example, I need to fold it into the main application by figuring out how to hide the table in an Expand widget and then have it occupy part of the screen when expanded. Take care, -Mason
... View more
04-09-2020
10:02 AM
|
0
|
0
|
2700
|
|
POST
|
I'm having trouble getting a grid element to display the data from a feature layer. I've been modifying the answer to this questionDisplay attribute table with JavaScript API ver 4.9? by Robert Scheitlin, GISP. Lidia Dudina did you get a feature layer to work with Robert's example? I"m getting a Type Error on line 293 in the createGrid function. Not sure where I'm going wrong here. Any help would be greatly appreciated. Thanks, Mason <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>dGrid - 4.9</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/css/main.css">
<script src="https://js.arcgis.com/4.9/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
#info,
#gridDisplay {
position: absolute;
bottom: 0;
left: 0;
height: 35%;
background-color: white;
border-color: grey;
width: 100%;
font-family: "Avenir Next W00", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
}
#info {
z-index: 90;
font-size: 16px;
padding-left: 20px;
}
#info * {
padding-right: 20px;
}
#gridDisplay {
z-index: 80;
}
.info {
line-height: 20px;
padding-left: 5px ! important;
}
.dgrid-header,
.dgrid-header-row {
background-color: #eee;
color: #57585A;
}
.dgrid-row-even {
background-color: #F7F8F8;
}
.dgrid-row-odd {
background-color: #EFEFEF;
}
.dgrid-selected {
background: #B4DAF5;
}
.dgrid-row {
border: none
}
</style>
<script>
require([
"esri/config",
"esri/WebMap",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/Graphic",
"esri/widgets/Legend",
"esri/widgets/Expand",
"esri/geometry/SpatialReference",
"dgrid/OnDemandGrid",
"dgrid/extensions/ColumnHider",
"dojo/store/Memory",
"dstore/legacy/StoreAdapter",
"dgrid/Selection"
],
function(
esriConfig, WebMap, MapView, FeatureLayer, Graphic, Legend, Expand, SpatialReference,
OnDemandGrid, ColumnHider, Memory, StoreAdapter, Selection
) {
{
esriConfig.portalUrl = "https://maps.trpa.org/portal";
};
let map, view, meadowLayerView, grid;
const gridDiv = document.getElementById("grid");
const infoDiv = document.getElementById("info");
// create new map, view and csvlayer
const gridFields = ["OBJECTID", "MeadowType", "Final_Rating",
"Acres"
];
const meadowLayer = new FeatureLayer({
url: "https://maps.trpa.org/server/rest/services/SEZViewer_AssessmentUnits_Meadows/MapServer/0",
outFields: gridFields
});
map = new WebMap({
portalItem: {
id: "6d740280f5e34698bae774b38cde6469"
},
layers: [meadowLayer]
});
view = new MapView({
container: "viewDiv",
map: map,
highlightOptions: {
color: "#2B65EC",
fillOpacity: 0.4
},
padding: {
bottom: infoDiv.clientHeight
}
});
const legendExpand = new Expand({
view: view,
content: new Legend({
view: view,
style: "card"
})
});
view.ui.add(legendExpand, "top-left");
// create a new datastore for the on demandgrid
// will be used to display attributes of selected features
const dataStore = new StoreAdapter({
objectStore: new Memory({
idProperty: "OBJECTID"
})
});
/****************************************************
* Selects features from the layer that intersect
* a polygon that user drew using sketch view model
****************************************************/
function popGrid() {
view.graphics.removeAll();
if (meadowLayerView) {
const query = {
where: "1=1",
outFields: ["*"]
};
// query graphics from the layer view. Geometry set for the query
// can be polygon for point features and only intersecting geometries are returned
meadowLayerView.queryFeatures(query).then(function(results) {
const graphics = results.features;
// if the grid div is displayed while query results does not
// return graphics then hide the grid div and show the instructions div
if (graphics.length > 0) {
gridDiv.style.zIndex = 90;
infoDiv.style.zIndex = 80;
document.getElementById("featureCount").innerHTML =
"<b>Showing attributes for " +
graphics.length.toString() + " features </b>"
} else {
gridDiv.style.zIndex = 80;
infoDiv.style.zIndex = 90;
}
// get the attributes to display in the grid
const data = graphics.map(function(feature, i) {
return Object.keys(feature.attributes)
.filter(function(key) {
// get fields that exist in the grid
return (gridFields.indexOf(key) !== -1);
})
// need to create key value pairs from the feature
// attributes so that info can be displayed in the grid
.reduce(function(obj, key) {
obj[key] = feature.attributes[key];
return obj;
}, {});
});
// set the datastore for the grid using the
// attributes we got for the query results
dataStore.objectStore.data = data;
grid.set("collection", dataStore);
})
.catch(errorCallback);
}
}
/************************************************
* fires when user clicks a row in the grid
* get the corresponding graphic and select it
*************************************************/
function selectFeatureFromGrid(event) {
// close view popup if it is open
view.popup.close();
// get the ObjectID value from the clicked row
const row = event.rows[0]
const id = row.data.OBJECTID;
// setup a query by specifying objectIds
const query = {
objectIds: [parseInt(id)],
outFields: ["*"],
returnGeometry: true,
outSpatialReference: view.SpatialReference
};
// query the csvLayerView using the query set above
meadowLayerView.queryFeatures(query).then(function(results) {
const graphics = results.features;
// remove all graphics to make sure no selected graphics
view.graphics.removeAll();
view.goTo(graphics[0].geometry);
// create a new selected graphic
const selectedGraphic = new Graphic({
geometry: graphics[0].geometry,
symbol: {
type: "simple-marker",
// style: "circle",
color: "orange",
size: "12px", // pixels
outline: { // autocasts as new SimpleLineSymbol()
color: [255, 255, 0],
width: 2 // points
}
}
});
// add the selected graphic to the view
// this graphic corresponds to the row that was clicked
view.graphics.add(selectedGraphic);
})
.catch(errorCallback);
}
/************************************************
* Creates a new grid. Loops through layer
* fields and creates grid columns
* Grid with selection and columnhider extensions
*************************************************/
function createGrid(fields) {
var columns = fields.filter(function(field, i) {
if (gridFields.indexOf(field.name) !== -1) {
return field;
}
}).map(function(field) {
if (field.name === "OBJECTID") {
return {
field: field.name,
label: field.name,
sortable: true,
hidden: true
};
} else {
return {
field: field.name,
label: field.alias,
sortable: true
};
}
});
// create a new onDemandGrid with its selection and columnhider
// extensions. Set the columns of the grid to display attributes
// the hurricanes cvslayer
grid = new(OnDemandGrid.createSubclass([Selection, ColumnHider]))({
columns: columns
}, "grid");
// add a row-click listener on the grid. This will be used
// to highlight the corresponding feature on the view
grid.on("dgrid-select", selectFeatureFromGrid);
}
function errorCallback(error) {
console.log("error:", error)
}
// create a grid with given columns once the layer is loaded
meadowLayer.when(function() {
// create a grid with columns specified in gridFields variable
createGrid(meadowLayer.fields);
// get a reference the meadowlayerview when it is ready.
view.whenLayerView(meadowLayer).then(function(layerView) {
meadowLayerView = layerView;
popGrid();
});
})
.catch(errorCallback);
});
</script>
</head>
<body>
<div id="viewDiv">
<div id="info">
<span class="info">
<b>Populating grid...</b>
</span>
<br />
</div>
<div id="gridDisplay">
<span class="info" id="featureCount"></span>
<div id="grid"></div>
</div>
</div>
</body>
</html>
... View more
04-09-2020
12:26 AM
|
0
|
4
|
2939
|
Activity Feed
- Kudoed Shape the future of Data Engineering in ArcGIS Pro for LynneBuie. 11-17-2022 11:40 AM
- Kudoed Re: Can you Create a Space Time Cube with irregular time intervals? for LynneBuie. 11-17-2022 11:19 AM
- Kudoed Re: How to click on a related table in the table widget and zoom to area in map for BrittanyBurson. 03-23-2022 09:51 AM
- Kudoed Re: UniqueValueRenderer showing "others" in legend for MKF62. 02-25-2021 06:01 PM
- Kudoed Make new ArcGIS StoryMaps self-hosted for Kara_Shindle. 09-14-2020 04:06 PM
- Posted Multiple Layer Lists with different layers using ArcGIS JS API 4.15 on ArcGIS JavaScript Maps SDK Questions. 07-22-2020 08:00 PM
- Tagged Multiple Layer Lists with different layers using ArcGIS JS API 4.15 on ArcGIS JavaScript Maps SDK Questions. 07-22-2020 08:00 PM
- Tagged Multiple Layer Lists with different layers using ArcGIS JS API 4.15 on ArcGIS JavaScript Maps SDK Questions. 07-22-2020 08:00 PM
- Tagged Multiple Layer Lists with different layers using ArcGIS JS API 4.15 on ArcGIS JavaScript Maps SDK Questions. 07-22-2020 08:00 PM
- Kudoed Re: Multiple LayerLists in JS api 4.15 for TamiaRudnicky. 07-22-2020 01:30 PM
- Posted Re: Multiple LayerLists in JS api 4.15 on ArcGIS JavaScript Maps SDK Questions. 07-22-2020 01:25 PM
- Posted Re: How do I get a table of Feature Layer attributes to show in a Grid? on ArcGIS JavaScript Maps SDK Questions. 04-10-2020 03:57 PM
- Kudoed Re: How do I get a table of Feature Layer attributes to show in a Grid? for RobertScheitlin__GISP. 04-09-2020 01:18 PM
- Posted Re: How do I get a table of Feature Layer attributes to show in a Grid? on ArcGIS JavaScript Maps SDK Questions. 04-09-2020 10:02 AM
- Posted How do I get a table of Feature Layer attributes to show in a Grid? on ArcGIS JavaScript Maps SDK Questions. 04-09-2020 12:26 AM
- Tagged How do I get a table of Feature Layer attributes to show in a Grid? on ArcGIS JavaScript Maps SDK Questions. 04-09-2020 12:26 AM
Contact Me
| Online Status |
Offline
|
| Date Last Visited |
07-20-2023
10:39 PM
|