Style a feature layer

Learn how to use data-driven styling to apply symbol colors and styles to feature layers.

A feature layer is a dataset in a feature service hosted in ArcGIS. Each feature layer contains features with a single geometry type (point, line, or polygon), and a set of attributes. A feature layer can be styled in Mapbox GL JS with a layer connected to a geojson source. Layers can contain expressions which use attribute values to calculate values. This lets you create complex, data-driven visualizations by relating visual variables to data attributes.

In this tutorial, you use symbol, line and fill layers to style three hosted feature layers in the ArcGIS Platform.

Prerequisites

You need a free ArcGIS developer account to access your dashboard and API keys. The API key must be scoped to access the services used in this tutorial.

Steps

Create a new pen

  1. To get started, either complete the Display a map tutorial or .

Set the API key

To access ArcGIS location services, you need an API key.

  1. Go to your dashboard to get an API key.

  2. In CodePen, update apiKey to use your key.

    Change line
              
    //
    
    const apiKey = "YOUR-API-KEY";
    const basemapEnum = "ArcGIS:Streets";
    const map = new mapboxgl.Map({
      container: "map", // the id of the div element
      style: `https://basemaps-api.arcgis.com/arcgis/rest/services/styles/${basemapEnum}?type=style&apiKey=${apiKey}`,
      zoom: 12, // starting zoom
      center: [-118.805, 34.027] // starting location [longitude, latitude]
    });
    

Load a hiker icon

To use an image as an icon, you must first load the image into the map style using map.loadImage and map.addImage.

  1. Call map.loadImage with 'https://static.arcgis.com/images/Symbols/NPS/npsPictograph_0231b.png' as the first parameter. The second parameter is a callback taking an error and the image.

    See the Mapbox GL JS documentation for more information.

    Add line.Add line.Add line.
                                                                                                                                                                                        
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
        <title>Mapbox GL JS Tutorials: Display a map</title>
        <style>
          html,
          body,
          #map {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 14px;
            color: #323232;
          }
        </style>
    
        <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
        <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />
    
      </head>
      <body>
        <div id="map"></div>
    
        <script>
    
          const apiKey = "YOUR-API-KEY";
          const basemapEnum = "ArcGIS:Streets";
    
          const map = new mapboxgl.Map({
            container: "map", // the id of the div element
            style: `https://basemaps-api.arcgis.com/arcgis/rest/services/styles/${basemapEnum}?type=style&apiKey=${apiKey}`,
            zoom: 12, // starting zoom
            center: [-118.805, 34.027] // starting location [longitude, latitude]
          });
    
          map.loadImage("https://static.arcgis.com/images/Symbols/NPS/npsPictograph_0231b.png", (error, image) => {
    
            if (error) {
              throw error;
            }
            map.addImage("hiker-icon", image);
    
          });
    
          function showTrailheads() {
    
            const trailheadsLayerName = "Trailheads";
            const trailheadsLayerURL =
              "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/" +
              trailheadsLayerName +
              "/FeatureServer/0/query?where=1%3D1&outFields=*&returnGeometry=true&f=pgeojson";
            map.addSource("trailheads", {
              type: "geojson",
              data: trailheadsLayerURL
            });
    
            map.addLayer({
              id: "trailheads-symbol",
              type: "symbol",
              source: "trailheads",
              layout: {
                "icon-image": "hiker-icon",
                "icon-size": 0.3,
                "icon-allow-overlap": true,
    
                "text-font": ["Arial Italic"],
                "text-field": ["get", "TRL_NAME"],
                "text-size": 12,
                "text-anchor": "bottom",
                "text-offset": [0, -2]
    
              },
              paint: {
                "text-color": "white",
                "text-halo-color": "seagreen",
                "text-halo-width": 2
    
              }
            });
    
          }
    
          function showTrails() {
    
            const trailsLayerName = "Trails";
            const trailsLayerURL =
              "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/" +
              trailsLayerName +
              "/FeatureServer/0/query?where=1%3D1&outFields=*&returnGeometry=true&f=pgeojson";
            map.addSource("trails", {
              type: "geojson",
              data: trailsLayerURL
            });
    
            map.addLayer({
              id: "trails-line",
              type: "line",
              source: "trails",
              paint: {
                "line-color": "hsl(291, 44%, 60%)",
    
                "line-width": ["interpolate", ["linear"], ["get", "ELEV_GAIN"], 0, 3, 2300, 7],
    
                "line-opacity": 0.75
              }
            });
    
          }
    
          function showBikeTrails() {
    
            map.addLayer({
              id: "biketrails-line",
              type: "line",
              source: "trails",
              filter: ["==", ["get", "USE_BIKE"], "Yes"],
              paint: {
                "line-dasharray": [1, 2],
                "line-width": 2,
                "line-color": "hsl(300, 100%, 78.4%)"
              }
            });
    
          }
    
          function showParks() {
    
            const parksLayerName = "Parks_and_Open_Space";
            const parksLayerURL =
              "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/" +
              parksLayerName +
              "/FeatureServer/0/query?where=1%3D1&outFields=*&returnGeometry=true&f=pgeojson";
            map.addSource("parks", {
              type: "geojson",
              data: parksLayerURL
            });
    
            map.addLayer({
              id: "parks-fill",
              type: "fill",
              source: "parks",
              paint: {
                "fill-color": [
                  "match",
                  ["get", "TYPE"],
                  "Natural Areas",
                  "#9E559C",
                  "Regional Open Space",
                  "#A7C636",
                  "Local Park",
                  "#149ECE",
                  "Regional Recreation Park",
                  "#ED5151",
                  "black"
                ],
                "fill-opacity": 0.2
              }
            });
    
          }
    
          map.on("load", () => {
    
            showParks();
    
            showTrails();
            showBikeTrails();
    
            showTrailheads();
    
          });
    
        </script>
    
      </body>
    </html>
  2. Call map.addImage to define hiker-icon as the provided image.

    A Mapbox style can contain a number of images as part of its sprite file. map.addImage is required to display images that are not included in its sprite file.

    See the Mapbox GL JS documentation for more information.

    Add line.Add line.Add line.Add line.
                                                                                                                                                                                        
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
        <title>Mapbox GL JS Tutorials: Display a map</title>
        <style>
          html,
          body,
          #map {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 14px;
            color: #323232;
          }
        </style>
    
        <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
        <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />
    
      </head>
      <body>
        <div id="map"></div>
    
        <script>
    
          const apiKey = "YOUR-API-KEY";
          const basemapEnum = "ArcGIS:Streets";
    
          const map = new mapboxgl.Map({
            container: "map", // the id of the div element
            style: `https://basemaps-api.arcgis.com/arcgis/rest/services/styles/${basemapEnum}?type=style&apiKey=${apiKey}`,
            zoom: 12, // starting zoom
            center: [-118.805, 34.027] // starting location [longitude, latitude]
          });
    
          map.loadImage("https://static.arcgis.com/images/Symbols/NPS/npsPictograph_0231b.png", (error, image) => {
    
            if (error) {
              throw error;
            }
            map.addImage("hiker-icon", image);
    
          });
    
          function showTrailheads() {
    
            const trailheadsLayerName = "Trailheads";
            const trailheadsLayerURL =
              "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/" +
              trailheadsLayerName +
              "/FeatureServer/0/query?where=1%3D1&outFields=*&returnGeometry=true&f=pgeojson";
            map.addSource("trailheads", {
              type: "geojson",
              data: trailheadsLayerURL
            });
    
            map.addLayer({
              id: "trailheads-symbol",
              type: "symbol",
              source: "trailheads",
              layout: {
                "icon-image": "hiker-icon",
                "icon-size": 0.3,
                "icon-allow-overlap": true,
    
                "text-font": ["Arial Italic"],
                "text-field": ["get", "TRL_NAME"],
                "text-size": 12,
                "text-anchor": "bottom",
                "text-offset": [0, -2]
    
              },
              paint: {
                "text-color": "white",
                "text-halo-color": "seagreen",
                "text-halo-width": 2
    
              }
            });
    
          }
    
          function showTrails() {
    
            const trailsLayerName = "Trails";
            const trailsLayerURL =
              "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/" +
              trailsLayerName +
              "/FeatureServer/0/query?where=1%3D1&outFields=*&returnGeometry=true&f=pgeojson";
            map.addSource("trails", {
              type: "geojson",
              data: trailsLayerURL
            });
    
            map.addLayer({
              id: "trails-line",
              type: "line",
              source: "trails",
              paint: {
                "line-color": "hsl(291, 44%, 60%)",
    
                "line-width": ["interpolate", ["linear"], ["get", "ELEV_GAIN"], 0, 3, 2300, 7],
    
                "line-opacity": 0.75
              }
            });
    
          }
    
          function showBikeTrails() {
    
            map.addLayer({
              id: "biketrails-line",
              type: "line",
              source: "trails",
              filter: ["==", ["get", "USE_BIKE"], "Yes"],
              paint: {
                "line-dasharray": [1, 2],
                "line-width": 2,
                "line-color": "hsl(300, 100%, 78.4%)"
              }
            });
    
          }
    
          function showParks() {
    
            const parksLayerName = "Parks_and_Open_Space";
            const parksLayerURL =
              "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/" +
              parksLayerName +
              "/FeatureServer/0/query?where=1%3D1&outFields=*&returnGeometry=true&f=pgeojson";
            map.addSource("parks", {
              type: "geojson",
              data: parksLayerURL
            });
    
            map.addLayer({
              id: "parks-fill",
              type: "fill",
              source: "parks",
              paint: {
                "fill-color": [
                  "match",
                  ["get", "TYPE"],
                  "Natural Areas",
                  "#9E559C",
                  "Regional Open Space",
                  "#A7C636",
                  "Local Park",
                  "#149ECE",
                  "Regional Recreation Park",
                  "#ED5151",
                  "black"
                ],
                "fill-opacity": 0.2
              }
            });
    
          }
    
          map.on("load", () => {
    
            showParks();
    
            showTrails();
            showBikeTrails();
    
            showTrailheads();
    
          });
    
        </script>
    
      </body>
    </html>

