0

I want to color my polygon with multiple colors basis user defined ratio in Leaflet.

So lets consider an example: There is a rectangle (polygon) and the defined ratio is 60:40. Then in this case the polygon should be colored with red only for 60% of the total area of the polygon and the remaining should be blue color covering 40% of the polygon.

The polygon can be of any shape (irregular or regular like rectangle, triangle)

Is there any work around the styling options? or maybe any plugin that I'm not aware of?

Leaflet version - 1.6.0

In the following code I want to implement 2 colors in case when it is 0|partially

function style_reg_v1_0_0(feature) {
  switch (String(feature.properties['concat( "gt" ,' | ', "reg" )'])) {
    case "0|fully":
      return {
        pane: "pane_reg_v1_0",
        opacity: 1,
        color: "rgba(35,35,35,1.0)",
        dashArray: "",
        lineCap: "butt",
        lineJoin: "miter",
        weight: 1.0,
        fill: true,
        fillOpacity: 1,
        fillColor: "rgba(56,162,10,1.0)",
        interactive: true,
      };
      break;
    case "0|partially":
      return {
        pane: "pane_reg_v1_0",
        opacity: 1,
        color: "rgba(35,35,35,1.0)",
        dashArray: "",
        lineCap: "butt",
        lineJoin: "miter",
        weight: 1.0,
        fill: true,
        fillOpacity: 1,
        fillColor: "rgba(190,190,190,1.0)",
        interactive: true,
      };
  }
}
7
  • 1
    One of the basic policies of GIS SE site is that coding question should include relevant part of the code that has be tried so far, otherwise question is most likely to be closed as not conformant to GIS SE site policy. Please edit the question and include relevant part of your existing code. And on more thing to be clarified: can polygons be of any shape or just rectangles?
    – TomazicM
    Jul 4, 2020 at 17:47
  • @TomazicM I haven't been able to start of with the code because I'm not finding a way around my problem. I tried editing the existing styling options but with no luck Jul 4, 2020 at 17:52
  • 1
    Then include whatever code you have so far.
    – TomazicM
    Jul 4, 2020 at 17:55
  • And where is the data about the coloring ratio?
    – TomazicM
    Jul 4, 2020 at 18:53
  • 1
    There is no such built in functionality in Leaflet and I'm not aware of any Leaflet plugin or general JS library that could do that. If you really need this functionality, you'll have to code it yourself. For this purpose you could use Turf.js library and polygon splitting function from answer to this question: gis.stackexchange.com/questions/344068/…
    – TomazicM
    Jul 5, 2020 at 19:12

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.