ArcGIS Blog

Developers

ArcGIS Location Platform

New MapLibre GL JS ArcGIS plugin for open source developers

By Allan Laframboise and Sheryl Tania, George Owen and Mark Torrey

We are pleased to announce the MapLibre ArcGIS plugin—a new plugin for open source web developers who want to use MapLibre GL JS with ArcGIS!

The plugin makes it easy to build interactive mapping applications by integrating MapLibre GL JS with ArcGIS services. If you are using ArcGIS Location Platform, it also provides new development options for how your applications consume basemaps.

The plugin is officially supported and is launching with resources including a developer guide, tutorialshow-tos, and an API reference.

Keep reading to learn more about the different types of applications you can build.

Get the plugin

To access the plugin, you can add it directly to your MapLibre GL JS projects by installing the NPM package or referencing the library on the CDN.

NPM

CDN

For additional information on getting started, go to the MapLibre GL JS and ArcGIS developer guide.

Display basemap styles

The plugin supports using access tokens to display styles from the ArcGIS Basemap Styles service. This is known as the basemap tiles usage model. When using ArcGIS Location Platform, basemap usage occurs for the number of tiles consumed.

To use the plugin to display styles with this model, you can use theBasemapStyle class with an access token. It supports accessing all styles in the ArcGIS and Open style families, along with their style preferences such as places, language, and worldview. You can also use the class to easily switch styles or update style preferences after the map is loaded.

In addition, the class automatically updates all Esri and data attributions on the map when styles are loaded.

A map centered on San Francisco that displays place icons as users zoom in.
A screenshot of code to display a map using MapLibre ArcGIS plugin.

Display a basemap style with the plugin. Try the tutorial

Display styles with basemap sessions

If you are using ArcGIS Location Platform, the plugin also supports building applications with the new basemap sessions usage model. With this model, your application can access unlimited basemap tiles through a single basemap session that lasts up to 12 hours, all for a single usage charge.

To build applications with basemap sessions, you use the BasemapSession and BasemapStyle classes in the plugin. These classes make it easy to create and manage sessions, automatically refresh the session token when it expires, and update the basemap tiles as needed.

For more information about the new support for basemap sessions, check out this blog and the Usage models page in the developer guide.

A screenshot of code to display a map with a basemap session using MapLibre ArcGIS plugin.

Display a map with a basemap session using the plugin. Try the tutorial

Access and display hosted data layers

With the plugin, you can access and display hosted data layers from the ArcGIS portal using a service URL or an item ID. Once you add these layers to your map, you can enhance your application with interactivity, such as popups that display feature values and attributes.

Feature layers

To display hosted feature layers, you use the FeatureLayer class. This class allows you to display all features or retrieve a subset using SQL or spatial queries. It supports feature queries and paging, renders features with a predefined layer style, and manages them as GeoJSON data sources. You can also edit and customize feature styles directly in your application.

The example below demonstrates how to display a feature layer and enable user interactions.

Create and style features with the plugin. Try the tutorial

Vector tile layers

To display hosted vector tile layers, you use the VectorTileLayer class. This class automatically loads and applies all predefined styles that you store with the item. You can style vector tiles using interactive tools such as the ArcGIS Vector Tile Style Editor, save the vector tiles in the portal, and then access and display them in your application. This workflow saves time and reduces the need to write client-side styling code.

The example below demonstrates how to display a styled vector tile layer and enable user interactions.

A map with a styled vector tile layer of U.S. states that shows population counts in popups
A screenshot of code to display a map and a styled vector tile layer using MapLibre ArcGIS plugin.

Create and style vector tiles with the plugin. Try the tutorial

Learn more

Explore the different types of applications you can build with the plugin by checking additional tutorials and how-tos in the MapLibre GL JS and ArcGIS developer guide.

If you have plugin questions, want to suggest enhancements, or contribute code, head over to the GitHub repository.

To start building applications with the plugin and ArcGIS Location Services, create an account at ArcGIS Location Platform.

Share this article

Subscribe
Notify of
1 Comment
Oldest
Newest
Inline Feedbacks
View all comments

Related articles