arcOrama: Le blog consacré à ArcGIS et aux technologies Esri

Le blog francophone consacré
aux technologies Esri

Home Archive for décembre 2012

arcOrama 2012 : l'image de l'année sur ArcGIS Online

Carte de Noël

ArcGIS Online met vos données à table

La Californie cet été, ça vous tente ?

ArcGIS Online se moque de la fin du monde

La semaine dernière la plateforme Cloud d’Esri a évolué de façon significative comme elle le fait tous les 3 mois depuis son lancement en juin dernier (et comme elle va continuer de le faire dans les mois à venir…). Cette dernière évolution est importante en ce qu’elle continue d’enrichir les capacités de service de la plateforme mais aussi les capacités de partage du portail collaboratif de la plateforme ArcGIS.

Cet article ne fait qu’ébaucher les principales nouveautés qui seront ensuite décrites dans des articles de fond.

Un rappel : si vous participez à une organisation ArcGIS Online, videz le cache de votre navigateur pour voir les nouveautés. Si vous n’avez pas accès à un compte d’organisation, lancez-vous dans une évaluation !

Evolutions des Cartes Web (Webmap)

Tables attributaires :

Les utilisateurs de la visionneuse de carte ArcGIS.com peuvent afficher les attributs des services d’entités de leur carte sous forme de table interactive avec possibilité de choix des champs, de formatage, de sélection et de tris des enregistrements.

Vues filtrées sur les services d’entités :

Vous pouvez filtrer les services d’entités d’une carte web pour ne voir que les objets pertinents sur la carte. Ces filtres sont dynamiques et se construisent interactivement pour définir une requête de filtrage potentiellement complexe. La syntaxe permet la mise en place de valeurs saisies par l’utilisateur à l’exécution du filtre par l’affichage d’une invite. Les vues filtrées peuvent être définies sur des services d’entités ArcGIS Online, des services d’entités ArcGIS for Server ou les couches de services de cartes dynamiques ArcGIS For Server disposant d’attributs.

Mise en place de plages d’échelles pour l’affichage :

Des échelles minimum et maximum d’affichage peuvent être mises en place pour tous les types de couche. Ces paramètres peuvent être enregistrés avec votre ressource si vous en êtes le propriétaire.

Désactivation de la mise à jour sur une couche :

Si vous êtes le propriétaire d’un service d’entité modifiable, vous pouvez désactiver la mise à jour sur cette ressource. Cela permet de différencier les contextes de partage où une ressource est modifiable de ceux où elle ne l’est pas.

Evolutions des fonctionnalités de partage

Groupes en lecture seule :

Le propriétaire d’un groupe peut restreindre l’ajout ou la suppression de ressources au groupe à lui-même ou à tous les membres. Dans le premier cas, il garde un contrôle total sur le contenu du groupe.

Choix du tri de l’affichage des ressources d’un groupe :

L’administrateur d’un groupe peut désormais choisir s’il veut que le contenu de son groupe soit trié par titre, propriétaire, évaluation, nombre de vues ou date. Il peut définir si le tri est ascendant ou descendant.

Enrôlement direct d’utilisateurs dans les groupes :

Les administrateurs d’une organisation peuvent ajouter des utilisateurs en tant que membres d’un groupe directement sans passer par des invitations et l’acceptation des utilisateurs.

Flux RSS de commentaires :

Vous pouvez désormais vous abonner aux commentaires d’une ressource publiée afin de mieux suivre les remarques et remontées utilisateur sur cette ressource.

Nouvelles modèles applicatifs :

La galerie des applications web comporte un nouveau modèle utilisant les vues filtrées ainsi qu’une nouvelle version améliorée de l’application web de profil en long.

Stockage des informations de connexion :

Si vous créez une ressource ArcGIS Online sur un service ArcGIS for Server sécurisé, vous pouvez désormais choisir de stocker le nom d’utilisateur et le mot de passe avec votre ressource pour éviter d’avoir à entrer les informations de connexion à chaque ouverture de la carte. Vous vous baserez alors sur le modèle de partage d’ArcGIS Online pour assurer votre stratégie de partage.

Amélioration liées à la publication de services sur ArcGIS Online

Publier des services de cartes tuilés à partir de paquetages de tuiles (Tile packages) :