Style and display trailheads with a hiker icon and labels

To display an icon of a hiker for each trailhead, along with a label, you can use a single symbol layer. Properties for the label start with text- and properties for the icon start with icon-.

  1. Create a function called showTrailheads. Inside, add a geojson source.

    Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
                                                                                                                                                                                        
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
        <title>Mapbox GL JS Tutorials: Display a map</title>
        <style>
          html,
          body,
          #map {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 14px;
            color: #323232;
          }
        </style>
    
        <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
        <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />
    
      </head>
      <body>
        <div id="map"></div>
    
        <script>
    
          const apiKey = "YOUR-API-KEY";
          const basemapEnum = "ArcGIS:Streets";
    
          const map = new mapboxgl.Map({
            container: "map", // the id of the div element
            style: `https://basemaps-api.arcgis.com/arcgis/rest/services/styles/${basemapEnum}?type=style&apiKey=${apiKey}`,
            zoom: 12, // starting zoom
            center: [-118.805, 34.027] // starting location [longitude, latitude]
          });
    
          map.loadImage("https://static.arcgis.com/images/Symbols/NPS/npsPictograph_0231b.png", (error, image) => {
    
            if (error) {
              throw error;
            }
            map.addImage("hiker-icon", image);
    
          });
    
          function showTrailheads() {
    
            const trailheadsLayerName = "Trailheads";
            const trailheadsLayerURL =
              "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/" +
              trailheadsLayerName +
              "/FeatureServer/0/query?where=1%3D1&outFields=*&returnGeometry=true&f=pgeojson";
            map.addSource("trailheads", {
              type: "geojson",
              data: trailheadsLayerURL
            });
    
            map.addLayer({
              id: "trailheads-symbol",
              type: "symbol",
              source: "trailheads",
              layout: {
                "icon-image": "hiker-icon",
                "icon-size": 0.3,
                "icon-allow-overlap": true,
    
                "text-font": ["Arial Italic"],
                "text-field": ["get", "TRL_NAME"],
                "text-size": 12,
                "text-anchor": "bottom",
                "text-offset": [0, -2]
    
              },
              paint: {
                "text-color": "white",
                "text-halo-color": "seagreen",
                "text-halo-width": 2
    
              }
            });
    
          }
    
          function showTrails() {
    
            const trailsLayerName = "Trails";
            const trailsLayerURL =
              "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/" +
              trailsLayerName +
              "/FeatureServer/0/query?where=1%3D1&outFields=*&returnGeometry=true&f=pgeojson";
            map.addSource("trails", {
              type: "geojson",
              data: trailsLayerURL
            });
    
            map.addLayer({
              id: "trails-line",
              type: "line",
              source: "trails",
              paint: {
                "line-color": "hsl(291, 44%, 60%)",
    
                "line-width": ["interpolate", ["linear"], ["get", "ELEV_GAIN"], 0, 3, 2300, 7],
    
                "line-opacity": 0.75
              }
            });
    
          }
    
          function showBikeTrails() {
    
            map.addLayer({
              id: "biketrails-line",
              type: "line",
              source: "trails",
              filter: ["==", ["get", "USE_BIKE"], "Yes"],
              paint: {
                "line-dasharray": [1, 2],
                "line-width": 2,
                "line-color": "hsl(300, 100%, 78.4%)"
              }
            });
    
          }
    
          function showParks() {
    
            const parksLayerName = "Parks_and_Open_Space";
            const parksLayerURL =
              "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/" +
              parksLayerName +
              "/FeatureServer/0/query?where=1%3D1&outFields=*&returnGeometry=true&f=pgeojson";
            map.addSource("parks", {
              type: "geojson",
              data: parksLayerURL
            });
    
            map.addLayer({
              id: "parks-fill",
              type: "fill",
              source: "parks",
              paint: {
                "fill-color": [
                  "match",
                  ["get", "TYPE"],
                  "Natural Areas",
                  "#9E559C",
                  "Regional Open Space",
                  "#A7C636",
                  "Local Park",
                  "#149ECE",
                  "Regional Recreation Park",
                  "#ED5151",
                  "black"
                ],
                "fill-opacity": 0.2
              }
            });
    
          }
    
          map.on("load", () => {
    
            showParks();
    
            showTrails();
            showBikeTrails();
    
            showTrailheads();
    
          });
    
        </script>
    
      </body>
    </html>
  2. Add a symbol layer for the hiker icons. Use icon-image to reference the icon you loaded.

    Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
                                                                                                                                                                                        
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
        <title>Mapbox GL JS Tutorials: Display a map</title>
        <style>
          html,
          body,
          #map {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 14px;
            color: #323232;
          }
        </style>
    
        <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
        <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />
    
      </head>
      <body>
        <div id="map"></div>
    
        <script>
    
          const apiKey = "YOUR-API-KEY";
          const basemapEnum = "ArcGIS:Streets";
    
          const map = new mapboxgl.Map({
            container: "map", // the id of the div element
            style: `https://basemaps-api.arcgis.com/arcgis/rest/services/styles/${basemapEnum}?type=style&apiKey=${apiKey}`,
            zoom: 12, // starting zoom
            center: [-118.805, 34.027] // starting location [longitude, latitude]
          });
    
          map.loadImage("https://static.arcgis.com/images/Symbols/NPS/npsPictograph_0231b.png", (error, image) => {
    
            if (error) {
              throw error;
            }
            map.addImage("hiker-icon", image);
    
          });
    
          function showTrailheads() {
    
            const trailheadsLayerName = "Trailheads";
            const trailheadsLayerURL =
              "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/" +
              trailheadsLayerName +
              "/FeatureServer/0/query?where=1%3D1&outFields=*&returnGeometry=true&f=pgeojson";
            map.addSource("trailheads", {
              type: "geojson",
              data: trailheadsLayerURL
            });
    
            map.addLayer({
              id: "trailheads-symbol",
              type: "symbol",
              source: "trailheads",
              layout: {
                "icon-image": "hiker-icon",
                "icon-size": 0.3,
                "icon-allow-overlap": true,
    
                "text-font": ["Arial Italic"],
                "text-field": ["get", "TRL_NAME"],
                "text-size": 12,
                "text-anchor": "bottom",
                "text-offset": [0, -2]
    
              },
              paint: {
                "text-color": "white",
                "text-halo-color": "seagreen",
                "text-halo-width": 2
    
              }
            });
    
          }
    
          function showTrails() {
    
            const trailsLayerName = "Trails";
            const trailsLayerURL =
              "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/" +
              trailsLayerName +
              "/FeatureServer/0/query?where=1%3D1&outFields=*&returnGeometry=true&f=pgeojson";
            map.addSource("trails", {
              type: "geojson",
              data: trailsLayerURL
            });
    
            map.addLayer({
              id: "trails-line",
              type: "line",
              source: "trails",
              paint: {
                "line-color": "hsl(291, 44%, 60%)",
    
                "line-width": ["interpolate", ["linear"], ["get", "ELEV_GAIN"], 0, 3, 2300, 7],
    
                "line-opacity": 0.75
              }
            });
    
          }
    
          function showBikeTrails() {
    
            map.addLayer({
              id: "biketrails-line",
              type: "line",
              source: "trails",
              filter: ["==", ["get", "USE_BIKE"], "Yes"],
              paint: {
                "line-dasharray": [1, 2],
                "line-width": 2,
                "line-color": "hsl(300, 100%, 78.4%)"
              }
            });
    
          }
    
          function showParks() {
    
            const parksLayerName = "Parks_and_Open_Space";
            const parksLayerURL =
              "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/" +
              parksLayerName +
              "/FeatureServer/0/query?where=1%3D1&outFields=*&returnGeometry=true&f=pgeojson";
            map.addSource("parks", {
              type: "geojson",
              data: parksLayerURL
            });
    
            map.addLayer({
              id: "parks-fill",
              type: "fill",
              source: "parks",
              paint: {
                "fill-color": [
                  "match",
                  ["get", "TYPE"],
                  "Natural Areas",
                  "#9E559C",
                  "Regional Open Space",
                  "#A7C636",
                  "Local Park",
                  "#149ECE",
                  "Regional Recreation Park",
                  "#ED5151",
                  "black"
                ],
                "fill-opacity": 0.2
              }
            });
    
          }
    
          map.on("load", () => {
    
            showParks();
    
            showTrails();
            showBikeTrails();
    
            showTrailheads();
    
          });
    
        </script>
    
      </body>
    </html>
  3. Add additional label properties. Set a text-anchor of bottom, with a text-offset of [0, -2] to position the label above the icon. Use the TRL_NAME attribute as the text field.

    For more information see the Mapbox GL JS documentation.

    Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
                                                                                                                                                                                        
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
        <title>Mapbox GL JS Tutorials: Display a map</title>
        <style>
          html,
          body,
          #map {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 14px;
            color: #323232;
          }
        </style>
    
        <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
        <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />
    
      </head>
      <body>
        <div id="map"></div>
    
        <script>
    
          const apiKey = "YOUR-API-KEY";
          const basemapEnum = "ArcGIS:Streets";
    
          const map = new mapboxgl.Map({
            container: "map", // the id of the div element
            style: `https://basemaps-api.arcgis.com/arcgis/rest/services/styles/${basemapEnum}?type=style&apiKey=${apiKey}`,
            zoom: 12, // starting zoom
            center: [-118.805, 34.027] // starting location [longitude, latitude]
          });
    
          map.loadImage("https://static.arcgis.com/images/Symbols/NPS/npsPictograph_0231b.png", (error, image) => {
    
            if (error) {
              throw error;
            }
            map.addImage("hiker-icon", image);
    
          });
    
          function showTrailheads() {
    
            const trailheadsLayerName = "Trailheads";
            const trailheadsLayerURL =
              "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/" +
              trailheadsLayerName +
              "/FeatureServer/0/query?where=1%3D1&outFields=*&returnGeometry=true&f=pgeojson";
            map.addSource("trailheads", {
              type: "geojson",
              data: trailheadsLayerURL
            });
    
            map.addLayer({
              id: "trailheads-symbol",
              type: "symbol",
              source: "trailheads",
              layout: {
                "icon-image": "hiker-icon",
                "icon-size": 0.3,
                "icon-allow-overlap": true,
    
                "text-font": ["Arial Italic"],
                "text-field": ["get", "TRL_NAME"],
                "text-size": 12,
                "text-anchor": "bottom",
                "text-offset": [0, -2]
    
              },
              paint: {
                "text-color": "white",
                "text-halo-color": "seagreen",
                "text-halo-width": 2
    
              }
            });
    
          }
    
          function showTrails() {
    
            const trailsLayerName = "Trails";
            const trailsLayerURL =
              "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/" +
              trailsLayerName +
              "/FeatureServer/0/query?where=1%3D1&outFields=*&returnGeometry=true&f=pgeojson";
            map.addSource("trails", {
              type: "geojson",
              data: trailsLayerURL
            });
    
            map.addLayer({
              id: "trails-line",
              type: "line",
              source: "trails",
              paint: {
                "line-color": "hsl(291, 44%, 60%)",
    
                "line-width": ["interpolate", ["linear"], ["get", "ELEV_GAIN"], 0, 3, 2300, 7],
    
                "line-opacity": 0.75
              }
            });
    
          }
    
          function showBikeTrails() {
    
            map.addLayer({
              id: "biketrails-line",
              type: "line",
              source: "trails",
              filter: ["==", ["get", "USE_BIKE"], "Yes"],
              paint: {
                "line-dasharray": [1, 2],
                "line-width": 2,
                "line-color": "hsl(300, 100%, 78.4%)"
              }
            });
    
          }
    
          function showParks() {
    
            const parksLayerName = "Parks_and_Open_Space";
            const parksLayerURL =
              "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/" +
              parksLayerName +
              "/FeatureServer/0/query?where=1%3D1&outFields=*&returnGeometry=true&f=pgeojson";
            map.addSource("parks", {
              type: "geojson",
              data: parksLayerURL
            });
    
            map.addLayer({
              id: "parks-fill",
              type: "fill",
              source: "parks",
              paint: {
                "fill-color": [
                  "match",
                  ["get", "TYPE"],
                  "Natural Areas",
                  "#9E559C",
                  "Regional Open Space",
                  "#A7C636",
                  "Local Park",
                  "#149ECE",
                  "Regional Recreation Park",
                  "#ED5151",
                  "black"
                ],
                "fill-opacity": 0.2
              }
            });
    
          }
    
          map.on("load", () => {
    
            showParks();
    
            showTrails();
            showBikeTrails();
    
            showTrailheads();
    
          });
    
        </script>
    
      </body>
    </html>

