Rechercher dans le blog

Un mardi, une appli #12 Suivez les prix au jour le jour des carburants en France pour chaque station-service

Bonjour, aujourd'hui je vais vous présenter dans codethemap une application développée par Esri France, et proposant le suivi des prix des carburants dans les stations-services de France. C’est devenu une habitude depuis le début de la pandémie de Coronavirus Covid-19. Les prix des carburants continuent de chuter, encore et encore. Le prix du baril est même devenu négatif récemment. En effet, le 20 avril 2020, le prix du baril livrable à fin mai 2020 a atteint non pas zéro, mais –37 dollars. Mais qu’en est-il du prix à la pompe ? Malheureusement, ne vous attendez pas à vous faire payer pour aller chercher du carburant. Voici dans cette carte le prix réel des carburants actualisés tous les jours. 
LCI a notamment repris cette application dans cet article.

I/ L’application

L’application propose plusieurs échelles de vision. À l’échelle régionale, la carte ne présente que des clusters du nombre de stations-services par région, à l’échelle départementale uniquement les clusters du nombre de stations-services par département. Enfin, lorsque l'on zoom encore plus, nous pouvons voir chaque station-service sur la carte. On constate aussi qu’à cette échelle, 3 nouveaux widgets sont alors visibles et permettent de filtrer les stations-services visibles selon celles uniquement ouvertes 24h/24 ou en fonction du type de carburants. Avec la possibilité d’effacer le filtre.
Elles sont cliquables pour qu’une popup s’ouvre et nous donne l’information du prix de l’essence représentant les informations de l'exemple ci-dessous :

Adresse
4 Route de marolles
Ville
La norville
24h/24h
Oui
Gazole
1.219 €
Sans Plomb 95%
Non communiqué
Sans Plomb 98%
1.249 €
E10
1.22 €
E85
Non communiqué
GPLC
Non communiqué

II/ L’aspect technique

A/ Les widgets

Plusieurs widgets sont intégrés à l’application. Le widget Zoom intégré par défaut. Le widget Locate permet également de se situer très vite sur la carte grâce à l’adresse IP de l’appareil.
Le widget Search qui permet de chercher une adresse. Intéressons-nous plus particulièrement à celui-ci. À l’aide d’un Locator défini dans ArcGIS Online, nous pouvons contraindre la recherche uniquement en France. Ainsi n’importe quelle adresse tapée cherchera uniquement les adresses correspondantes en France. Ainsi en tapant Berlin, le résultat retourné se situe dans la Gironde. Nous chargeons alors dans le require la classe Locator qui représente donc une ressource de service de géocodage exposée par l'API REST d'ArcGIS Server. Il est utilisé pour générer des candidats pour une adresse. Il suffit alors de définir dans sa propriété url, de joindre l’adresse url du Locator définit préalablement dans ArcGIS Online qui contrait la recherche à la France. 

Le widget Search peut être utilisé pour rechercher des entités dans un FeatureLayer ou des emplacements de géocodage avec un Locator. La propriété sources définit les sources à partir desquelles rechercher la vue spécifiée par l'instance du widget Search.
Enfin, la propriété SearchAllEnabled indique s'il faut afficher l'option de recherche dans toutes les sources. Lorsqu'elle est True, l'option "All" est affichée par défaut : search-searchAllEnabled-true. Si False, aucune option pour rechercher toutes les sources à la fois n'est disponible, c’est notre cas.


Voici ce que ça donne concrètement dans le code :

var searchWidget = new Search({ view: view, allPlaceholder: "Recherche par ville", locationEnabled: true, includeDefaultSources: false }); const sources = [ { locator: new Locator({ url: "https://utility.arcgis.com/usrsvcs/servers/60a8871933e44a249ca71bb13c2d823d/rest/services/World/GeocodeServer" }), singleLineFieldName: "SingleLine", name: "Géocodage sur la France", placeholder: "Search Geocoder", maxResults: 3, maxSuggestions: 6, suggestionsEnabled: false, minSuggestCharacters: 0 } ]; searchWidget.sources = sources; searchWidget.defaultSources = sources; searchWidget.searchAllEnabled = false; // Adds the search widget below other elements in // the top left corner of the view view.ui.add(searchWidget, { position: "top-right", index: 2 });


B/ Les couches de données

L’application exploite trois FeatureLayer : un cluster de stations-service à l’échelle régionale, un autre à échelle départementale, et enfin les stations-service individuelles à l’échelle de la ville.
Tant que l’échelle n’est pas suffisamment basse, on n’autorise pas la visibilité de la couche des stations-service et des widgets. Pour ce faire, on utilise la méthode watch qui va permettre de surveiller une propriété, dans notre cas la propriété scale de l’instance Mapview. Dès qu’elle est suffisamment basse, on autorise alors la visibilité de la couche et des widgets :

view.watch("scale", function (newValue, oldValue, propertyName) { if (newValue <= 200000) { featureLayer.visible = true; clearFilter.style.visibility = "visible" autom.style.visibility = "visible" typeC.style.visibility = "visible" } else { featureLayer.definitionExpression = "ObjectId IS NOT NULL" featureLayer.visible = false; agregation.visible = true; clearFilter.style.visibility = "hidden" autom.style.visibility = "hidden" typeC.style.visibility = "hidden" }

La plage de visibilité de la couche des carburants par département et région est quant à elle définie directement dans ArcGIS Online.

C/ Filtrage des données à la volée

Pour pouvoir filtrer via les boutons sur les informations qui nous intéressent, l’application utilise la propriété definitionExpression des FeatureLayer. Il s’agit d’une clause SQL where utilisée pour filtrer les fonctionnalités sur le client. Seules les entités qui satisfont l'expression de définition sont affichées dans la View. Si l'expression de définition est définie après l'ajout de la couche à la carte, la vue s'actualisera automatiquement pour afficher les entités qui satisfont la nouvelle expression de définition ce qui est le cas dans notre application.
Il faut donc filtrer selon la valeur d’un champ spécifique de la couche en question, ci-dessous le filtrage selon que la station-service soit ouverte 24h/24 ou non :

function defExpression(btn) { if (btn.value == "Automate24_24") { featureLayer.definitionExpression = "Automate24_24 = 'Oui'" } else { featureLayer.definitionExpression = "ObjectId IS NOT NULL" } };

Un script Python tourne et met à jour l’information toutes les heures afin que l’information présentée dans cette application soit en temps réel. Je reviendrai dans un autre article pour montrer comment mettre à jour un FeatureLayer en quasi temps réel (ici toutes les heures, dans mon application sur le suivi du Coronavirus tous les jours) avec l’ArcGIS API for Python.

Vous pouvez vous abonner à ce blog pour lire d'autres articles sur le développement Web d'applications cartographiques et découvrir comment notre API est une superbe alternative à Google Maps !
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.

Aucun commentaire:

Publier un commentaire