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?

Najděte více příspěvků označených jako

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!

Připojte se ke konverzaci

Přihlášení členové mohou přispívat, sledovat aktualizace a další. Jste tu noví? Zaregistrujte si bezplatný účet.

Rychlé odkazy

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