Community

How can I make featureLayer visible/active with url string?

698
3
05-05-2022 07:14 AM
DwightCarter
by
New Contributor
‎05-05-2022 07:14 AM

Hey I am new to using esri and have not been able to find a solution for this but is it possible to be able to make a layer active and display with a url string?

 

This is my code below.

 

 

require([
    'esri/Map',
    'esri/views/MapView',
    'esri/layers/FeatureLayer',
    'esri/widgets/LayerList',
    'esri/request',
    'esri/layers/GroupLayer',
    'esri/layers/MapImageLayer',
    'esri/PopupTemplate',
], (Map, MapView, FeatureLayer, LayerList, esriRequest, GroupLayer) => {
    const template = {
        title: '{name}',
        content: '{comments}',
    };

    // request GeoJson data from USGS remote server
    let url =

    esriRequest(url, {
        responseType: 'json',
    }).then(function (response) {
        // The requested data
        let geoJson = response.data;
        console.log(response.data);
    });

    // Create GroupLayer with the two MapImageLayers created above
    // as children layers.

    const firstLayer = new FeatureLayer({
        title: 'Phase 1',
        visible: true,
        definitionExpression: 'phase = 1',
    });

    const secondLayer = new FeatureLayer({
        title: 'Phase 2',
        visible: false,
        definitionExpression: 'phase = 2',
    });

    const thirdLayer = new FeatureLayer({
        title: 'Phase 3',
        visible: false,
        definitionExpression: 'phase = 3',
    });

    const fourthLayer = new FeatureLayer({
        title: 'Phase 4',
        visible: false,
        definitionExpression: 'phase = 4',
    });

    const fifthLayer = new FeatureLayer({
        title: 'Phase 5',
        visible: false,
        definitionExpression: 'phase = 5',
    });

    firstLayer.popupTemplate = template;
    secondLayer.popupTemplate = template;
    thirdLayer.popupTemplate = template;
    fourthLayer.popupTemplate = template;
    fifthLayer.popupTemplate = template;
 


    const demographicGroupLayer = new GroupLayer({
        title: 'Closures',
        visible: true,
        // visibilityMode: 'exclusive',
        // layers: [zeroLayer],
        layers: [
            fifthLayer,
            fourthLayer,
            thirdLayer,
            secondLayer,
            firstLayer,
        ],
    });

    const map = new Map({
        basemap: 'hybrid',
        layers: [demographicGroupLayer],
    });
    const view = new MapView({
        container: 'viewDiv',
        map: map,
        center: [-81.643005, 38.3577], //Longitude, latitude
        zoom: 15,
    });

    // Creates actions in the LayerList.

    function defineActions(event) {
        // The event object contains an item property.
        // is is a ListItem referencing the associated layer
        // and other properties. You can control the visibility of the
        // item, its title, and actions using this object.

        const item = event.item;

        if (item.title === 'Closures') {
            // An array of objects defining actions to place in the LayerList.
            // By making this array two-dimensional, you can separate similar
            // actions into separate groups with a breaking line.

            item.actionsSections = [
                [
                    {
                        title: 'Go to full extent',
                        className: 'esri-icon-zoom-out-fixed',
                        id: 'full-extent',
                    },
                    {
                        title: 'Layer information',
                        className: 'esri-icon-description',
                        id: 'information',
                    },
                ],
                [
                    {
                        title: 'Increase opacity',
                        className: 'esri-icon-up',
                        id: 'increase-opacity',
                    },
                    {
                        title: 'Decrease opacity',
                        className: 'esri-icon-down',
                        id: 'decrease-opacity',
                    },
                ],
            ];
        }
    }

    view.when(() => {
        // Create the LayerList widget with the associated actions
        // and add it to the top-right corner of the view.

        const layerList = new LayerList({
            view: view,
            // executes for each ListItem in the LayerList
            listItemCreatedFunction: defineActions,
        });
        // Add widget to the top right corner of the view
        view.ui.add(layerList, 'top-left');
    });
    // map.add(featureLayer);
    // featureLayer.popupTemplate = template;
});
Tags (4)
0 Kudos
3 Replies
BlakeTerhune
by MVP Regular Contributor
MVP Regular Contributor
‎05-05-2022 08:54 AM

I think you can put whatever parameters you want in the url. You can parse it with urlUtils or the built-in URLSearchParams(). I would do something like this:

// window.location url example "http://www.myworld.com?state_name=Ohio&city_name=Akron&visible_layer=TheLayerNameHere"
const urlParams = new URLSearchParams(window.location.search);
let visibleLayer = urlParams.get("visible_layer");
// Set layer visibility...
DwightCarter
by
New Contributor
‎05-05-2022 10:26 AM

Thanks with the URL im stuck on how to actually make it execute the query request any idea on if thats possible?

0 Kudos
ReneRubalcava
by
Frequent Contributor
‎05-05-2022 10:40 AM

It looks like you're tying to initialize a layer with the query endpoint of a URL. You don't need to do that. Pass the URL with the index and define your query in the definitionExpression instead.

This tutorial might be helpful as it shows how to apply SQL expressions to the deinfitionExpression of a layer.

https://developers.arcgis.com/javascript/latest/filter-a-feature-layer-with-sql/

0 Kudos