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 an ArcGIS account to access the developer dashboard and create an API key.

Steps

Create a new pen

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

Set the API key

To access location services, you need an API key or OAuth 2.0 access token.

  1. Go to your dashboard to get an API key. The API key must be scoped to access the services used in this tutorial.

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

    Change line
              
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    //
    
    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&token=${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.
                                                                                                                                                                                        
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    <!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&token=${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/" +
              "/FeatureServer/0/query?where=1%3D1&outFields=*&returnGeometry=true&f=pgeojson";
            map.addSource("trailheads", {
              type: "geojson",
              data: trailheadsLayerURL
              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/" +
              "/FeatureServer/0/query?where=1%3D1&outFields=*&returnGeometry=true&f=pgeojson";
            map.addSource("trails", {
              type: "geojson",
              data: trailsLayerURL
              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() {
              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/" +
              "/FeatureServer/0/query?where=1%3D1&outFields=*&returnGeometry=true&f=pgeojson";
            map.addSource("parks", {
              type: "geojson",
              data: parksLayerURL
              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", () => {
        </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.
                                                                                                                                                                                        
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    <!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&token=${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/" +
              "/FeatureServer/0/query?where=1%3D1&outFields=*&returnGeometry=true&f=pgeojson";
            map.addSource("trailheads", {
              type: "geojson",
              data: trailheadsLayerURL
              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/" +
              "/FeatureServer/0/query?where=1%3D1&outFields=*&returnGeometry=true&f=pgeojson";
            map.addSource("trails", {
              type: "geojson",
              data: trailsLayerURL
              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() {
              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/" +
              "/FeatureServer/0/query?where=1%3D1&outFields=*&returnGeometry=true&f=pgeojson";
            map.addSource("parks", {
              type: "geojson",
              data: parksLayerURL
              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", () => {
        </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.
                                                                                                                                                                                        
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    <!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&token=${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
            });
    
              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/" +
              "/FeatureServer/0/query?where=1%3D1&outFields=*&returnGeometry=true&f=pgeojson";
            map.addSource("trails", {
              type: "geojson",
              data: trailsLayerURL
              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() {
              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/" +
              "/FeatureServer/0/query?where=1%3D1&outFields=*&returnGeometry=true&f=pgeojson";
            map.addSource("parks", {
              type: "geojson",
              data: parksLayerURL
              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", () => {
        </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.
                                                                                                                                                                                        
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    <!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&token=${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/" +
              "/FeatureServer/0/query?where=1%3D1&outFields=*&returnGeometry=true&f=pgeojson";
            map.addSource("trails", {
              type: "geojson",
              data: trailsLayerURL
              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() {
              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/" +
              "/FeatureServer/0/query?where=1%3D1&outFields=*&returnGeometry=true&f=pgeojson";
            map.addSource("parks", {
              type: "geojson",
              data: parksLayerURL
              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", () => {
        </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.
                                                                                                                                                                                        
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    <!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&token=${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/" +
              "/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/" +
              "/FeatureServer/0/query?where=1%3D1&outFields=*&returnGeometry=true&f=pgeojson";
            map.addSource("trails", {
              type: "geojson",
              data: trailsLayerURL
              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() {
              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/" +
              "/FeatureServer/0/query?where=1%3D1&outFields=*&returnGeometry=true&f=pgeojson";
            map.addSource("parks", {
              type: "geojson",
              data: parksLayerURL
              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", () => {
        </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.
                                                                                                                                                                                        
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    <!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&token=${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/" +
              "/FeatureServer/0/query?where=1%3D1&outFields=*&returnGeometry=true&f=pgeojson";
            map.addSource("trailheads", {
              type: "geojson",
              data: trailheadsLayerURL
              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/" +
              "/FeatureServer/0/query?where=1%3D1&outFields=*&returnGeometry=true&f=pgeojson";
            map.addSource("trails", {
              type: "geojson",
              data: trailsLayerURL
              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() {
              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/" +
              "/FeatureServer/0/query?where=1%3D1&outFields=*&returnGeometry=true&f=pgeojson";
            map.addSource("parks", {
              type: "geojson",
              data: parksLayerURL
              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", () => {
    
            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.
                                                                                                                                                                                        
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    <!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&token=${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/" +
              "/FeatureServer/0/query?where=1%3D1&outFields=*&returnGeometry=true&f=pgeojson";
            map.addSource("trailheads", {
              type: "geojson",
              data: trailheadsLayerURL
              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
            });
    
              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() {
              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/" +
              "/FeatureServer/0/query?where=1%3D1&outFields=*&returnGeometry=true&f=pgeojson";
            map.addSource("parks", {
              type: "geojson",
              data: parksLayerURL
              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", () => {
        </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.
                                                                                                                                                                                        
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    <!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&token=${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/" +
              "/FeatureServer/0/query?where=1%3D1&outFields=*&returnGeometry=true&f=pgeojson";
            map.addSource("trailheads", {
              type: "geojson",
              data: trailheadsLayerURL
              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() {
              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/" +
              "/FeatureServer/0/query?where=1%3D1&outFields=*&returnGeometry=true&f=pgeojson";
            map.addSource("parks", {
              type: "geojson",
              data: parksLayerURL
              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", () => {
        </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.
                                                                                                                                                                                        
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    <!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&token=${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/" +
              "/FeatureServer/0/query?where=1%3D1&outFields=*&returnGeometry=true&f=pgeojson";
            map.addSource("trailheads", {
              type: "geojson",
              data: trailheadsLayerURL
              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/" +
              "/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() {
              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/" +
              "/FeatureServer/0/query?where=1%3D1&outFields=*&returnGeometry=true&f=pgeojson";
            map.addSource("parks", {
              type: "geojson",
              data: parksLayerURL
              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", () => {
        </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.
                                                                                                                                                                                        
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    <!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&token=${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/" +
              "/FeatureServer/0/query?where=1%3D1&outFields=*&returnGeometry=true&f=pgeojson";
            map.addSource("trailheads", {
              type: "geojson",
              data: trailheadsLayerURL
              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/" +
              "/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/" +
              "/FeatureServer/0/query?where=1%3D1&outFields=*&returnGeometry=true&f=pgeojson";
            map.addSource("parks", {
              type: "geojson",
              data: parksLayerURL
              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", () => {
        </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.
                                                                                                                                                                                        
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    <