Vous pouvez désormais tirer partie de la capacité d’ArcGIS for Desktop de créer des caches tuilés pour votre cartes ArcGIS, sans consommer de crédits sur le compte de votre organisation. Une fois les caches calculés, vous les chargez sur ArcGIS Online et créer directement des services de cartes à partir de ces caches.

Publier des services de cartes tuilés à partir de services d’entités :

En tant qu’éditeur, vous pouvez dorénavant publier un service de carte tuilé à partir d’un service d’entités hébergé sur ArcGIS Online.

Service d’entités ArcGIS Online à dimension temporelle :

En tant qu’éditeur, vous pouvez dorénavant publier des services d’entités hébergés sur ArcGIS Online en tirant partie d’un ou deux champs date portés par les entités. Ces services temporels pourront ensuite être utilisés dans des cartes web temporelles.

Nouveautés d’administration d’organisation ArcGIS Online

Configuration du service d’impression :

Vous pouvez utiliser votre propre service d’impression basé sur ArcGIS for Server et vos propres modèles de mise en place. Celui-ci se substitue alors au service proposé par défaut par ArcGIS Online.

Personnalisation de l’image de fond de la page d’accueil :

Les organisations ArcGIS Online peuvent désormais choisir l’image de fond de la page d’accueil de leur portail collaboratif ArcGIS Online.

Désactivation des commentaires :

Les commentaires sur les ressources de l’organisation ArcGIS Online peuvent être désactivés par les administrateurs du portail.

Visionneuse Web CityEngine

CityEngine est un logiciel Esri qui permet la génération de contenu 3D à partir de données 2D en se basant sur des règles procédurales de génération. Depuis Septembre 2012, CityEngine permet la publication de scène 3D sur ArcGIS Online. La visionneuse CityEngine évolue dans la version de décembre 2012 :

Parcours des géosignets :

La visionneuse peut jouer un parcours des géosignets de la scène avec un aperçu de chaque point de vue comme dans cette vidéo :

Partage facilité :

Les scènes web CityEngine peuvent désormais être intégrées dans des sites web en gérant les fonctionnalités accessibles sur ces implémentations.

Amélioration de la visualisation :

La qualité des ombres a été améliorée pour offrir un rendu encore plus réaliste.

Evolutions des services de tâches

Amélioration du géocodage global :

Si vous géocodez des adresses, ArcGIS Online considère par défaut que le pays de votre organisation est le pays dans lequel il faut rechercher les adresses postales.

Géocodage batch avec ArcGIS for Desktop :

Les organisations ArcGIS Online peuvent désormais utiliser leservice mondial de géocodage ArcGIS Online pour géocoder en batch. Ce service permet de géocoder dans plus de 100 pays à partir d’un seul service.

Nouveaux services d’analyses de réseau :

Les développeurs peuvent intégrer dans leurs applications Web ou mobiles des fonctions de calcul d’itinéraires, de calculs de tournées, de calcul d’isochrones à l’aide de l’API d’analyse de réseau. Un service de carte de trafic temps réel est aussi disponible pour les organisation ArcGIS Online

En conclusion, toutes ces nouveautés sont déjà disponibles sur la plateforme ArcGIS Online et en français s'il vous plait ! Vous pouvez retrouver ces informations et plus dans l’aide en ligne ArcGIS Online. Nous poursuivrons avec quelques articles de fond sur les plus importantes (celles qui sont marquées trois étoiles).

Une heatmap dynamique en JavaScript/HTML5

L'analyse spatiale passe par l'usage d'outils plus ou moins complexes, mais le premier outil que nous utilisons sans même nous en rendre compte est l’œil. La lecture d'une carte donne instantanément des renseignements tels que : la localisation d'une infrastructure ou d'un évènement, la répartition spatiale de ces évènements, leur nature, etc... La vitesse de cette analyse dépend en grande partie de la représentation cartographique choisie.

Lorsque vous affichez des couches de points sur une carte et diffusez cette carte sur le web, se pose donc la question du mode de représentation.

Pour un volume de données réduit et une répartition spatiale peu dense, une bonne sélection du symbole, de sa taille et de la plage de visibilité de la couche permettront d'assurer une bonne lisibilité de la carte.

En revanche lorsque le volume de donnée (nombre de points) augmente ou que leur répartition spatiale est dense la carte devient illisible et difficilement exploitable à l'œil.

Afin d'optimiser l'affichage d'une couche ponctuelles volumineuse, deux types de symbologie s'offrent à nous:

