Kepler.gl: Layer configuration

Created on 26 Jun 2019  路  4Comments  路  Source: keplergl/kepler.gl

I use Kepler to demonstrate the information that is gathered from API. I want to configure its layer when I pushing the data using addDataToMap. I have used the following code and I want to know is it standard? or there is any documentation on it?

     addDataToMap({
        // datasets
        datasets: {
          info: {
            label: 'Snapp Surge',
            id: 'surge',
            color: [255, 165, 0], // [ red, green, blue ] in decimal
          },
          data: { // manually creating the map with given data from the dastqesh
            fields: [
              { name: 'id',       foramt: '', type: 'string' },
              { name: 'name',     format: '', type: 'string' },
              { name: 'city',     format: '', type: 'string' },
              { name: '_geojson', format: '', type: 'geojson' },
              { name: 'utilization', format: '', type: 'real' },
            ],
            rows: cities.reduce((acc, city) => {
              return acc.concat(city.districts.map(district => [
                district.id,
                district.name,
                city.name,
                district.polygon,
                Math.random()
              ]))
            }, [])
          },
        },
        options: {
          centerMap: true,
        },
        config: {
          visState: {
            layers: [
              {
                config: {
                  color: [255, 165, 0], // [ red, green, blue ] in decimal
                  label: 'Utilization',
                  dataId: 'surge',
                  isVisible: true,
                  colorField: {
                    name: 'utilization',
                    id: 'utilization',
                    format: '',
                    type: 'real'
                  },
                  colorScale: "quantize",
                  visConfig: {
                    colorRange: {
                      category: "Uber",
                      colors: ["#00939C", "#2FA7AE", "#5DBABF", "#8CCED1", "#BAE1E2", "#F8C0AA", "#EB9C80", "#DD7755", "#D0532B", "#C22E00"],
                      name: "Uber Viz Diverging 3.5",
                      reversed: false,
                      type: "diverging"
                    },
                    'hi-precision': false,
                    opacity: 0.5,
                    filled: true,
                    stroked: false,
                  },
                  columns: {
                    geojson: '_geojson'
                  },
                },
                label: 'f29m0q',
                type: 'geojson',
              },
            ],
          }
        }

All 4 comments

@1995parham we recommend using the map config json directly copied from Export map as json instead of composing it from scratch.

You can first call addDataToMap passing the data only, style layers. Then copy the map config json out to be passed to this action

@heshan0131 Thanks for your time and response. So first I load the map data then export it as JSON and use the provided configuration for update the map configuration in my application?

You don't even need to click to exoprt the map, just need to copy the json blob from the input box. That's your map config right there.

image

Just need to make sure your dataset.info.id doesn't change

@heshan0131 I am so grateful for your help

Was this page helpful?
0 / 5 - 0 ratings