2

I need to hatch polygons (loaded from a GeoJSON) in a leaflet webmap. Until now I have this:

//Style of each polygon
function style(feature){
    return {
        opacity : 1,
        color: 'black',
        fillOpacity: 0.7,
        fillColor: getColorCode(feature.properties.Status)};
    }

My problem is that I have the fillColor as background color and the hatched color should be grey. Since the fillColor is a property, I am not sure how to inject the hatched color. By this I mean something like this:

enter image description here

The difference is however that I have for example a yellow fillColor and that on top of that the "hatched color" should be blue.

3
  • Please add a picture to illustrate what you mean by "hatch a polygon".
    – TomazicM
    Jan 9 at 16:00
  • I added a picture to show what I mean by hatched
    – Cliff
    Jan 9 at 17:23
  • 1
    There is no native Leaflet solution for this. There also seems to be no Leaflet plugin for this functionality in the form of Leaflet style. The closest to this is leaflet-polygon-fillPattern plugin. You could use this plugin and create on the fly canvas patterns to use as hatch pattern, but it would have to be done polygon by polygon. If you are interested, I can answer and add simple example of that.
    – TomazicM
    Jan 9 at 19:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.