Introduction to visualization

You can style , which are composed of , and , which are composed of , to help visualize the data in your application.

Basemap styles

A basemap style is a set of visual properties such as fill colors, viewing levels, and fonts that define how the visual elements in a vector tile basemap layer are displayed. There are two types of basemap styles: default and custom.

  • Default styles: Styles provided by Esri such as ArcGIS:Streets, ArcGIS:Topographic, and ArcGIS:Nova.
  • Custom styles: Styles you create and save as using the ArcGIS Vector Tile Style Editor.

How to display a custom basemap style

  1. Create a style with the ArcGIS Vector Tile Style Editor.
  2. Go to the new basemap layer's item page and copy its item ID.
  3. Reference the MapLibre JS and CSS libraries.
  4. Set the item ID as the basemap enumeration.
  5. Access the basemap layer.

Example

Display a custom basemap layer

1
2
3
4
5
6
7
8
9
10
11
12
13
<link href="https://unpkg.com/maplibre-gl@5.1.0/dist/maplibre-gl.css" rel="stylesheet" />
<script src="https://unpkg.com/maplibre-gl@5.1.0/dist/maplibre-gl.js"></script>
<script>
const accessToken = "YOUR_ACCESS_TOKEN";
const basemapEnum = "6976148c11bd497d8624206f9ee03e30";  // Item id for custom basemap layer style

const map = new maplibregl.Map({
  container: "map",
  style: `https://basemaps-api.arcgis.com/arcgis/rest/services/styles/${basemapEnum}?type=style&token=${accessToken}`,
  zoom: 12,
  center: [-118.805, 34.027]
});
</script>

Feature styles

A can be styled in MapLibre GL JS with a connected to a GeoJSON . Layers can contain expressions which use attribute values to calculate values.

How to style a feature layer

  1. Define the data type (GeoJSON) and set the feature service URL.
  2. Add the layer to the map and define its id, type, source, and paint stylings.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<link href="https://unpkg.com/maplibre-gl@5.1.0/dist/maplibre-gl.css" rel="stylesheet" />
<script src="https://unpkg.com/maplibre-gl@5.1.0/dist/maplibre-gl.js"></script>
<script>
  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
    }
  });
</script>

Tutorials

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close