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:
Enregistrer un commentaire