Introduction to visualization

You can style basemap layers, which are composed of vector tile data, or feature layers, which are composed of features.

Basemap styles

There are two types of basemap styles:

  • Default styles: Provided by Esri such as ArcGIS:Streets, ArcGIS:Topographic, ArcGIS:Nova.
  • Custom styles: Created using the ArcGIS Vector Tile Style Editor that you reference by its unique item ID.

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

Use dark colors for code blocksCopy
             
1
2
3
4
5
6
7
8
9
10
11
12
13
<link href="https://unpkg.com/maplibre-gl@2.1.9/dist/maplibre-gl.css" rel="stylesheet" />
<script src="https://unpkg.com/maplibre-gl@2.1.9/dist/maplibre-gl.js"></script>
<script>
const apiKey = "YOUR_API_KEY";
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=${apiKey}`,
  zoom: 12,
  center: [-118.805, 34.027]
});
</script>

To learn more, go to the Display a custom vector tile style tutorial.

Feature styles

A feature layer can be styled in MapLibre GL JS with a layer connected to a GeoJSON source. 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

Use dark colors for code blocksCopy
                  
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@2.1.9/dist/maplibre-gl.css" rel="stylesheet" />
<script src="https://unpkg.com/maplibre-gl@2.1.9/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>

To learn more, go to the Style a feature layer tutorial.

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