Add a load event handler

It is important to wait for the Mapbox GL JS map to finish loading before adding any layers.

  1. Add an event handler to the map load event. Inside, call the showTrailheads function.

    Add line.Add line.Add line.Add line.Add line.
                                                                                                                                                                                        
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
        <title>Mapbox GL JS Tutorials: Display a map</title>
        <style>
          html,
          body,
          #map {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 14px;
            color: #323232;
          }
        </style>
    
        <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
        <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />
    
      </head>
      <body>
        <div id="map"></div>
    
        <script>
    
          const apiKey = "YOUR-API-KEY";
          const basemapEnum = "ArcGIS:Streets";
    
          const map = new mapboxgl.Map({
            container: "map", // the id of the div element
            style: `https://basemaps-api.arcgis.com/arcgis/rest/services/styles/${basemapEnum}?type=style&apiKey=${apiKey}`,
            zoom: 12, // starting zoom
            center: [-118.805, 34.027] // starting location [longitude, latitude]
          });
    
          map.loadImage("https://static.arcgis.com/images/Symbols/NPS/npsPictograph_0231b.png", (error, image) => {
    
            if (error) {
              throw error;
            }
            map.addImage("hiker-icon", image);
    
          });
    
          function showTrailheads() {
    
            const trailheadsLayerName = "Trailheads";
            const trailheadsLayerURL =
              "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/" +
              trailheadsLayerName +
              "/FeatureServer/0/query?where=1%3D1&outFields=*&returnGeometry=true&f=pgeojson";
            map.addSource("trailheads", {
              type: "geojson",
              data: trailheadsLayerURL
            });
    
            map.addLayer({
              id: "trailheads-symbol",
              type: "symbol",
              source: "trailheads",
              layout: {
                "icon-image": "hiker-icon",
                "icon-size": 0.3,
                "icon-allow-overlap": true,
    
                "text-font": ["Arial Italic"],
                "text-field": ["get", "TRL_NAME"],
                "text-size": 12,
                "text-anchor": "bottom",
                "text-offset": [0, -2]
    
              },
              paint: {
                "text-color": "white",
                "text-halo-color": "seagreen",
                "text-halo-width": 2
    
              }
            });
    
          }
    
          function showTrails() {
    
            const trailsLayerName = "Trails";
            const trailsLayerURL =
              "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/" +
              trailsLayerName +
              "/FeatureServer/0/query?where=1%3D1&outFields=*&returnGeometry=true&f=pgeojson";
            map.addSource("trails", {
              type: "geojson",
              data: trailsLayerURL
            });
    
            map.addLayer({
              id: "trails-line",
              type: "line",
              source: "trails",
              paint: {
                "line-color": "hsl(291, 44%, 60%)",
    
                "line-width": ["interpolate", ["linear"], ["get", "ELEV_GAIN"], 0, 3, 2300, 7],
    
                "line-opacity": 0.75
              }
            });
    
          }
    
          function showBikeTrails() {
    
            map.addLayer({
              id: "biketrails-line",
              type: "line",
              source: "trails",
              filter: ["==", ["get", "USE_BIKE"], "Yes"],
              paint: {
                "line-dasharray": [1, 2],
                "line-width": 2,
                "line-color": "hsl(300, 100%, 78.4%)"
              }
            });
    
          }
    
          function showParks() {
    
            const parksLayerName = "Parks_and_Open_Space";
            const parksLayerURL =
              "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/" +
              parksLayerName +
              "/FeatureServer/0/query?where=1%3D1&outFields=*&returnGeometry=true&f=pgeojson";
            map.addSource("parks", {
              type: "geojson",
              data: parksLayerURL
            });
    
            map.addLayer({
              id: "parks-fill",
              type: "fill",
              source: "parks",
              paint: {
                "fill-color": [
                  "match",
                  ["get", "TYPE"],
                  "Natural Areas",
                  "#9E559C",
                  "Regional Open Space",
                  "#A7C636",
                  "Local Park",
                  "#149ECE",
                  "Regional Recreation Park",
                  "#ED5151",
                  "black"
                ],
                "fill-opacity": 0.2
              }
            });
    
          }
    
          map.on("load", () => {
    
            showParks();
    
            showTrails();
            showBikeTrails();
    
            showTrailheads();
    
          });
    
        </script>
    
      </body>
    </html>
  2. At the top right, click Run to test your map. You should see icons and labels at each of the trailheads.

