Rechercher dans le blog

Tuto JS : Comment développer une appli carto Web complète en 15 min maximum ?

Bonjour, aujourd'hui ça fait 1 an que le blog existe ! Je voulais d'abord vous remercier de me suivre et d'être intéressés par les articles que je publie.
Aujourd'hui je veux vous montrer que même si vous n'avez pas de diplôme en informatique ou en développement Web, vous pouvez très facilement créer gratuitement, de superbes applications cartographiques Web grâce à l'ArcGIS API for JavaScript. En quelques lignes de code, je peux créer une carte 2D (ou même 3D), ajouter des contenus dessus, customiser leur apparence et ajouter des widgets sur la carte. Ce n'est pas aussi difficile qu'on ne le pense.

Les ArcGIS Developer Tutorials sont des tutoriels gratuits conçus pour vous apprendre en moins de 15 minutes la création d'une application cartographique Web avec un concept précis. Je vais vous montrer comment utiliser ces tutoriels pour faire une première application en utilisant l'ArcGIS API for JavaScript même si vous débutez en développement Web. Je mets le code à disposition à la fin de cet article.
developer tutorials.png
J'ai basé mon application sur une couche de données open source de l'APUR, répertoriant toutes les stations essence dans la région parisienne. C'est une couche au format GeoJSON, lisible avec notre API comme je l'ai décrit dans cet article. Ensuite, les utilisateurs vont pouvoir rechercher des emplacements et voir les stations essence à proximité.

Etape 1 - Obtenir une API Key

