keplergl/kepler.gl

Colouring a Map by a field in Kepler.gl

stanleybeco opened this issue · 0 comments

I would like to colour the map based on the value of Field.

geometry yield
contains geojson coordinates 0.89
contains geojson coordinates 0.6
contains geojson coordinates 0.5

this is what my datasets look like.

A yield with a higher number would give a darker green, and a smaller yield would give a a lighter green.

When the map is loaded, i am able to see the map, and the yield in the tooltip. However the Map doesn't colour based on the yield given. Furthermore, the label of 'Yield Index' isn't appearing.

    const layer = {
      type: 'geojson',
      id: dataset.info.id,
      label: "Yield Index",
      config: {
        dataId: dataset.info.id,
        isVisible: true,
        visConfig: {
          filled: true,
          stroked: true,
          strokeColor: [0, 0, 0],
          lineWidth: 1,
          colorRange: {
            name: 'Green',
            type: 'sequential',
            category: 'Uber',
            colors: ['#d9f0a3', '#addd8e', '#78c679', '#41ab5d', '#238443', '#006837']
          },
        },
        columns: {
          geojson: 'geometry'
        }
      },
      visualChannels: {
        colorField: {
          name: 'yield',
          type: 'real',
          tableFieldIndex: 1,
          id: 'yield'
        },
        colorScale: 'linear',
        sizeField: null,
        sizeScale: 'linear'
      }
    };
    dispatch(
      addDataToMap({
        datasets: [dataset],
        options: {
          centerMap: true,
          keepExistingConfig: false
        },
        info: {
          title: 'Estate Structures Map',
          description: 'This is my map'
        },
        config: {
          mapState: {
            latitude: 3.128299555262178,
            longitude: 113.473405860195,
            zoom: 10,
          },
          visState: {
            layers:[layer]
          }
        }
      })
    );

From my understanding,

  1. visConfig, is to adjust the colour of the WHOLE map

  2. visualChannels, is to adjust the colour by fields.

I have tried putting the colourRange in either visConfig,visualChannels
I have also tried adjusting the tableFieldIndex in colorField

Both don't seem to have any effect. I have been stuck for days, and any help would really be appreciated!