Style and display all trails

  1. Create a showTrails function. Inside, add a geojson source with id trails.

    Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
                                                                                                                                                                                        
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
        <title>Mapbox GL JS Tutorials: Display a map</title>
        <style>
          html,
          body,
          #map {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 14px;
            color: #323232;
          }
        </style>
    
        <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
        <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />
    
      </head>
      <body>
        <div id="map"></div>
    
        <script>
    
          const apiKey = "YOUR-API-KEY";
          const basemapEnum = "ArcGIS:Streets";
    
          const map = new mapboxgl.Map({
            container: "map", // the id of the div element
            style: `https://basemaps-api.arcgis.com/arcgis/rest/services/styles/${basemapEnum}?type=style&apiKey=${apiKey}`,
            zoom: 12, // starting zoom
            center: [-118.805, 34.027] // starting location [longitude, latitude]
          });
    
          map.loadImage("https://static.arcgis.com/images/Symbols/NPS/npsPictograph_0231b.png", (error, image) => {
    
            if (error) {
              throw error;
            }
            map.addImage("hiker-icon", image);
    
          });
    
          function showTrailheads() {
    
            const trailheadsLayerName = "Trailheads";
            const trailheadsLayerURL =
              "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/" +
              trailheadsLayerName +
              "/FeatureServer/0/query?where=1%3D1&outFields=*&returnGeometry=true&f=pgeojson";
            map.addSource("trailheads", {
              type: "geojson",
              data: trailheadsLayerURL
            });
    
            map.addLayer({
              id: "trailheads-symbol",
              type: "symbol",
              source: "trailheads",
              layout: {
                "icon-image": "hiker-icon",
                "icon-size": 0.3,
                "icon-allow-overlap": true,
    
                "text-font": ["Arial Italic"],
                "text-field": ["get", "TRL_NAME"],
                "text-size": 12,
                "text-anchor": "bottom",
                "text-offset": [0, -2]
    
              },
              paint: {
                "text-color": "white",
                "text-halo-color": "seagreen",
                "text-halo-width": 2
    
              }
            });
    
          }
    
          function showTrails() {
    
            const trailsLayerName = "Trails";
            const trailsLayerURL =
              "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/" +
              trailsLayerName +
              "/FeatureServer/0/query?where=1%3D1&outFields=*&returnGeometry=true&f=pgeojson";
            map.addSource("trails", {
              type: "geojson",
              data: trailsLayerURL
            });
    
            map.addLayer({
              id: "trails-line",
              type: "line",
              source: "trails",
              paint: {
                "line-color": "hsl(291, 44%, 60%)",
    
                "line-width": ["interpolate", ["linear"], ["get", "ELEV_GAIN"], 0, 3, 2300, 7],
    
                "line-opacity": 0.75
              }
            });
    
          }
    
          function showBikeTrails() {
    
            map.addLayer({
              id: "biketrails-line",
              type: "line",
              source: "trails",
              filter: ["==", ["get", "USE_BIKE"], "Yes"],
              paint: {
                "line-dasharray": [1, 2],
                "line-width": 2,
                "line-color": "hsl(300, 100%, 78.4%)"
              }
            });
    
          }
    
          function showParks() {
    
            const parksLayerName = "Parks_and_Open_Space";
            const parksLayerURL =
              "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/" +
              parksLayerName +
              "/FeatureServer/0/query?where=1%3D1&outFields=*&returnGeometry=true&f=pgeojson";
            map.addSource("parks", {
              type: "geojson",
              data: parksLayerURL
            });
    
            map.addLayer({
              id: "parks-fill",
              type: "fill",
              source: "parks",
              paint: {
                "fill-color": [
                  "match",
                  ["get", "TYPE"],
                  "Natural Areas",
                  "#9E559C",
                  "Regional Open Space",
                  "#A7C636",
                  "Local Park",
                  "#149ECE",
                  "Regional Recreation Park",
                  "#ED5151",
                  "black"
                ],
                "fill-opacity": 0.2
              }
            });
    
          }
    
          map.on("load", () => {
    
            showParks();
    
            showTrails();
            showBikeTrails();
    
            showTrailheads();
    
          });
    
        </script>
    
      </body>
    </html>
  2. Add a line layer with id trails-line to display the trails source.

    Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
                                                                                                                                                                                        
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
        <title>Mapbox GL JS Tutorials: Display a map</title>
        <style>
          html,
          body,
          #map {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 14px;
            color: #323232;
          }
        </style>
    
        <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
        <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />
    
      </head>
      <body>
        <div id="map"></div>
    
        <script>
    
          const apiKey = "YOUR-API-KEY";
          const basemapEnum = "ArcGIS:Streets";
    
          const map = new mapboxgl.Map({
            container: "map", // the id of the div element
            style: `https://basemaps-api.arcgis.com/arcgis/rest/services/styles/${basemapEnum}?type=style&apiKey=${apiKey}`,
            zoom: 12, // starting zoom
            center: [-118.805, 34.027] // starting location [longitude, latitude]
          });
    
          map.loadImage("https://static.arcgis.com/images/Symbols/NPS/npsPictograph_0231b.png", (error, image) => {
    
            if (error) {
              throw error;
            }
            map.addImage("hiker-icon", image);
    
          });
    
          function showTrailheads() {
    
            const trailheadsLayerName = "Trailheads";
            const trailheadsLayerURL =
              "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/" +
              trailheadsLayerName +
              "/FeatureServer/0/query?where=1%3D1&outFields=*&returnGeometry=true&f=pgeojson";
            map.addSource("trailheads", {
              type: "geojson",
              data: trailheadsLayerURL
            });
    
            map.addLayer({
              id: "trailheads-symbol",
              type: "symbol",
              source: "trailheads",
              layout: {
                "icon-image": "hiker-icon",
                "icon-size": 0.3,
                "icon-allow-overlap": true,
    
                "text-font": ["Arial Italic"],
                "text-field": ["get", "TRL_NAME"],
                "text-size": 12,
                "text-anchor": "bottom",
                "text-offset": [0, -2]
    
              },
              paint: {
                "text-color": "white",
                "text-halo-color": "seagreen",
                "text-halo-width": 2
    
              }
            });
    
          }
    
          function showTrails() {
    
            const trailsLayerName = "Trails";
            const trailsLayerURL =
              "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/" +
              trailsLayerName +
              "/FeatureServer/0/query?where=1%3D1&outFields=*&returnGeometry=true&f=pgeojson";
            map.addSource("trails", {
              type: "geojson",
              data: trailsLayerURL
            });
    
            map.addLayer({
              id: "trails-line",
              type: "line",
              source: "trails",
              paint: {
                "line-color": "hsl(291, 44%, 60%)",
    
                "line-width": ["interpolate", ["linear"], ["get", "ELEV_GAIN"], 0, 3, 2300, 7],
    
                "line-opacity": 0.75
              }
            });
    
          }
    
          function showBikeTrails() {
    
            map.addLayer({
              id: "biketrails-line",
              type: "line",
              source: "trails",
              filter: ["==", ["get", "USE_BIKE"], "Yes"],
              paint: {
                "line-dasharray": [1, 2],
                "line-width": 2,
                "line-color": "hsl(300, 100%, 78.4%)"
              }
            });
    
          }
    
          function showParks() {
    
            const parksLayerName = "Parks_and_Open_Space";
            const parksLayerURL =
              "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/" +
              parksLayerName +
              "/FeatureServer/0/query?where=1%3D1&outFields=*&returnGeometry=true&f=pgeojson";
            map.addSource("parks", {
              type: "geojson",
              data: parksLayerURL
            });
    
            map.addLayer({
              id: "parks-fill",
              type: "fill",
              source: "parks",
              paint: {
                "fill-color": [
                  "match",
                  ["get", "TYPE"],
                  "Natural Areas",
                  "#9E559C",
                  "Regional Open Space",
                  "#A7C636",
                  "Local Park",
                  "#149ECE",
                  "Regional Recreation Park",
                  "#ED5151",
                  "black"
                ],
                "fill-opacity": 0.2
              }
            });
    
          }
    
          map.on("load", () => {
    
            showParks();
    
            showTrails();
            showBikeTrails();
    
            showTrailheads();
    
          });
    
        </script>
    
      </body>
    </html>
  3. At the top right, click Run to test your map. The trails should display as purple lines.

