Create and style features (3 of 4) | MapLibre GL JS

Use the MapLibre ArcGIS plugin to query and display features (cities) with a population greater than 250,000.

Display a clustered feature layer of U.S. cities on a map.

Prerequisites

You need an ArcGIS Location Platform or ArcGIS Online account.
You need to complete Step 2. Create an API key.

Steps

Get the service URL

To display the feature layer in an app, reference its service URL.

In your portal, go to the item page of your feature service.
Scroll down to the URL section and copy the value. You will need this in a later step. It should look something like this:
https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/USA_Major_Cities/FeatureServer

Create a new app

Create a new CodePen app with a map div that is the full width and height of the browser window.

Go to CodePen and create a new pen for your application.

In CodePen > HTML, add HTML and CSS to create a page with a div element called map.

Use dark colors for code blocks
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>MapLibre ArcGIS</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>

  </head>

  <body>
    <div id="map"></div>

  </body>

</html>

Add script references

Reference the MapLibre GL JS library and the MapLibre ArcGIS plugin.

In the HTML <head>, add the following <link> and <script> references.

Use dark colors for code blocks
    <!-- Load MapLibre GL JS from CDN -->
    <script src="https://unpkg.com/maplibre-gl@5.11.0/dist/maplibre-gl.js"></script>
    <link href="https://unpkg.com/maplibre-gl@5.11.0/dist/maplibre-gl.css" rel="stylesheet">
    <!-- Load MapLibre ArcGIS from CDN -->
    <script src="https://unpkg.com/@esri/maplibre-arcgis@1.0.0/dist/umd/maplibre-arcgis.min.js"></script>

Set the access token

Add a <script> element in the HTML <body> and create an accessToken variable to store the access token. Set YOUR_ACCESS_TOKEN with the access token you previously copied.

Expand
Use dark colors for code blocks
    <script>

    /* Use for API key authentication */
    const accessToken = "YOUR_ACCESS_TOKEN";

    </script>
Expand

Create a map

Create a map to display an ArcGIS basemap style centered on the United States of America. Use the MapLibre ArcGIS plugin to access the basemap style.

Create a Map that centers on the United States of America.

Expand
Use dark colors for code blocks
    const map = new maplibregl.Map({
      container: "map", // the id of the div element
      zoom: 3,
      center: [-100, 40]
    });
Expand

Use the plugin to apply a BasemapStyle that references the arcgis/navigation style.

Expand
Use dark colors for code blocks
    const basemapStyle = maplibreArcGIS.BasemapStyle.applyStyle(map, {
      style: "arcgis/navigation",
      token: accessToken
    });
Expand

Add a feature layer

Use the MapLibre ArcGIS plugin to add a feature layer to the map that displays the GeoJSON features. You can use a query (such as a where clause) to return a set of features, for example only cities with populations greater than 250,000. This helps reduce data transfer and helps your application load faster.

Add a map.on('load', ...) to register an event handler that runs only once when the map has finished loading.

Expand
Use dark colors for code blocks
    map.once("load", async () => {

      map.addSource(featureLayer.sourceId, {
        ...featureLayer.source,
        cluster: true,
        clusterRadius: 20, // cluster two trailheads if less than 20 pixels apart
        clusterMaxZoom: 14 // display all trailheads individually from zoom 14 up
      });

    });
Expand

Inside the load event handler, use the plugin to create a new FeatureLayer object that references the feature service URL you copied earlier. Configure the query so it only returns cities with a population greater than 250,000.

Expand
Use dark colors for code blocks
    map.once("load", async () => {

      // Get GeoJSON features from a feature service where `POPULATION > 250000`
      const featureLayer = await maplibreArcGIS.FeatureLayer.fromUrl(
        "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/USA_Major_Cities/FeatureServer/0",
        {
          query: {
            where: "POPULATION>250000"
          },
          token: accessToken
        });

    });
Expand