la symbologie sous forme d'agrégat (clustering), déjà disponible dans les API Web d'ArcGIS for Server (Silverlight, Flex, JavaScript).
la représentation de type carte de densité (ou carte de points chauds) (heatmap).

C'est cette dernière qui nous intéresse aujourd'hui.

Qu'est-ce qu'une heatmap?

De manière générale une heatmap est une représentation graphique des données employant des couleurs pour indiquer le degré d'activité ou la fréquence d'apparition de la donnée, en générale des couleurs froides pur indiquer une faible densité et plus chaudes pour indiquer une densité forte.

Les heatmap sont utilisées dans différents domaines comme par exemple l'ergonomie et le web marketing il pour étudier le temps et les zones de fixation du regard sur une page web ou un e-mail. (plus de détails ici), et bien sûr dans le domaine des SIG.

Dans le domaine de la géographie, il s'agit donc d'une méthode de représentation des données en fonction de leur densité spatiale.

Si vous souhaitez ajouter une heatmap dans vos applications web cartographiques, deux options sont possibles :

pré-calculer la heatmap avec ArcGIS for Dekstop, publier le résultat sous forme de service web MapService) et ajouter le MapService dans la carte.

offrir un outil dynamique à votre application web. Si les données ponctuelles sont mises à jour la heatmap s'adaptera automatiquement

La librairie heatmap.js

Nous allons voir ici comment assurer cette fonctionnalité de génération de heatmap à la volée dans une application web JavaScript, grâce à une librairie open source crée par Patrick Wied.

La librairie heatmap.js est une librairie JavaScript qui exploite les Canvas HTML5 afin d'afficher des heatmap au rendu fort appréciable dans votre appli web. La Heatmap est calculé côté client (navigateur) et ne requiert aucun plugin. Le seul pré requis étant que le navigateur supporte les Canvas HTML5 (ce que font les navigateurs récents, y compris sur les périphériques mobiles). Cette librairie est sous licence opensource de type MIT and the Beerware license, vous êtes donc libres de l'utiliser. Elle est également disponible sur github, vous pouvez donc faire remonter vos impressions et remarque auprès de son concepteur, mais également contribuer à son évolution.

Son principe de fonctionnement est le suivant : la heatmap est générée dynamiquement d'après vos données ponctuelles qui peuvent provenir d'une couche graphique (que vous aurez pris soin de remplir par une requête par exemple). vous pouvez donc mettre à profit les featureLayers de l'ArcGIS API for JavaScript (qui sont assimilables à des graphicsLayers remplis automatiquement par une requête pré-définie).

La heatmap se base sur cette collection de points. A chaque fois qu'un point est ajouté à la collection, un processus vérifie si la valeur maximum a changé et appelle une fonction de dessin du gradient de couleur (qui est fonction des valeurs min et max de la collection).

Si par exemple la collection en contient qu'un seul point, il sera afficher avec la plus forte valeur. Si un nouveau point y est ajoutées, les valeur min et max seront recalculée dynamiquement, donc le gradient aussi, donc la heatmap est mise à jour. La heatmap ajoutée par code à votre application web est entièrement personnalisable en terme de gradient de couleur, transparence, rayon de calcul etc...

Ajout d'une heatmap dynamique à votre application web

Partons d'une application très simple contenant une carte. Cette carte est constituée d'une basemap (par exemple la World Topo Map Esri).

