Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Cancel
- Home
- :
- All Communities
- :
- Developers
- :
- JavaScript Maps SDK
- :
- JavaScript Maps SDK Questions
- :
- expand does not run on the layerlist when combined...
Options
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Mute
- Printer Friendly Page
expand does not run on the layerlist when combined with actions
Subscribe
06-04-2021
01:50 PM
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
expand does not run on the layerlist when combined with actions
here's my code
Thank you
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Proceso Electoral 2018</title>
<style>
:root {
--sk-color: #2F635E;
/*#333*/
}
html,
body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#viewDiv {
height: 50%;
width: 100%;
}
.container {
height: 50%;
width: 100%;
}
.sk-wave {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
width: 4em;
height: 4em;
display: flex;
justify-content: space-between;
}
.sk-wave-rect {
background-color: var(--sk-color);
height: 100%;
width: 15%;
animation: sk-wave 1.2s infinite ease-in-out;
}
.sk-wave-rect:nth-child(1) {
animation-delay: -1.2s;
}
.sk-wave-rect:nth-child(2) {
animation-delay: -1.1s;
}
.sk-wave-rect:nth-child(3) {
animation-delay: -1.0s;
}
.sk-wave-rect:nth-child(4) {
animation-delay: -0.9s;
}
.sk-wave-rect:nth-child(5) {
animation-delay: -0.8s;
}
@keyframes sk-wave {
0%,
40%,
100% {
transform: scaleY(0.4);
}
20% {
transform: scaleY(1);
}
}
</style>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/widgets/Home",
"esri/widgets/Locate",
"esri/widgets/Legend",
"esri/widgets/LayerList",
"esri/widgets/Expand",
"esri/widgets/ScaleBar",
"esri/widgets/BasemapToggle",
"esri/layers/FeatureLayer",
"esri/widgets/FeatureTable",
"esri/geometry/projection",
"esri/core/watchUtils",
"dojo/domReady!"
], function(Map, MapView, Home, Locate, Legend, LayerList, Expand, ScaleBar,
BasemapToggle, FeatureLayer, FeatureTable, projection, watchUtils) {
let featureLayer;
const features = [];
var minScale = 50000;
var clase1 = {
type: "simple-fill",
color: [168, 0, 0],
style: "solid",
outline: {
width: 1,
color: [0, 0, 0, 0.6],
style: "short-dash"
}
};
var clase2 = {
type: "simple-fill",
color: [255, 170, 0],
style: "solid",
outline: {
width: 1,
color: [0, 0, 0, 0.6],
style: "short-dash"
}
};
var clase3 = {
type: "simple-fill",
color: [255, 190, 190],
style: "solid",
outline: {
width: 1,
color: [0, 0, 0, 0.6],
style: "short-dash"
}
};
var clase4 = {
type: "simple-fill",
color: [204, 204, 204],
style: "solid",
outline: {
width: 1,
color: [0, 0, 0, 0.6],
style: "short-dash"
}
};
var renganador = {
type: "unique-value",
field: "GANADOR",
uniqueValueInfos: [{
value: "CABADA",
symbol: clase1,
label: "Independiente"
}, {
value: "EMPATE",
symbol: clase2,
label: "Empate"
}, {
value: "MORENA",
symbol: clase3,
label: "Morena"
}, {
value: "SIN VOTOS",
symbol: clase4,
label: "Sin Votos"
}]
};
const map = new Map({
basemap: "topo-vector",
});
let view = new MapView({
container: "viewDiv",
map: map,
zoom: 13,
center: [-106.4, 31.645],
constraints: {
minScale: 400000
},
popup: {
autoOpenEnabled: false
}
});
featureLayer = new FeatureLayer({
url: "https://services8.arcgis.com/tyG36nFwhZCyrXss/ArcGIS/rest/services/alcalde2018/FeatureServer",
layerId: 0,
id: 5,
title: "Ganador Elecciones 2018",
opacity: 0.65,
renderer: renganador,
spatialReference: view.spatialReference,
labelingInfo: [{
minScale: 20000,
labelPlacement: "always-horizontal",
labelExpressionInfo: {
expression: "$feature.ID"
},
symbol: {
type: "text",
color: "blue",
haloColor: "white",
haloSize: 0.8,
font: {
family: "sans-serif",
size: 10,
weight: "bold"
}
},
}],
outFields: ["*"],
popupTemplate: {
title: "Numero de seccion: {ID}",
content: [{
type: "fields",
fieldInfos: [{
fieldName: "MORENA",
label: "votos Morena"
}, {
fieldName: "CABADA",
label: "votos Cabada"
}, {
fieldName: "GANADOR",
label: "Ganador de seccion"
}]
}]
}
});
map.add(featureLayer);
function defineActions(event) {
var item = event.item;
if (item.title === "Ganador Elecciones 2018") {
item.actionsSections = [
[{
title: "Increase opacity",
className: "esri-icon-up",
id: "increase-opacity"
}, {
title: "Decrease opacity",
className: "esri-icon-down",
id: "decrease-opacity"
}]
];
}
}
watchUtils.whenTrue(view, "updating", function(evt) {
$(".sk-wave").show();
});
watchUtils.whenFalse(view, "updating", function(evt) {
$(".sk-wave").hide();
});
// When view is ready, find feature layer and set title and outFields
view.when(function() {
var layerList = new LayerList({
container: document.createElement("div"),
view: view,
index: 10,
listItemCreatedFunction: defineActions,
});
layerListExpand = new Expand({
expandIconClass: "esri-icon-expand",
view: view,
content: layerList.domNode,
expanded: true
});
view.ui.add(layerList, {
position: "top-right",
index: 4
});
layerList.on("trigger-action", function(event) {
var id = event.action.id;
if (id === "increase-opacity") {
if (featureLayer.opacity < 1) {
featureLayer.opacity += 0.25;
}
} else if (id === "decrease-opacity") {
if (featureLayer.opacity > 0) {
featureLayer.opacity -= 0.25;
}
}
});
console.log("propiedades de la vista", view);
console.log("que son los features", features);
console.log("que es el expande", layerListExpand);
const featureTable = new FeatureTable({
view: view,
layer: featureLayer,
menuConfig: {
items: [{
label: "Zoom to feature(s)",
iconClass: "esri-icon-zoom-in-magnifying-glass",
clickFunction: function(event) {
zoomToSelectedFeature();
}
}]
},
fieldConfigs: [{
name: "ID",
label: "No. Seccion",
format: {
digitSeparator: false,
places: 0
},
direction: "asc"
}, {
name: "LN",
label: "Listado Nominal"
}, {
name: "PAN",
label: "Votos PAN"
}, {
name: "PRI",
label: "Votos PRI"
}, {
name: "PRD",
label: "Votos PRD"
}, {
name: "PVEM",
label: "Votos PVEM"
}, {
name: "PT",
label: "Votos PT"
}, {
name: "MC",
label: "Votos MC"
}, {
name: "PNA",
label: "Votos PNA"
}, {
name: "MORENA",
label: "Votos MORENA"
}, {
name: "PES",
label: "Votos PES"
}, {
name: "CABADA",
label: "Votos INDEPENDIENTE"
}, {
name: "GANADOR",
label: "Ganador de seccion"
}, {
name: "DIFEVOTOS",
label: "Diferencia de votos"
}, {
name: "TotalVotos",
label: "Total de votos"
}],
container: document.getElementById("tableDiv")
});
featureTable.on("selection-change", function(changes) {
changes.removed.forEach(function(item) {
const data = features.find(function(data) {
return data.feature === item.feature;
});
if (data) {
features.splice(features.indexOf(data), 1);
}
});
changes.added.forEach(function(item) {
const feature = item.feature;
features.push({
feature: feature
});
});
});
function zoomToSelectedFeature() {
// Create a query off of the feature layer
const query = featureLayer.createQuery();
// Iterate through the features and grab the feature's objectID
const featureIds = features.map((result) => {
return result.feature.getAttribute(featureLayer.objectIdField);
});
// Set the query's objectId
query.objectIds = featureIds;
// Make sure to return the geometry to zoom to
query.returnGeometry = true;
query.outSpatialReference = view.spatialReference;
// Call queryFeatures on the feature layer and zoom to the resulting features
featureLayer.queryFeatures(query).then((results) => {
view.goTo(results.features).catch((error) => {
if (error.name != "AbortError") {
console.error(error);
}
});
});
}
});
var locateBtn = new Locate({
view: view
});
view.ui.add(locateBtn, {
position: "top-left",
index: 0
});
var homeBtn = new Home({
view: view
});
view.ui.add(homeBtn, {
position: "top-left",
index: 4
});
var legend = new Legend({
container: document.createElement("div"),
view: view,
});
legendExpand = new Expand({
expandIconClass: "esri-icon-expand",
view: view,
content: legend.domNode
});
view.ui.add(legendExpand, {
position: "bottom-left"
});
var toggle = new BasemapToggle({
view: view,
nextBasemap: "hybrid"
});
view.ui.add(toggle, {
position: "top-right",
index: 0
});
var scaleBar = new ScaleBar({
view: view,
unit: "dual"
});
view.ui.add(scaleBar, {
position: "bottom-right"
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div class="container">
<div id="tableDiv"></div>
</div>
<div class="sk-wave">
<div class="sk-wave-rect"></div>
<div class="sk-wave-rect"></div>
<div class="sk-wave-rect"></div>
<div class="sk-wave-rect"></div>
<div class="sk-wave-rect"></div>
</div>
</body>
</html>
Solved! Go to Solution.
1 Solution
Accepted Solutions
06-05-2021
09:01 AM
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
It doesn't look like you're adding the expand for the layerlist to the page, you're adding the LayerList itself.
// current
view.ui.add(layerList, {
position: "top-right",
index: 4
});
// update
view.ui.add(layerListExpand, {
position: "top-right",
index: 4
});
2 Replies
06-05-2021
09:01 AM
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
It doesn't look like you're adding the expand for the layerlist to the page, you're adding the LayerList itself.
// current
view.ui.add(layerList, {
position: "top-right",
index: 4
});
// update
view.ui.add(layerListExpand, {
position: "top-right",
index: 4
});
06-07-2021
10:35 AM
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
@ReneRubalcava Thank you it was a great help to me your answer