Pour obtenir une API Key, rendez-vous dans votre tableau de bord, accessible depuis votre compte ArcGIS Developers sur le site https://developers.arcgis.com/
Puis ajoutez la classe "esri/config" dans le require
require(["esri/config","esri/Map", "esri/views/MapView"], function (esriConfig,Map, MapView) { esriConfig.apiKey = "YOUR-API-KEY";

Etape 2 - Créer l'application

Ce premier didacticiel m'a fourni un modèle d'application dans Codepen qui contient le code HTML de base, ajoute les références CSS et API et crée une vue de carte 2D simple. J'ai simplement copié-collé le code du didacticiel dans Codepen en y ajoutant les étapes suivantes. Codepen est une application Web où on peut écrire du code et voir directement son rendu. C'est un excellent moyen de commencer son application le plus rapidement possible.


The simple tutorial app

Mais dans mon cas, je veux que l'application se concentre sur la région parisienne. Pas de problème, juste quelques ajustements au code du tutoriel m'ont permis de changer le point «central» de ma carte et d'ajuster le zoom pour que je puisse voir Paris dans ma vue de carte.
//Create the mapview centred on Paris var view = new MapView({ container: "viewDiv", map: map, center: [2.4, 48.85], //define the central point of my map (latitude, longitude) zoom: 11
Voici le résultat :
Il faut également remplacer l'API Key par la votre que vous avez récupéré dans l'étape 1.

Etape 3 : Ajouter une couche à la carte

Maintenant, je dois ajouter ma couche de données provenant de l'APUR à ma carte. J'ai suivi les étapes du didacticiel, sauf qu'au lieu d'utiliser la classe FeatureLayer, j'utilise la classe GeoJSONLayer comme expliqué dans cet article . Puis je modifie le nom de la variable, l'url que je choisis pour la propriété de la classe que j'instancie GeoJSONLayer est donc ma source de données : https://opendata.arcgis.com/datasets/5946f692a55a4c9c88d6ff6d1d194d59_2.geojson

// Create the gaz stations layer var station_essence = new GeoJSONLayer({ url: "https://opendata.arcgis.com/datasets/5946f692a55a4c9c88d6ff6d1d194d59_2.geojson", }); // Add the gaz stations layer map.add(station_essence, 0);

J'ai ainsi toutes les stations essences sur Paris mais je ne peux pas les différencier, en customisant les couleurs pour chaque enseigne, je pourrais alors les voir d'un simple coup d’œil. Customisons maintenant sur la symbologie.

Etape 4 : Ajouter une symbologie par défaut

Je vais ici agrandir les points et les colorer en fonction de l'enseigne pour rendre la carte un peu plus conviviale. Pour ce faire, je devais ajouter du code supplémentaire avant ma variable de couche d'entités. J'ai créé des nouvelles variables pour chacune des différents enseignes, en définissant leur type comme «simple marker» et en définissant leur couleur avec un code hexadécimal pour correspondre à leur marque. J'ai également créé une variable «autre» avec une coloration grise pour englober certaines des enseignes les moins répandues afin que la carte résultante ne soit pas trop surchargée en couleur.
// Symbol for Total var total = { type: "simple-marker", color: "#C63010", }; // ***repeat for other gaz stations***

J'ai ensuite défini une symbologie uniqueValueRenderer, ce qui signifie symbologie selon une valeur unique, basée sur le champ «enseigne_2018» de la couche GeoJSON. En effet dans cette couche, chaque objet correspond à une stations essence qui a des propriétés qu'on appelle champ, comme son nom, son adresse et son enseigne, ici "enseigne_2018" est le nom de la propriété de la couche qui stocke le nom de l'enseigne de la station.
J'ai ensuite défini le defaultSymbol sur la valeur «other», puis j'ai décrit les autres variables des enseignes que j'ai défini précédemment dans uniqueValueInfos.

// Define a unique value renderer for the gaz stations var stationserviceRenderer = { type: "unique-value", field: "enseigne_2018", defaultSymbol: other, uniqueValueInfos: [{ value: "Total", symbol: total }, // ***repeat for other gaz station*** };

Assurez-vous d'ajouter le rendu à votre variable de couche d'entités. J'ai ajouté une opacité de 0,75 pour rendre la couche un peu moins dure pour les yeux et vous permettre de voir certains détails de la carte à travers les points.

var station_essence = new GeoJSONLayer({ url: "https://opendata.arcgis.com/datasets/5946f692a55a4c9c88d6ff6d1d194d59_2.geojson", renderer: stationserviceRenderer, opacity: .75, });

Voici le résultat final de ma symbologie :

Etape 5 : Configurer les Popups

Ensuite, je crée des fenêtres contextuelles pour que les utilisateurs puissent interagir avec la carte et obtenir plus d'informations, telles que l'adresse de la station. J'ai suivi ce tutoriel pour créer la variable de popup, en utilisant les noms des champs appropriés de la couche de l'APUR pour créer le titre et le contenu.

//Create pop-up variable var popup = { "title": "{enseigne_2018}", //enseigne_2018 est une propriété de la couche GeoJSON "content": "{nom_station_zagaz}<br>{adresse}<br>" //nom_station_zagaz et adresse sont des propriétés de la couche GeoJSON };

J'ai ensuite ajouté la configuration de popup à la propriété popupTemplate dans la variable de  la couche GeoJSON :

var station_essence = new GeoJSONLayer({ url: "https://opendata.arcgis.com/datasets/5946f692a55a4c9c88d6ff6d1d194d59_2.geojson", renderer: stationserviceRenderer, opacity: .75, popupTemplate: popup });
Notre application est presque terminée! Pour terminer, je veux que les utilisateurs puissent rechercher une adresse ou un emplacement et voir les stations essence à proximité de l'adresse recherchée.

Etape 6 : Ajouter un widget de Recherche

En suivant le tutoriel exactement ici et cet article que j'ai écrit il y a quelques mois. J'ai alors ajouté le widget "Search" dans l'instruction require au début de mon code.
require([ "esri/Map", "esri/views/MapView", "esri/layers/GeoJSONLayer", "esri/widgets/Search" //loading of Search widget ], function ( Map, MapView, GeoJSONLayer, Search // add Search in the function )

À la fin du code dans la fonction principale, j'ai créé le widget "Search" et l'ai ajouté dans le coin supérieur droit de la vue.

// Search widget var search = new Search({ view: view }); view.ui.add(search, "top-right");

Maintenant, je peux rechercher des emplacements et voir les stations essence à proximité sur ma carte.

Notre application est maintenant terminée et nous aura demandé très peu d'efforts et de temps, à peine 15 minutes! J'espère que cela vous a encouragé à consulter les didacticiels  et à vous essayer vous-même. Voici le projet complet dans codepen et github si vous voulez voir le tout fonctionner ensemble. N'hésitez pas à la modifier. 
Vous pouvez vous abonner à ce blog si vous voulez voir régulièrement des articles didactiques.

Vous voulez vous aussi réaliser des applications Web cartographiques et dynamiques? N'hésitez pas à souscrire à un plan gratuit ArcGIS for Developers pour développer vos propres applications cartographiques 2D ou 3D ! Cet article résume ce que vous obtiendrez. Et pour en savoir sur l'API c'est ici.

1 commentaire:

  1. Bonjour Vraiment Merci pour ce tuto, est ce possible de l'avoir en version vidéo ou de nous envoyer un tuto plus détaillé selon les différents niveau de la création de l'application et aussi des outils à utiliser tel que le codepen et l'api arcgis

    RépondreSupprimer