Dans l'ordre, il faut d'abord inclure les librairies JavaScript nécessaires : heatmap.js (qui permet d'afficher une heatmap à partir d'un tableau de points) et heatmap-arcgis.js (qui permet de faire le lien entre cette librairie heatmap.js et l'ArcGIS API for JavaScript).

Nous avons ensuite besoin de définir l'élément HTML qui contiendra le fameux HTML Canvas d'HTML5 crée à la volée par la librairie heatmap.js.

<div id=”heatLayer”></div>

A présent nous pouvons créer, via la partie Javascript de notre page HTML, la heatmap en spécifiant le rayon de traitement, le gradient de couleur, la transparence. Un paramètre (useLocalMaximum) permet également de spécifier la manière dont la valeur maximun est calculées : soit en tenant compte de l'ensemble des données de la couche ponctuelle, soit en tenant compte uniquement des données visibles dans l'étendue affichée.

heatLayer = new HeatmapLayer({

config: {

"useLocalMaximum": true,

"radius": 40,

"gradient": {

                                0.45: "rgb(000,000,255)",

                                0.55: "rgb(000,255,255)",

                                0.65: "rgb(000,255,000)",

                                0.95: "rgb(255,255,000)",

                                1.00: "rgb(255,000,000)"

                            }

                      },

                        "map": map,

                        "domNodeId": "heatLayer",

                        "opacity": 0.85

                    });

Le paramètre domNodeId doit avoir pour valeur le nom de l'élément HTML qui accueillera la heatmap.

N'oublions pas d'ajouter cette nouvelle couche à la carte : map.AddLayer(heatLayer);

Tout est prêt, il suffit à présent de remplir la couche.

Comment remplir notre heatLayer? A vous de choisir, mais un moyen simple est de réaliser une requête au serveur ArcGIS puis de "câbler" le résultat de cette requête sur la heatLayer.

Nous avons choisi ici d'utiliser des données référencées sur le portail OpenGeoData.fr : la couche des arrêts du réseau de transport en commun de la région Bordelaise (détails ici : http://www.opengeodata.fr/home/item.html?id=6a59850d794e46ab9af9df2cdb275246)

La couche de points que nous souhaitons afficher sous forme de heatmap est également affichée dans la carte sous forme de featureLayer.

Pour rappel, une featureLayer dérive des graphicsLayer. Une graphicsLayer permet de gérer côté client , donc localement dans votre navigateur, des objets graphiques (géométrie + attributs + symbologie) et de les afficher sur la carte. Une featureLayer est une graphicsLayer avec un comportement particulier qui est de se remplir quasi automatiquement. Elle possède pour cela une url (l'url d'un service de carte dynamique ou d'un service d'entités ArcGIS for Server, ou bien enfin d'une service d'entités hébergé sur ArcGIS Online). Une fois cette featureLayer ajoutée à la map, elle sera remplie via une requête sur le service web associé.

Notre featureLayer est en mode "ondemand", c'est à dire que seuls les points contenus dans l'étendue d'affichage sont stockés localement après requête au serveur. A chaque fois que l'étendue est mise à jour, la requête est automatiquement exécutée et la couche remplie.

Nous allons donc procéder de la même manière pour la heatLayer, ce qui nous permettra d'assurer le côté dynamique. A chaque fois qu'un point est ajouté à la featureLayer, il devra être ajouté à la heatLayer pour que la heatmap soit mise à jour (gradient recalculé, etc...).

Nous définissons donc une fonction getFeature() qui se chargera de faire la requête auprès du server, et d'envoyer le résultat (les points) à la heatLayer. Cette fonction sera appelée à chaque fois que l'étendue de la carte est mise à jour. donc on lie cette fonction à l'évènement onExtentChange de l'objet map.

function getFeatures() {

// la requête

var query = new esri.tasks.Query();

// seulement pour l'étendue

query.geometry = map.extent;

// on veut uniquement les arrêts de la commune de Bordeaux

query.where = "ville = 'BORDEAUX'";

                query.outSpatialReference = map.spatialReference;

                // on execute la requête

                featureLayer.queryFeatures(query, function (featureSet) {

                    var data = [];

                    // s'il y a un résultat

                    if (featureSet && featureSet.features && featureSet.features.length > 0) {

                        // on met le résultat dans un objet data

                        data = featureSet.features;

                    }

                    // que l'on envoie à notre heatLayer

                    heatLayer.setData(data);

                });

            }

puis :

dojo.connect(map, "onExtentChange", getFeatures);

Simple, efficace, rapide et beau.

Libre à vous d'adapter le code pour offrir plus de fonctionnalités à l'utilisateur final (comme par exemple une belle interface afin de définir le gradient de couleurs, le rayon d'analyse, la couche à laquelle la heatmap est associée, etc...).

En conclusion, cette fonctionnalité se retrouve dans toutes les API web ArcGIS puisque c'est aussi possible en Silverlight et Flex.

Vous avez donc vu ici comme grâce à cette librairie, vous pouvez enrichir votre application web JavaScript avec une heatmap dynamique en quelques lignes de codes et surtout l'exploiter sur votre navigateur web ou sur votre smartphone ou tablet tactile préférée.

Les heatmap dynamiques sont donc à la portée de tous.

L'application est visible ici.

Le code source d'exemple est téléchargeable ici.