nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Access and Edit Existing Symbol Properties

durablesoy

Hi I have rendered a set of Graphics and would like to find out how to access the Graphics properties to modify the existing properties of the Graphics' symbol such as its size and offset value. In other word, modify the properties of the graphic via Javascript after rendering.

Finde mehr Beiträge mit dem Tag

Accepted answers

MartinPorteš

Hi, I probably have what you are looking for.

Based on some example I created two renderers and on view click the points switch from one to another. I think you should be able to replicate the same thing with graphics layer.

Have a look and good luck!

Martin

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>
        Visualize all features with the same symbol | Sample | ArcGIS API for JavaScript 4.24
    </title>

    <link rel="stylesheet" href="https://js.arcgis.com/4.24/esri/themes/dark/main.css" />
    <script src="https://js.arcgis.com/4.24/"></script>

    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
            background-color: rgba(15, 15, 15, 1);
        }
    </style>

    <script>
        require([
            "esri/Map",
            "esri/views/MapView",
            "esri/layers/FeatureLayer",
            "esri/widgets/Legend"
        ], (Map, MapView, FeatureLayer, Legend) => {
            /******************************************************************
             *
             * Set up renderer for visualizing all cities with a single symbol
             *
             ******************************************************************/

            const citiesRenderer = {
                type: "simple", // autocasts as new SimpleRenderer()
                symbol: {
                    type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
                    size: 5,
                    color: [255, 0, 255],
                    outline: null
                }
            };

            const citiesRenderer2 = {
                type: "simple", // autocasts as new SimpleRenderer()
                symbol: {
                    type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
                    size: 5,
                    color: [0, 255, 255],
                    outline: null
                }
            };

            const citiesLayer = new FeatureLayer({
                url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/WorldCities/FeatureServer/0",
                renderer: citiesRenderer,
                definitionExpression: "adm = 'United States of America'"
            });

            // Add the layers to the map
            const map = new Map({
                layers: [citiesLayer]
            });

            const view = new MapView({
                container: "viewDiv",
                map: map,
                extent: {
                    xmin: -3094834,
                    ymin: -44986,
                    xmax: 2752687,
                    ymax: 3271654,
                    spatialReference: {
                        wkid: 5070
                    }
                },
                spatialReference: {
                    // NAD_1983_Contiguous_USA_Albers
                    wkid: 5070
                }
            });

            view.on("click", function(event) {
                citiesLayer.renderer = citiesRenderer2
            })
        });
    </script>
</head>

<body>
    <div id="viewDiv"></div>
</body>

</html>

All comments

MartinPorteš

Hi,

I'm glad I could help. Please accept my post as solution. It should be visible nex to Kudos button or it is in Post Options.

Thank you and have a nice day!

durablesoy

Hi Martin, thank you for the advice and code. Cheers!

MartinPorteš

Hi, I probably have what you are looking for.

Based on some example I created two renderers and on view click the points switch from one to another. I think you should be able to replicate the same thing with graphics layer.

Have a look and good luck!

Martin

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>
        Visualize all features with the same symbol | Sample | ArcGIS API for JavaScript 4.24
    </title>

    <link rel="stylesheet" href="https://js.arcgis.com/4.24/esri/themes/dark/main.css" />
    <script src="https://js.arcgis.com/4.24/"></script>

    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
            background-color: rgba(15, 15, 15, 1);
        }
    </style>

    <script>
        require([
            "esri/Map",
            "esri/views/MapView",
            "esri/layers/FeatureLayer",
            "esri/widgets/Legend"
        ], (Map, MapView, FeatureLayer, Legend) => {
            /******************************************************************
             *
             * Set up renderer for visualizing all cities with a single symbol
             *
             ******************************************************************/

            const citiesRenderer = {
                type: "simple", // autocasts as new SimpleRenderer()
                symbol: {
                    type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
                    size: 5,
                    color: [255, 0, 255],
                    outline: null
                }
            };

            const citiesRenderer2 = {
                type: "simple", // autocasts as new SimpleRenderer()
                symbol: {
                    type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
                    size: 5,
                    color: [0, 255, 255],
                    outline: null
                }
            };

            const citiesLayer = new FeatureLayer({
                url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/WorldCities/FeatureServer/0",
                renderer: citiesRenderer,
                definitionExpression: "adm = 'United States of America'"
            });

            // Add the layers to the map
            const map = new Map({
                layers: [citiesLayer]
            });

            const view = new MapView({
                container: "viewDiv",
                map: map,
                extent: {
                    xmin: -3094834,
                    ymin: -44986,
                    xmax: 2752687,
                    ymax: 3271654,
                    spatialReference: {
                        wkid: 5070
                    }
                },
                spatialReference: {
                    // NAD_1983_Contiguous_USA_Albers
                    wkid: 5070
                }
            });

            view.on("click", function(event) {
                citiesLayer.renderer = citiesRenderer2
            })
        });
    </script>
</head>

<body>
    <div id="viewDiv"></div>
</body>

</html>

Nimm an der Unterhaltung teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.