Esri annonce un nouveau plugin ArcGIS pour MapLibre GL JS

Esri a annoncé la sortie du plugin MapLibre ArcGIS, un nouveau plugin open source destiné aux développeurs web qui souhaitent utiliser MapLibre GL JS avec ArcGIS.

Ce plugin facilite la création d’applications cartographiques interactives en intégrant MapLibre GL JS aux services ArcGIS.
Si vous utilisez ArcGIS Location Platform, il ouvre également de nouvelles possibilités pour la façon dont vos applications consomment les fonds de carte.

Le plugin est vient avec de nombreuses ressources : un guide du développeur, des tutoriels et la documentation de référence API.

Obtenir le plugin

Vous pouvez ajouter le plugin directement à vos projets MapLibre GL JS en installant le package NPM ou en référençant la bibliothèque depuis le CDN.

NPM

npm install @esri/maplibre-arcgis

CDN

<script src="https://unpkg.com/@esri/maplibre-arcgis@1.0.0/dist/umd/maplibre-arcgis.min.js"></script>

Afficher des styles de fonds de carte

Le plugin prend en charge l’utilisation de tokens pour afficher les styles provenant du service ArcGIS Basemap Styles. C’est ce qu’on appelle le modèle d’utilisation “basemap tiles” (tuiles de fonds de carte). Avec ArcGIS Location Platform, la consommation est comptabilisée selon le nombre de tuiles consommées.

Pour afficher un fond de carte avec ce modèle, utilisez la classe BasemapStyle avec un token. Cette classe permet d’accéder à l’ensemble des styles de fond de carte ArcGIS et Open. Vous pouvez aussi changer facilement de style ou mettre à jour ces préférences après le chargement de la carte.

const map = new maplibregl.Map({
  container: "map", // the id of the div element
  center: [-122.402, 37.789], // San Francisco, CA
  zoom: 11, // starting zoom
});

const basemapStyle = maplibreArcGIS.BasemapStyle.applyStyle(map, {
  style: 'arcgis/streets',
  token: accessToken
});

Retrouvez le tutoriel ici.

Gérer les sessions de fonds de carte

Si vous utilisez ArcGIS Location Platform, le plugin prend aussi en charge le modèle d’utilisation “basemap sessions” (sessions de fond de carte).
Ce modèle permet à votre application d’accéder à un nombre illimité de tuiles pendant une session pouvant durer jusqu'à 12 heures, facturée comme une seule utilisation.

Pour créer des applications avec ce modèle, utilisez les classes BasemapSession et BasemapStyle.
Elles facilitent la création et la gestion des sessions, le rafraîchissement automatique du token, et la mise à jour des tuiles selon les besoins.

const map = new maplibregl.Map({
  container: "map",
  zoom: 11,
  center: [-3.189, 55.953] // Edinburgh
});

const basemapSession = await maplibreArcGIS.BasemapSession.start({
  token: accessToken,
  styleFamily: 'arcgis',
  duration: 43200, // 12 hours in seconds
  autoRefresh: false
});

basemapSession.on("BasemapSessionExpired", () => {
  basemapSession.refresh()
});

const basemapStyle = maplibreArcGIS.BasemapStyle.applyStyle(map, {
  style: 'arcgis/community',
  session: basemapSession
});

Retrouvez le tutoriel ici.

Accéder et afficher des couches hébergées

Le plugin permet également d’accéder à des couches hébergées dans votre portail ArcGIS à partir de l'URL du service ou de l'ID de l'item. Une fois les couches ajoutées à votre carte, vous pouvez enrichir votre application avec des interactions comme des fenêtres contextuelles affichant les attributs des entités.

Feature layers

Pour afficher des couches d’entités hébergées, utilisez la classe FeatureLayer. Elle permet d’afficher toutes les entités ou d’en récupérer un sous-ensemble via des requêtes SQL ou spatiales. Elle gère les styles prédéfinis et expose les données en tant que sources GeoJSON. Vous pouvez aussi personnaliser le rendu des entités directement dans votre application.

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
    }
  });

});

Retrouvez le tutoriel ici.

 

Vector tile layers

Pour afficher des couches de tuiles vectorielles hébergées, utilisez la classe VectorTileLayer. Elle charge et applique automatiquement les styles enregistrés avec l’élément.
Vous pouvez styliser vos tuiles vectorielles avec des outils interactifs comme par exemple l'ArcGIS Vector Tile Style Editor, puis les enregistrer dans le portail et les réutiliser dans votre application sans écrire de code côté client.

const basemapStyle = maplibreArcGIS.BasemapStyle.applyStyle(map, {
  style: 'arcgis/light-gray',
  token: accessToken
});

map.on('load', async () => {
  const vectorLayer = await maplibreArcGIS.VectorTileLayer.fromPortalItem(
    '31eb749371c441e0b3ac5db4f60ecba9',
    { token: accessToken }
  );
  vectorLayer.addSourcesAndLayersTo(map);
});

Retrouvez le tutoriel ici.

Pour aller plus loin

Découvrez les différents types d’applications que vous pouvez créer avec le plugin dans les tutoriels et guides pratiques du guide du développeur MapLibre GL JS et ArcGIS.

Si vous avez des questions, souhaitez proposer des améliorations ou contribuer au code, rendez-vous sur le repo GitHub du plugin.

Et pour commencer à créer vos propres applications avec le plugin et ArcGIS Location Services, vous pouvez créer facilement un compte sur ArcGIS Location Platform.