keplergl / kepler.gl

Kepler.gl is a powerful open source geospatial analysis tool for large-scale data sets.
http://kepler.gl
MIT License
10.12k stars 1.71k forks source link

Colouring a Map by a field in Kepler.gl #2574

Open stanleybeco opened 1 month ago

stanleybeco commented 1 month ago

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!