expand does not run on the layerlist when combined with actions

330
2
Jump to solution
06-04-2021 01:50 PM
vmvargas
New Contributor

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">
    <link rel="shortcut icon" href="https://vmvarcas.info/imagen/icons/mundo1.png">
    <title>Proceso Electoral 2018</title>
    <link rel="stylesheet" href="https://js.arcgis.com/4.19/esri/themes/light/main.css">

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

    <script src="https://js.arcgis.com/4.19/"></script>

    <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(MapMapViewHomeLocateLegendLayerListExpandScaleBar,
            BasemapToggleFeatureLayerFeatureTableprojectionwatchUtils) {

            let featureLayer;
            const features = [];

            var minScale = 50000;

            var clase1 = {
                type: "simple-fill",
                color: [16800],
                style: "solid",
                outline: {
                    width: 1,
                    color: [0000.6],
                    style: "short-dash"
                }
            };

            var clase2 = {
                type: "simple-fill",
                color: [2551700],
                style: "solid",
                outline: {
                    width: 1,
                    color: [0000.6],
                    style: "short-dash"
                }
            };

            var clase3 = {
                type: "simple-fill",
                color: [255190190],
                style: "solid",
                outline: {
                    width: 1,
                    color: [0000.6],
                    style: "short-dash"
                }
            };

            var clase4 = {
                type: "simple-fill",
                color: [204204204],
                style: "solid",
                outline: {
                    width: 1,
                    color: [0000.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.431.645],
                constraints: {
                    minScale: 400000
                },
                popup: {
                    autoOpenEnabled: false
                }
            });

            featureLayer = new FeatureLayer({
                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>
 
0 Kudos
1 Solution

Accepted Solutions
ReneRubalcava
Frequent Contributor II

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

 

View solution in original post

0 Kudos
2 Replies
ReneRubalcava
Frequent Contributor II

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

 

0 Kudos
vmvargas
New Contributor

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

0 Kudos