keplergl / kepler.gl

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

Layer configuration #581

Closed 1995parham closed 5 years ago

1995parham commented 5 years ago

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',
              },
            ],
          }
        }
heshan0131 commented 5 years ago

@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

1995parham commented 5 years ago

@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?

heshan0131 commented 5 years ago

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

1995parham commented 5 years ago

@heshan0131 I am so grateful for your help