Add the feature layer source to the map. Add cluster, clusterRadius and clusterMaxZoom attributes to the definition of the trailheads source to enable feature clustering.

Expand
Use dark colors for code blocks
    map.once("load", async () => {

      // Get GeoJSON features from a feature service where `POPULATION > 250000`
      const featureLayer = await maplibreArcGIS.FeatureLayer.fromUrl(
        "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/USA_Major_Cities/FeatureServer/0",
        {
          query: {
            where: "POPULATION>250000"
          },
          token: accessToken
        });

      map.addSource(featureLayer.sourceId, {
        ...featureLayer.source,
        cluster: true,
        clusterRadius: 20, // cluster two trailheads if less than 20 pixels apart
        clusterMaxZoom: 14 // display all trailheads individually from zoom 14 up
      });

    });
Expand

Add a circle layer

Add a circle layer to visualize clustered features from the GeoJSON source.

Call map.addLayer() to create a layer with type: "circle" that references the usaMajorCities source. Use the paint property to style the layer based on whether a feature is part of a cluster.

Expand
Use dark colors for code blocks
    map.once("load", async () => {

      // Get GeoJSON features from a feature service where `POPULATION > 250000`
      const featureLayer = await maplibreArcGIS.FeatureLayer.fromUrl(
        "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/USA_Major_Cities/FeatureServer/0",
        {
          query: {
            where: "POPULATION>250000"
          },
          token: accessToken
        });

      map.addSource(featureLayer.sourceId, {
        ...featureLayer.source,
        cluster: true,
        clusterRadius: 20, // cluster two trailheads if less than 20 pixels apart
        clusterMaxZoom: 14 // display all trailheads individually from zoom 14 up
      });

      map.addLayer({
        ...featureLayer.layer,
        id: "city-clusters",
        type: "circle",

        paint: {
          "circle-color": "hsla(0,0%,0%,0.75)",
          "circle-stroke-width": 1.5,
          "circle-stroke-color": "white",

          "circle-radius": ["case", ["get", "cluster"], 10, 5] // 10 pixels for clusters, 5 pixels otherwise

        }
      });

    });
Expand

Cluster points

Add a symbol layer to display cluster counts on top of circle clusters.

Create a symbol layer named cities-cluster-count to display the number of features in each cluster. This layer references the usaMajorCities source and uses the point_count property for the label.

Expand
Use dark colors for code blocks
    map.once("load", async () => {

      // Get GeoJSON features from a feature service where `POPULATION > 250000`
      const featureLayer = await maplibreArcGIS.FeatureLayer.fromUrl(
        "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/USA_Major_Cities/FeatureServer/0",
        {
          query: {
            where: "POPULATION>250000"
          },
          token: accessToken
        });

      map.addSource(featureLayer.sourceId, {
        ...featureLayer.source,
        cluster: true,
        clusterRadius: 20, // cluster two trailheads if less than 20 pixels apart
        clusterMaxZoom: 14 // display all trailheads individually from zoom 14 up
      });

      map.addLayer({
        ...featureLayer.layer,
        id: "city-clusters",
        type: "circle",

        paint: {
          "circle-color": "hsla(0,0%,0%,0.75)",
          "circle-stroke-width": 1.5,
          "circle-stroke-color": "white",

          "circle-radius": ["case", ["get", "cluster"], 10, 5] // 10 pixels for clusters, 5 pixels otherwise

        }
      });

      map.addLayer({
        ...featureLayer.layer,
        id: "cities-cluster-count",
        type: "symbol",
        layout: {
          "text-font": ["Arial Bold"],
          "text-field": ["get", "point_count"],
          "text-offset": [0, 0.1] // move the label vertically downwards slightly to improve centering
        },
        paint: {
          "text-color": "white"
        }
      });

    });
Expand

Run the app

Run the app.

The map should display the styled feature layer from the GeoJSON data hosted in your portal.