Not work Color(fill color) the polygons in graphicseck.gl Polygons

[sonfire186]

Hi all! I want to color(fill color) the polygons in graphicseck.gl Polygons in my own colors. But the code doesn't work for me

data => data.map(d => ({
  ...d,
  color: colors.hexToRGB(d.extraProps.zone_index_color)
}));

How can I do that?

[dosubot[bot]]

Hey @sonfire186! I'm here to help you with any issues you're facing. I'm a bot designed to assist with bug fixes, answer questions, and guide you on becoming a contributor. Let's tackle this together!

To color the polygons in graphicseck.gl using your own colors, you need to ensure that the hexToRGB function is correctly converting the hex color to an RGB array and that the resulting color is properly applied to the polygons. Here is how you can do it:

1. Ensure the hexToRGB function is correctly imported and used:

   import { hexToRGB } from './utils/colors'; // Adjust the import path as necessary
   
   data => data.map(d => ({
     ...d,
     color: hexToRGB(d.extraProps.zone_index_color)
   }));
   

2. Apply the resulting RGB color to the polygons:

   Make sure that the color property is used correctly in the layer configuration. Here is an example of how you might configure the PolygonLayer:

   const polygonLayer = new PolygonLayer({
     id: 'polygon-layer',
     data: yourPolygonData,
     getPolygon: d => d.polygon, // Adjust this to match your data structure
     getFillColor: d => d.color, // Use the color property from your data
     // other layer properties
   });
   

3. Example of the complete setup:

   import { hexToRGB } from './utils/colors'; // Adjust the import path as necessary
   import { PolygonLayer } from '@deck.gl/layers';
   
   const yourPolygonData = data.map(d => ({
     ...d,
     color: hexToRGB(d.extraProps.zone_index_color)
   }));
   
   const polygonLayer = new PolygonLayer({
     id: 'polygon-layer',
     data: yourPolygonData,
     getPolygon: d => d.polygon, // Adjust this to match your data structure
     getFillColor: d => d.color, // Use the color property from your data
     // other layer properties
   });
   
   // Add the layer to your DeckGL instance
   

Ensure that the hexToRGB function is correctly converting the hex color to an RGB array. Here is the implementation of the hexToRGB function:

import { rgb } from 'd3-color';

export function hexToRGB(
  hex: string | undefined,
  alpha = 255,
): [number, number, number, number] {
  if (!hex) {
    return [0, 0, 0, alpha];
  }
  const { r, g, b } = rgb(hex);

  return [r, g, b, alpha];
}

This function handles both 3-digit and 6-digit hex codes and returns an array with the RGB values and the alpha channel ^[1].

By following these steps, you should be able to color the polygons in graphicseck.gl with your own colors.

To continue talking to Dosu, mention @dosu.

[sonfire186]

hexToRGB(d.extraProps.zone_index_color)

data => data.map(d => ({
  ...d,
  color: [255, 255, 255]
}));

doesn't work either, all the colors are the same

[dosubot[bot]]

To ensure each polygon is colored correctly based on the zone_index_color property, you need to map the zone_index_color property to the getFillColor attribute of the PolygonLayer. Here is an example of how you can achieve this:

1. Ensure the zone_index_color property is correctly mapped to the color property:

   const yourPolygonData = data.map(d => ({
     ...d,
     color: d.extraProps.zone_index_color
   }));
   

2. Apply the resulting color to the polygons:

   Make sure that the color property is used correctly in the layer configuration. Here is an example of how you might configure the PolygonLayer:

   import { PolygonLayer } from '@deck.gl/layers';
   
   const polygonLayer = new PolygonLayer({
     id: 'polygon-layer',
     data: yourPolygonData,
     getPolygon: d => d.polygon, // Adjust this to match your data structure
     getFillColor: d => d.color, // Use the color property from your data
     // other layer properties
   });
   
   // Add the layer to your DeckGL instance
   

3. Example of the complete setup:

   import { PolygonLayer } from '@deck.gl/layers';
   
   const yourPolygonData = data.map(d => ({
     ...d,
     color: d.extraProps.zone_index_color
   }));
   
   const polygonLayer = new PolygonLayer({
     id: 'polygon-layer',
     data: yourPolygonData,
     getPolygon: d => d.polygon, // Adjust this to match your data structure
     getFillColor: d => d.color, // Use the color property from your data
     // other layer properties
   });
   
   // Add the layer to your DeckGL instance
   

By following these steps, you should be able to color the polygons in graphicseck.gl with your own colors based on the zone_index_color property ^[1][2].

To continue talking to Dosu, mention @dosu.