Wemap et les layers interactifs

prenez le contrôle de vos calques

L’écosystème Wemap intègre nativement une solution pour afficher et interagir avec vos calques de données au sein de vos cartes.

Envie d’une carte choroplèthe sur les vols de voitures par région en 2016 ?

Depuis la plateforme pro Wemap, il est très facile de lier un calque vectoriel au format GeoJSON (Le format GeoJSON est le standard actuel pour décrire les données géographiques et leurs attributs, en étant facilement intégrable aux applications web). Veuillez juste vous assurer au préalable que celui-ci respecte la norme geojson, et que son poids soit raisonnable pour du web (<2Mo). Une multitude d’outils peuvent vous permettre de réduire sa taille le cas échéant (http://mapshaper.org/) ou de convertir différents formats vers du geojson.

Interface de création de carte wemap sur la plateforme pro Wemap

Depuis l’interface de création de carte, accéder au formulaire“ Gérer les calques.”

formulaire d’intégration de layers depuis la plateforme pro Wemap

Une fois le formulaire rempli, notre carte se met à jour :

une carte un peu … terne ?

Notre calque s’est bien affiché sur la carte, mais il manque cruellement de couleurs. Normal, pour l’instant il ne sert que d’interaction avec la carte, avec les comportements par défaut, surbrillance lors du survol, et zoom sur l’objet au clic.

Style

Pour ajouter de la personnalisation aux objets qui composent le calque, Wemap utilise la spécification simple-style , qui consiste à ajouter des metadata à chaque objet (polygone ou ligne) du calque:

• fill - la couleur de l’intérieur du polygone(RGB ou HEX)
• fill-opacity - l’opacité de l’intérieur du polygone (0.0-1.0)
• stroke - la couleur du contour du polygone ou de la polyligne (RGB ou HEX)
• stroke-opacity - l’opacité du contour du polygone ou de la polyligne (0.0 - 1.0)
• stroke-width - l’épaisseur du contour du polygone ou de la polyligne

Polygones :

Nous allons styler notre précédent calque de régions en ajoutant une couleur spécifique par région et des paramètres généraux :

De suite ça rend mieux :)

Pour arriver à ce résultat, ajoutez simplement des propriétés de style aux propriétés de chaque objet. Ex :

"fill": "red",
"fill-opacity": 0.9,
"stroke": "white",
"stroke-opacity": 0.9,
"stroke-width": 1

Polylignes :

Il est également possible d’afficher des calques de lignes à vos cartes:

Un calque de polylignes, figurant le tracé du tour de France 2017

Pour que votre calque de ligne s’affiche correctement, veillez à bien ajouter ces propriétés à chaque objet :

"fill-opacity": 0,
"stroke": "#BC1F12",
"stroke-width": 4

Les propriétés stroke et stroke-width servent à paramétrer la couleur et la largeur en pixel de la polyligne et la propriété fill-opacity fixée à 0 permet d’éviter au moteur de la carte d’afficher un “faux” polygone à la place de la polyligne.

💡 Astuce: La norme simple-style nous permet d’utiliser tout le spectre des couleurs hexadécimales (ex: #ffffff pour le blanc), alors libre à vous de créer toute sorte de représentations cartographiques.

Interactions

Par défaut, vos calques seront :

• visibles entre les zooms 2 à 18
• mis en surbrillance au survol
• “zoomables” au clic

Mais libre à vous de modifier ces comportements depuis le formulaire de calque :

Visibilité :

Choisissez les paramètres minzoom et maxzoom de chaque calques afin de l’afficher ou non en fonction du niveau de zoom affiché par la carte (plusieurs calques peuvent se superposer, mais méfiez-vous d’un tel résultat)

💡 Astuce: Afficher différents calques en fonction des niveaux de zoom peut être une bonne technique pour gagner en précision au fur et à mesure de la navigation dans la carte.

Survol :

Au survol, vos polygones/polylignes se mettront en surbrillance (highlight), mais vous pouvez désactiver cette fonctionnalité en paramétrant onhover à ignore.

💡 Astuce: Pour utiliser au mieux le survol, assurez-vous que chacun de objet possède une propriété id à valeur numérique unique.

Clic :

Par défaut, l’action onclick va zoomer sur l’emprise de l’objet cliqué (zoom), mais vous pouvez désactiver cette fonctionnalité en paramétrant onclick à ignore, ou encore utiliser la fonctionnalité popup qui va vous permettre d’afficher des informations complémentaires sur l’objet cliqué sous forme d’un popup sur votre carte.

La fonctionnalité popup fait le lien entre les données de l’objet geojson, et un “template”, et retourne le contenu du popup sous forme de HTML.

Pour chaque objet, veuillez ajouter un champ template_data qui contient les informations à passer au popup.

Exemple pour l’objet “département du Puy-de-Dôme” de notre exemple initial:

"template_data": {
    "name": "Puy-de-Dôme",
    "tauxVol": 2.85,
    "totalVol": 1857,
    "nombreVoiture": 1384,
    "nombre2roues": 473
}

Une fois chaque objet mis à jour, il ne reste plus qu’à définir le “template”, c’est à dire le format dans lequel s’afficheront nos données attributaires, en utilisant des balises HTML, et des balises {{ }}.

Le HTML sert à mettre en forme le template (taille de texte, gras, saut à la ligne, et les {{ }} nous permettent d’indiquer où mettre les données attributaires véhiculées dans la propriété template_data de chaque objet.

Par exemple, le template suivant :

<span style=\”font-size:1.2em\”>{{name}}</span><br><br>
<b>{{tauxVol}}</b> vols pour 1000 hab. en 2016<br>
Soit:<br>
{{totalVol}} vols<br>
dont :<br>
{{nombreVoiture}} voitures<br>
{{nombre2roues}} deux-roues

nous donnera le popup :

Croisement entre template et data 🚀 !

Une fois votre template défini, ajoutez-le à la propriété template de votre calque.

Enregistrez les modifications, et profitez de vos popups !!

Et si on mélangeait tout ?

Voici le type de carte choroplèthe que l’on peut facilement faire sur Wemap

Cliquer ici pour aller sur la carte !

il ne reste plus qu’à ajouter vos données et vos pinpoints.

💡 Astuce: Utilisez un logiciel de SIG pour classer vos données et créer votre fichier GeoJSON au format simple-style pour vos cartes choroplèthes, ou contactez nous !

Ne manquez pas nos prochains articles sur comment trouver et traiter des données géographiques (ou non) au sein de l’écosystème Wemap !

Pour plus de détails sur les calques GeoJSON, la dataviz, ou pour une demande particulière, n’hésitez pas à me contacter @Mathieu-Daude Bertrand

***

Comment savoir ce qui se passe autour de nous ? Wemap aborde cette question avec une approche originale : offrir l’information locale via des cartes intelligentes combinant une expérience simple et des services pratiques. Aux côtés de milliers d’utilisateurs des grands noms tels que le Parisien, Ouest-France, le ministère de la Culture ont rejoint la plateforme créée par Wemap pour mieux informer et guider leur public.

Avec sa plateforme de cartes intelligentes Wemap atteint plus de 4 millions de visiteurs mensuels. Pour en savoir plus sur les cartes intelligentes Wemap et rejoindre la plateforme : https://getwemap.com/fr