Style trail width by elevation gain

To make the width of the trail line reflect the elevation gain, you can use a Mapbox GL expression as the value of the line-width. You use the ['interpolate'] and ['get'] expressions to achieve this.

['interpolate', ['linear'], ... creates a linear mapping from one range of input values (the number of feet of elevation gain) to a range of output values (the number of pixels of line width). You provide "stops", such as mapping 2,300 feet to 7 pixels. See the Mapbox GL Style Specification for details.

['get', 'ELEV_GAIN'] accesses the ELEV_GAIN property. See the Mapbox GL Style Specification for details.

  1. Update the trails-line layer definition that calculates line-width from the ELEV_GAIN attribute.

    Add line.
                                                                                                                                                                                        
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
        <title>Mapbox GL JS Tutorials: Display a map</title>
        <style>
          html,
          body,
          #map {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 14px;
            color: #323232;
          }
        </style>
    
        <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
        <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />
    
      </head>
      <body>
        <div id="map"></div>
    
        <script>
    
          const apiKey = "YOUR-API-KEY";
          const basemapEnum = "ArcGIS:Streets";
    
          const map = new mapboxgl.Map({
            container: "map", // the id of the div element
            style: `https://basemaps-api.arcgis.com/arcgis/rest/services/styles/${basemapEnum}?type=style&apiKey=${apiKey}`,
            zoom: 12, // starting zoom
            center: [-118.805, 34.027] // starting location [longitude, latitude]
          });
    
          map.loadImage("https://static.arcgis.com/images/Symbols/NPS/npsPictograph_0231b.png", (error, image) => {
    
            if (error) {
              throw error;
            }
            map.addImage("hiker-icon", image);
    
          });
    
          function showTrailheads() {
    
            const trailheadsLayerName = "Trailheads";
            const trailheadsLayerURL =
              "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/" +
              trailheadsLayerName +
              "/FeatureServer/0/query?where=1%3D1&outFields=*&returnGeometry=true&f=pgeojson";
            map.addSource("trailheads", {
              type: "geojson",
              data: trailheadsLayerURL
            });
    
            map.addLayer({
              id: "trailheads-symbol",
              type: "symbol",
              source: "trailheads",
              layout: {
                "icon-image": "hiker-icon",
                "icon-size": 0.3,
                "icon-allow-overlap": true,
    
                "text-font": ["Arial Italic"],
                "text-field": ["get", "TRL_NAME"],
                "text-size": 12,
                "text-anchor": "bottom",
                "text-offset": [0, -2]
    
              },
              paint: {
                "text-color": "white",
                "text-halo-color": "seagreen",
                "text-halo-width": 2
    
              }
            });
    
          }
    
          function showTrails() {
    
            const trailsLayerName = "Trails";
            const trailsLayerURL =
              "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/" +
              trailsLayerName +
              "/FeatureServer/0/query?where=1%3D1&outFields=*&returnGeometry=true&f=pgeojson";
            map.addSource("trails", {
              type: "geojson",
              data: trailsLayerURL
            });
    
            map.addLayer({
              id: "trails-line",
              type: "line",
              source: "trails",
              paint: {
                "line-color": "hsl(291, 44%, 60%)",
    
                "line-width": ["interpolate", ["linear"], ["get", "ELEV_GAIN"], 0, 3, 2300, 7],
    
                "line-opacity": 0.75
              }
            });
    
          }
    
          function showBikeTrails() {
    
            map.addLayer({
              id: "biketrails-line",
              type: "line",
              source: "trails",
              filter: ["==", ["get", "USE_BIKE"], "Yes"],
              paint: {
                "line-dasharray": [1, 2],
                "line-width": 2,
                "line-color": "hsl(300, 100%, 78.4%)"
              }
            });
    
          }
    
          function showParks() {
    
            const parksLayerName = "Parks_and_Open_Space";
            const parksLayerURL =
              "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/" +
              parksLayerName +
              "/FeatureServer/0/query?where=1%3D1&outFields=*&returnGeometry=true&f=pgeojson";
            map.addSource("parks", {
              type: "geojson",
              data: parksLayerURL
            });
    
            map.addLayer({
              id: "parks-fill",
              type: "fill",
              source: "parks",
              paint: {
                "fill-color": [
                  "match",
                  ["get", "TYPE"],
                  "Natural Areas",
                  "#9E559C",
                  "Regional Open Space",
                  "#A7C636",
                  "Local Park",
                  "#149ECE",
                  "Regional Recreation Park",
                  "#ED5151",
                  "black"
                ],
                "fill-opacity": 0.2
              }
            });
    
          }
    
          map.on("load", () => {
    
            showParks();
    
            showTrails();
            showBikeTrails();
    
            showTrailheads();
    
          });
    
        </script>
    
      </body>
    </html>
  2. At the top right, click Run to test your map. The trails should display as purple lines with varying thickness based on elevation gain.

