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

Expand widget show text instead of icon?

Is there an easy way to have the Expand widget show text instead of icons?

Finde mehr Beiträge mit dem Tag

Accepted answers

JeffreyWilkerson

The Expand widget Content section describes that it can handle a Node, String, or Widget. So you could add text like this:

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>
      Intro to FeatureLayer plus Expand Widget | ArcGIS API for JavaScript 4.25
    </title>

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

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <script>
      require(["esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer","esri/widgets/Expand"], (
        Map,
        MapView,
        FeatureLayer,
        Expand
      ) => {
        const map = new Map({
          basemap: "hybrid"
        });

        const view = new MapView({
          container: "viewDiv",
          map: map,

          extent: {
            // autocasts as new Extent()
            xmin: -9177811,
            ymin: 4247000,
            xmax: -9176791,
            ymax: 4247784,
            spatialReference: 102100
          }
        });

        // ** Add feature layer **
        // Carbon storage of trees in Warren Wilson College.
        const featureLayer = new FeatureLayer({
          url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Landscape_Trees/FeatureServer/0"
        });

        map.add(featureLayer);
        
        // ** Add Expand Widget **
        const bgExpand = new Expand({
            view: view,
            content: "<p style='background-color:white; width: 150px;''>This is a string to display</p>"
          });
        
        view.whenLayerView(featureLayer).then(function () {
          view.ui.add(bgExpand, "top-right");
        });
        
      });
    </script>
  </head>

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

All comments

JeffreyWilkerson

The Expand widget Content section describes that it can handle a Node, String, or Widget. So you could add text like this:

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>
      Intro to FeatureLayer plus Expand Widget | ArcGIS API for JavaScript 4.25
    </title>

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

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <script>
      require(["esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer","esri/widgets/Expand"], (
        Map,
        MapView,
        FeatureLayer,
        Expand
      ) => {
        const map = new Map({
          basemap: "hybrid"
        });

        const view = new MapView({
          container: "viewDiv",
          map: map,

          extent: {
            // autocasts as new Extent()
            xmin: -9177811,
            ymin: 4247000,
            xmax: -9176791,
            ymax: 4247784,
            spatialReference: 102100
          }
        });

        // ** Add feature layer **
        // Carbon storage of trees in Warren Wilson College.
        const featureLayer = new FeatureLayer({
          url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Landscape_Trees/FeatureServer/0"
        });

        map.add(featureLayer);
        
        // ** Add Expand Widget **
        const bgExpand = new Expand({
            view: view,
            content: "<p style='background-color:white; width: 150px;''>This is a string to display</p>"
          });
        
        view.whenLayerView(featureLayer).then(function () {
          view.ui.add(bgExpand, "top-right");
        });
        
      });
    </script>
  </head>

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

Ooh great, I didn't realize that, I'll give it a try... thanks!

Nimm an der Diskussion 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.