Select to view content in your preferred language

Expand widget show text instead of icon?

663
2
Jump to solution
11-29-2022 02:57 PM
_____
by
Frequent Contributor

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

0 Kudos
1 Solution

Accepted Solutions
JeffreyWilkerson
Frequent Contributor

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>

 

View solution in original post

2 Replies
JeffreyWilkerson
Frequent Contributor

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>

 

_____
by
Frequent Contributor

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

0 Kudos