Display bike-only trails

You can limit a layer to display only certain features by setting a filter. A filter is defined by an expression that should evaluate to true for the features you want included.

To show trails that allow bikes with a dashed line, you can create a new layer that sits above the other trails layer. You can reuse the existing source.

  1. Create a function called showBikeTrails. Inside, add a layer with id biketrails-line. Use a filter to only show trails where USE_BIKE has a value of YES. Set line-dasharray to [1, 2] to create short dashes.

    Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
                                                                                                                                                                                        
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
        <title>Mapbox GL JS Tutorials: Display a map</title>
        <style>
          html,
          body,
          #map {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 14px;
            color: #323232;
          }
        </style>
    
        <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
        <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />
    
      </head>
      <body>
        <div id="map"></div>
    
        <script>
    
          const apiKey = "YOUR-API-KEY";
          const basemapEnum = "ArcGIS:Streets";
    
          const map = new mapboxgl.Map({
            container: "map", // the id of the div element
            style: `https://basemaps-api.arcgis.com/arcgis/rest/services/styles/${basemapEnum}?type=style&apiKey=${apiKey}`,
            zoom: 12, // starting zoom
            center: [-118.805, 34.027] // starting location [longitude, latitude]
          });
    
          map.loadImage("https://static.arcgis.com/images/Symbols/NPS/npsPictograph_0231b.png", (error, image) => {
    
            if (error) {
              throw error;
            }
            map.addImage("hiker-icon", image);
    
          });
    
          function showTrailheads() {
    
            const trailheadsLayerName = "Trailheads";
            const trailheadsLayerURL =
              "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/" +
              trailheadsLayerName +
              "/FeatureServer/0/query?where=1%3D1&outFields=*&returnGeometry=true&f=pgeojson";
            map.addSource("trailheads", {
              type: "geojson",
              data: trailheadsLayerURL
            });
    
            map.addLayer({
              id: "trailheads-symbol",
              type: "symbol",
              source: "trailheads",
              layout: {
                "icon-image": "hiker-icon",
                "icon-size": 0.3,
                "icon-allow-overlap": true,
    
                "text-font": ["Arial Italic"],
                "text-field": ["get", "TRL_NAME"],
                "text-size": 12,
                "text-anchor": "bottom",
                "text-offset": [0, -2]
    
              },
              paint: {
                "text-color": "white",
                "text-halo-color": "seagreen",
                "text-halo-width": 2
    
              }
            });
    
          }
    
          function showTrails() {
    
            const trailsLayerName = "Trails";
            const trailsLayerURL =
              "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/" +
              trailsLayerName +
              "/FeatureServer/0/query?where=1%3D1&outFields=*&returnGeometry=true&f=pgeojson";
            map.addSource("trails", {
              type: "geojson",
              data: trailsLayerURL
            });
    
            map.addLayer({
              id: "trails-line",
              type: "line",
              source: "trails",
              paint: {
                "line-color": "hsl(291, 44%, 60%)",
    
                "line-width": ["interpolate", ["linear"], ["get", "ELEV_GAIN"], 0, 3, 2300, 7],
    
                "line-opacity": 0.75
              }
            });
    
          }
    
          function showBikeTrails() {
    
            map.addLayer({
              id: "biketrails-line",
              type: "line",
              source: "trails",
              filter: ["==", ["get", "USE_BIKE"], "Yes"],
              paint: {
                "line-dasharray": [1, 2],
                "line-width": 2,
                "line-color": "hsl(300, 100%, 78.4%)"
              }
            });
    
          }
    
          function showParks() {
    
            const parksLayerName = "Parks_and_Open_Space";
            const parksLayerURL =
              "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/" +
              parksLayerName +
              "/FeatureServer/0/query?where=1%3D1&outFields=*&returnGeometry=true&f=pgeojson";
            map.addSource("parks", {
              type: "geojson",
              data: parksLayerURL
            });
    
            map.addLayer({
              id: "parks-fill",
              type: "fill",
              source: "parks",
              paint: {
                "fill-color": [
                  "match",
                  ["get", "TYPE"],
                  "Natural Areas",
                  "#9E559C",
                  "Regional Open Space",
                  "#A7C636",
                  "Local Park",
                  "#149ECE",
                  "Regional Recreation Park",
                  "#ED5151",
                  "black"
                ],
                "fill-opacity": 0.2
              }
            });
    
          }
    
          map.on("load", () => {
    
            showParks();
    
            showTrails();
            showBikeTrails();
    
            showTrailheads();
    
          });
    
        </script>
    
      </body>
    </html>
  2. In the load event handler, call the showTrails and showBikeTrails functions. Add the calls before showTrailheads so that the trails layers are placed beneath the trailheads.

    Add line.Add line.
                                                                                                                                                                                        
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
        <title>Mapbox GL JS Tutorials: Display a map</title>
        <style>
          html,
          body,
          #map {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 14px;
            color: #323232;
          }
        </style>
    
        <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
        <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />
    
      </head>
      <body>
        <div id="map"></div>
    
        <script>
    
          const apiKey = "YOUR-API-KEY";
          const basemapEnum = "ArcGIS:Streets";
    
          const map = new mapboxgl.Map({
            container: "map", // the id of the div element
            style: `https://basemaps-api.arcgis.com/arcgis/rest/services/styles/${basemapEnum}?type=style&apiKey=${apiKey}`,
            zoom: 12, // starting zoom
            center: [-118.805, 34.027] // starting location [longitude, latitude]
          });
    
          map.loadImage("https://static.arcgis.com/images/Symbols/NPS/npsPictograph_0231b.png", (error, image) => {
    
            if (error) {
              throw error;
            }
            map.addImage("hiker-icon", image);
    
          });
    
          function showTrailheads() {
    
            const trailheadsLayerName = "Trailheads";
            const trailheadsLayerURL =
              "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/" +
              trailheadsLayerName +
              "/FeatureServer/0/query?where=1%3D1&outFields=*&returnGeometry=true&f=pgeojson";
            map.addSource("trailheads", {
              type: "geojson",
              data: trailheadsLayerURL
            });
    
            map.addLayer({
              id: "trailheads-symbol",
              type: "symbol",
              source: "trailheads",
              layout: {
                "icon-image": "hiker-icon",
                "icon-size": 0.3,
                "icon-allow-overlap": true,
    
                "text-font": ["Arial Italic"],
                "text-field": ["get", "TRL_NAME"],
                "text-size": 12,
                "text-anchor": "bottom",
                "text-offset": [0, -2]
    
              },
              paint: {
                "text-color": "white",
                "text-halo-color": "seagreen",
                "text-halo-width": 2
    
              }
            });
    
          }
    
          function showTrails() {
    
            const trailsLayerName = "Trails";
            const trailsLayerURL =
              "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/" +
              trailsLayerName +
              "/FeatureServer/0/query?where=1%3D1&outFields=*&returnGeometry=true&f=pgeojson";
            map.addSource("trails", {
              type: "geojson",
              data: trailsLayerURL
            });
    
            map.addLayer({
              id: "trails-line",
              type: "line",
              source: "trails",
              paint: {
                "line-color": "hsl(291, 44%, 60%)",
    
                "line-width": ["interpolate", ["linear"], ["get", "ELEV_GAIN"], 0, 3, 2300, 7],
    
                "line-opacity": 0.75
              }
            });
    
          }
    
          function showBikeTrails() {
    
            map.addLayer({
              id: "biketrails-line",
              type: "line",
              source: "trails",
              filter: ["==", ["get", "USE_BIKE"], "Yes"],
              paint: {
                "line-dasharray": [1, 2],
                "line-width": 2,
                "line-color": "hsl(300, 100%, 78.4%)"
              }
            });
    
          }
    
          function showParks() {
    
            const parksLayerName = "Parks_and_Open_Space";
            const parksLayerURL =
              "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/" +
              parksLayerName +
              "/FeatureServer/0/query?where=1%3D1&outFields=*&returnGeometry=true&f=pgeojson";
            map.addSource("parks", {
              type: "geojson",
              data: parksLayerURL
            });
    
            map.addLayer({
              id: "parks-fill",
              type: "fill",
              source: "parks",
              paint: {
                "fill-color": [
                  "match",
                  ["get", "TYPE"],
                  "Natural Areas",
                  "#9E559C",
                  "Regional Open Space",
                  "#A7C636",
                  "Local Park",
                  "#149ECE",
                  "Regional Recreation Park",
                  "#ED5151",
                  "black"
                ],
                "fill-opacity": 0.2
              }
            });
    
          }
    
          map.on("load", () => {
    
            showParks();
    
            showTrails();
            showBikeTrails();
    
            showTrailheads();
    
          });
    
        </script>
    
      </body>
    </html>
  3. At the top right, click Run to test your map. The trails should appear as dashed lines for trails that allow bikes.

Display park areas with different colors

You can use a different style for each unique attribute value in a feature layer. Use a ['match', ...] expression to display park polygons with different colors depending on the TYPE field.

A ['match', ...] expression choose between several different output values depending on the input value. See the Mapbox GL Style Specification for details.

  1. Create a function called showParks. Inside, add a geojson source for the parks. Give it an id of parks.

    Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.