Carte d'aplat avec les données d'une table et une couche geojson

Demandes d'aide
1

Bonjour,

Pouvez-vous me donner un tutoriel pour créer une carte d’aplats de couleurs à partir d’une couche GeoJON et un table de GRIST?

Si pas de tutoriel, pouvez-vous m’indiquer les étapes détaillées svp?

Merci d’avance pour votre aide!

Nathalie

2

Bonjour @Nathagrist14

je vois plusieurs solutions (avec plus ou moins de liberté/fonctionnalité)

  1. La vue personnalisé « Graphiques avacnées » propose dans ses représentation cartographique ce que vous recherchez : des cartes choroplèthes. Je vous avoue que je n’ai pas poussé très loin leur expérimentation.

  2. Pour le max de libertés (nécessite dev web) la conception d’un widget dédié via par exemple la solution open-source Leaflet.

Je vous invite à découvrir Leaflet dans le billet ci-dessous. Ce n’est pas un tutoriel, mais une présentation des possibles.

Et pour répondre plus spécifquement à votre besoin, voila le plugin pour faire des cartes choroplèthes

Cordialement.

3

Merci beaucoup.

J’ai opté pour Choropleth, mais je voudrais agir sur la légende:

peut-on mettre des alias au lieu des valeurs numériques

figer le nombre de couleurs à 3 par exemple

4

Bonjour,

Avec l’extension Leaflet Choropleth, je vous invite à suivre ce tuto
Interactive Choropleth Map - Leaflet - a JavaScript library for interactive maps

figer le nombre de couleurs à 3 par exemple ?

Oui, extrait de la doc

  • colors: If you prefer to specify your own exact colors, use colors: ['#fff', '#777', ...] instead of scale. Just make sure the number of colors is the same as the number of steps specified.

peut-on mettre des alias au lieu des valeurs numériques ?
Il me semble qu’il y a une méthode spécifique pour définir le contenu de chaque item de legend (je vous avoue je ne l’ai jamais utilisé)

Voila un exemple que j’ai trouvé pour personnalisé la légende. Il semble possible de personnalisé ce que l’on souhaite via chaque élément de liste (<li>...</li>) de la légende.

 var legend = L.control({ position: 'bottomright' })
  legend.onAdd = function (map) {
    var div = L.DomUtil.create('div', 'info legend')
    var limits = choroplethLayer.options.limits
    var colors = choroplethLayer.options.colors
    var labels = []

    // Add min & max
    div.innerHTML = '<div class="labels"><div class="min">' + limits[0] + '</div> \
			<div class="max">' + limits[limits.length - 1] + '</div></div>'

    limits.forEach(function (limit, index) {
      labels.push('<li style="background-color: ' + colors[index] + '"></li>')
    })

    div.innerHTML += '<ul>' + labels.join('') + '</ul>'
    return div
  }
  legend.addTo(map)
})
5

Merci pour votre réponse!

Savez-vous à quel endroit doit-on saisir ce programme?

6

Il n’y a pas d’intégration native de Leaflet dans Grist, cela passe donc forcement par le développement d’un custom widget.

A des fins d’expérimentation, vous pouvez utiliser le custom widget builder, mais ce n’est pas la solution que je recommanderais pour un passage en production (sécurité, developper xp…). Je privilégie plutôt l’hébergement de son widget sur son propre serveur web. Il s’git d’un dev d’une application web de cartographie.

Je n’ai pas écrit de tuto complet, mais voici un guide de présentation pour l’utilisation de Leaflet dans un widget Grist (je n’ai pas (encore) par contre utilisé l’extension Choropleth Map) => Carte interactive - #3 par vincent.blain

Cordialement,

7

Ah oui, je ne sais pas si je vais pouvoir me lancer dans du “vrai” développement.

Merci en tout cas pour vos réponses!