expand does not run on the layerlist when combined with actions

vmvargas — Fri, 04 Jun 2021 20:50:07 GMT

here's my code

Thank you

<!DOCTYPE html>

<head>

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

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: [{

label: "No. Seccion",

format: {

digitSeparator: false,

places: 0

direction: "asc"

}, {

label: "Listado Nominal"

}, {

label: "Votos PAN"

}, {

label: "Votos PRI"

}, {

label: "Votos PRD"

}, {

label: "Votos PVEM"

}, {

label: "Votos PT"

}, {

label: "Votos MC"

}, {

label: "Votos PNA"

}, {

label: "Votos MORENA"

}, {

label: "Votos PES"

}, {

label: "Votos INDEPENDIENTE"

}, {

label: "Ganador de seccion"

}, {

label: "Diferencia de votos"

}, {

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>

</div>

</body>

</html>

Re: expand does not run on the layerlist when combined with actions

ReneRubalcava — Sat, 05 Jun 2021 16:01:52 GMT

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 });

Re: expand does not run on the layerlist when combined with actions

vmvargas — Mon, 07 Jun 2021 17:35:05 GMT

@ReneRubalcava Thank you it was a great help to me your answer

topic expand does not run on the layerlist when combined with actions in ArcGIS JavaScript Maps SDK Questions

expand does not run on the layerlist when combined with actions

Re: expand does not run on the layerlist when combined with actions

Re: expand does not run on the layerlist when combined with actions