WebStyleSymbol (2D) | Sample | ArcGIS Maps SDK for JavaScript

Skip to content

WebStyleSymbol can be used to style graphics in FeatureLayer and GraphicsLayer. This sample demonstrates how to style feature layer with 2D Web Style Symbols using UniqueValueRenderer in a map.

The code snippet below creates an array of 25 symbol names that will be used in the sample. The symbol names are well-known names from 2D Web Style Symbols. Then, it iterates through the symbol names and creates an array of value-symbol pairs as uniqueValueInfos on the UniqueValueRenderer for the feature layer.

const symbolCats = [
  "post-office",
  "atm",
  "place-of-worship",
  "park",
  "school",
  "hospital",
  "fire-station",
  "playground",
  "shopping-center",
  "campground",
  "golf-course",
  "library",
  "city-hall",
  "beach",
  "police-station",
  "subway-station",
  "train-station",
  "cemetery",
  "trail",
  "radio-tower",
  "museum",
  "airport",
  "live-music-venue",
  "sports-complex",
  "ferry",
];

rendererInfos = symbolCats.map((symCat) => {
  return {
    value: symCat,
    symbol: {
      type: "web-style",
      name: symCat,
      styleName: "Esri2DPointSymbolsStyle",
    },
    label: symCat,
  };
});

