Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Can the style in ColorLayer support function callback function? #2397

Open
liangyuan1 opened this issue Sep 11, 2024 · 5 comments
Open

Can the style in ColorLayer support function callback function? #2397

liangyuan1 opened this issue Sep 11, 2024 · 5 comments
Assignees
Labels
proposal 👍 Proposal of a new feature

Comments

@liangyuan1
Copy link

image
Can the style in ColorLayer support function callback function? Currently, we have checked that each specific property supports callback. I want to dynamically modify the fill color and stroke color based on data properties, which requires multiple callbacks and is not very user-friendly. How to directly support callback function in style? After setting the property, I return a stylle object, which is more convenient to use

@liangyuan1 liangyuan1 added the proposal 👍 Proposal of a new feature label Sep 11, 2024
@AnthonyGlt
Copy link
Contributor

As you said, we support for each attributes.
In the source_stream_wfs_raster.html exeample, you can see that the fill is defined by a function, isn't what you want ?

In this proposal, could you give us an example of what you're expecting.
When opening issues/MR/proposal, there are templates provided that help us to better understand and format the needs

@liangyuan1
Copy link
Author

As you said, we support for each attributes. In the source_stream_wfs_raster.html exeample, you can see that the fill is defined by a function, isn't what you want ?

In this proposal, could you give us an example of what you're expecting. When opening issues/MR/proposal, there are templates provided that help us to better understand and format the needs

Example: source_steam-wfs_raster.html. I understand it to be either color or width, but I have a requirement: there is a water supply pipeline geojson data, and I need to render the style based on the pipeline material (color) and diameter (width). If the style callback function returns a result of an object such as:
function colorBuildings(properties) {
let color = '#FDFDFF'
let width =1
if (properties.meateri=== 'Résidentiel') {
color ='#FDFDFF';
} else if (properties.usage_1 === 'Annexe') {
color = '#C6C5B9';
}
return {
stroke: {
color: color ,
width: width ,
},
}
}
This method will be very convenient for handling the returned results

@ftoromanoff
Copy link
Contributor

Thank you for using itowns.

I fell like I understand your motivation. (You want to be able to use a single callback to define a style instead of using several callbacks for each style.properties).

Unfortunatly, we decided in a technical choice, not to allow callbacks at the Style level, to limite the number of checks in order to validate the style.
But If we get others demandes in this direction (callbacks at stroke/fill/text/icon etc), we might rethink this decision.

Looking at the previous example, you can do :

function colorBuildings(properties) {
  let color = '#FDFDFF'
  if (properties.usage_1 === 'Annexe') {
    color = '#C6C5B9';
  }
  return color;
}


const style = {
  stroke: {
    color: colorBuildings,
    width: width ,
  },
}

But i guess, your real case is more complex...

@liangyuan1
Copy link
Author

@ftoromanoff I suggest considering that my job is more focused on business. Openlayer has this method, which is very convenient for setting styles and greatly reduces development costs. Thank you

@ftoromanoff
Copy link
Contributor

ftoromanoff commented Oct 28, 2024

Hello,
Would it help if we allow the use of function to the stroke/fill/point/etc level ?

In your example this would mean being able to do:

function colorBuildings(properties) {
  let width = 1;
  let color = '#FDFDFF';
  if (properties.usage_1 === 'Annexe') {
    color = '#C6C5B9',
    width: 2,
  }
  return { color,
           width,
         };
}

const style = {
  stroke: colorBuildings
}

(And in this case it will be hard to check for the mandatory values)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
proposal 👍 Proposal of a new feature
Projects
None yet
Development

No branches or pull requests

3 participants