More out-of-box web style symbols that can be used in 2D Maps can be found on the guide page Esri Web Style Symbols (2D).

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>WebStyleSymbol (2D) | Sample | ArcGIS Maps SDK for JavaScript</title>

    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
    <script type="module" src="https://js.arcgis.com/5.0/"></script>

    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }
    </style>
  </head>

  <body>
    <arcgis-map>
      <arcgis-zoom slot="top-left"></arcgis-zoom>
      <arcgis-bookmarks slot="top-left"></arcgis-bookmarks>
      <arcgis-legend slot="bottom-right"></arcgis-legend>
    </arcgis-map>
    <script type="module">
      const [Map, FeatureLayer, Bookmark] = await $arcgis.import([
        "@arcgis/core/Map.js",
        "@arcgis/core/layers/FeatureLayer.js",
        "@arcgis/core/webmap/Bookmark.js",
      ]);
      // Get a reference to the map and bookmarks components
      const viewElement = document.querySelector("arcgis-map");
      const bookmarksElement = document.querySelector("arcgis-bookmarks");

      // Get the category expression from the script tag
      // This expression is used to categorize the points of interest
      // based on their category field (cat2)
      const category = document.getElementById("category").text;

      // Create a new map and set it to the view element
      viewElement.map = new Map({
        basemap: "gray-vector",
      });
      viewElement.extent = {
        spatialReference: {
          latestWkid: 3857,
          wkid: 102100,
        },
        xmin: -13185668,
        ymin: 4066176,
        xmax: -13183855,
        ymax: 4067515,
      };
      viewElement.constraints = {
        minScale: 2311104,
      };
      viewElement.popup = {
        defaultPopupTemplateEnabled: true,
      };
      await viewElement.viewOnReady();
      const symbolCats = [
        "post-office",
        "atm",
        "place-of-worship",
        "park",
        "school",
        "hospital",
        "fire-station",
        "playground",
        "shopping-center",
        "campground",
        "golf-course",
        "library",
        "city-hall",
        "beach",
        "police-station",
        "subway-station",
        "train-station",
        "cemetery",
        "trail",
        "radio-tower",
        "museum",
        "airport",
        "live-music-venue",
        "sports-complex",
        "ferry",
      ];
      // Get the WebStyle symbol for each category
      const rendererInfos = symbolCats.map((symCat) => {
        return {
          value: symCat,
          symbol: {
            type: "web-style",
            name: symCat,
            styleName: "Esri2DPointSymbolsStyle",
          },
          label: symCat,
        };
      });
      const scale = 36112;
      // Create a renderer that uses the category expression to categorize the points of interest
      const renderer = {
        type: "unique-value", // autocasts as new UniqueValueRenderer()
        valueExpression: category,
        valueExpressionTitle: "Symbol Categories",
        uniqueValueInfos: rendererInfos,
        visualVariables: [
          {
            type: "size",
            valueExpression: "$view.scale",
            stops: [
              {
                value: scale,
                size: 20,
              },
              {
                value: scale * 2,
                size: 15,
              },
              {
                value: scale * 4,
                size: 10,
              },
              {
                value: scale * 8,
                size: 5,
              },
              {
                value: scale * 16,
                size: 2,
              },
              {
                value: scale * 32,
                size: 1,
              },
            ],
          },
        ],
      };
      // Create a FeatureLayer to display the points of interest
      const featureLayer = new FeatureLayer({
        url: "http://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/LA_County_Points_of_Interest/FeatureServer/0",
        renderer: renderer,
        popupTemplate: {
          title: "{Name}",
          content: [
            {
              type: "fields",
              fieldInfos: [
                {
                  fieldName: "cat2",
                  label: "Category",
                },
                {
                  fieldName: "addrln1",
                  label: "Address",
                },
                {
                  fieldName: "city",
                  label: "City",
                },
                {
                  fieldName: "phones",
                  label: "Phone number",
                },
                {
                  fieldName: "link",
                  label: "Link",
                },
              ],
            },
          ],
        },
      });
      // Add the FeatureLayer to the map
      viewElement.map.add(featureLayer);

      // Set bookmarks for the map once the component is ready
      await bookmarksElement.componentOnReady();
      bookmarksElement.bookmarks = [
        new Bookmark({
          name: "Angeles National Forest",
          viewpoint: {
            targetGeometry: {
              type: "extent",
              spatialReference: {
                wkid: 102100,
              },
              xmin: -13139131.948889678,
              ymin: 4047767.23531948,
              xmax: -13092887.54677721,
              ymax: 4090610.189673263,
            },
          },
        }),
        new Bookmark({
          name: "Crystal Lake",
          viewpoint: {
            targetGeometry: {
              type: "extent",
              spatialReference: {
                wkid: 102100,
              },
              xmin: -13125852.551697943,
              ymin: 4066904.1101411926,
              xmax: -13114291.451169826,
              ymax: 4077614.8487296384,
            },
          },
        }),
        new Bookmark({
          name: "San Fernando",
          viewpoint: {
            targetGeometry: {
              type: "extent",
              spatialReference: {
                latestWkid: 3857,
                wkid: 102100,
              },
              xmin: -13185668.186639601,
              ymin: 4066176.418652561,
              xmax: -13183855.195875114,
              ymax: 4067515.260976006,
            },
          },
        }),
      ];
    </script>
    <script type="text/plain" id="category">
      if($feature.cat2 == "UPS Locations" || $feature.cat2 == "USPS Mail Collection Boxes" || $feature.cat2 == "DHL Locations" || $feature.cat2 == "Federal Express Locations"){
          return "post-office"
        }
        else if($feature.cat2=="Banking and Finance"){
          return "atm"
        }
        else if($feature.cat2 == "Churches"){
          return "place-of-worship"
        }
        else if($feature.cat2 == "Parks and Gardens"){
          return "park"
        }
        else if($feature.cat1 == "Education"){
          return "school"
        }
        else if($feature.cat2 == "Mental Health Centers" ||$feature.cat2 == "Medicare and Medicaid Offices"|| $feature.cat2 == "Mental Health Counseling" || $feature.cat2== "Dental Care" || $feature.cat2 == "Health Clinics" || $feature.cat2== "Health Centers" || $feature.cat2 == "Health Education and Counseling" || $feature.cat2== "Health Screening and Testing" || $feature.cat2== "Hospitals and Medical Centers"){
          return "hospital"
        }
        else if($feature.cat2 == "Fire Stations"){
          return "fire-station"
        }
        else if($feature.cat2 == "Recreation Centers" || $feature.cat2 == "Recreation Programs" || $feature.cat2 == "Park and Ride Locations"){
          return "playground"
        }
        else if($feature.cat2 == "Shopping Centers" || $feature.cat2=="Thrift Shops"){
          return "shopping-center"
        }
        else if($feature.cat2 == "Campgrounds"){
          return "campground"
        }
        else if($feature.cat2 == "Golf Courses"){
          return "golf-course"
        }
        else if($feature.cat2 == "Libraries"){
          return "library"
        }
        else if($feature.cat2 == "City Halls"|| $feature.cat2 == "Government Offices" || $feature.cat2 =="County Offices" || $feature.cat2 =="Probation Offices" || $feature.cat2 =="Social Security Administration"){
          return "city-hall"
        }
        else if($feature.cat2 == "Beaches and Marinas"){
          return "beach"
        }
        else if($feature.cat2 == "Sheriff and Police Stations"){
          return "police-station"
        }
        else if($feature.cat2 == "Metro Stations"){
          return "subway-station"
        }
        else if($feature.cat2 == "Metrolink Stations" || $feature.cat2 == "Amtrak Stations"){
          return "train-station"
        }
        else if($feature.cat2 == "Cemeteries"){
          return "cemetery"
        }
        else if($feature.cat2 == "Trails"){
          return "trail"
        }
        else if($feature.cat2 == "Microwave Towers" || $feature.cat2 =="Cellular Towers"){
          return "radio-tower"
        }
        else if($feature.cat2 == "Museums and Aquariums"){
          return "museum"
        }
        else if($feature.cat2 == "Airport"){
          return "airport"
        }
        else if($feature.cat2 == "Cultural and Performing Arts Centers"){
          return "live-music-venue"
        }
        else if($feature.cat2 == "Sports Venues"){
          return "sports-complex"
        }
        else if($feature.cat2 == "Ferries"){
          return "ferry"
        }
    </script>
  </body>
</html>