mapbox
Striped polygon coloring
I have a need to implement striped coloring for an interactive map I'm creating. Basically, each polygon on my map could have one to many colors associated with it.
See image below for example.
You can do this an image and a fill-pattern property, like in this example. Next time, please use a more suitable platform for questions such as StackOverflow — this place is meant to report issues with GL JS.
A fill-pattern does not accomplish what I'm asking for? StackOverflow is not meant to request new features to your library, that is what GitHub is for.
I have a map which has farm fields in which I need to stripe with a variety of colors. Sometimes upwards of 5 per field. This is extremely impractical to do via a pattern as I'd have to create complex patterns during runtime.
@wtravO what do you find extremely impractical about generating patterns during runtime? You can do this in a few lines of code with Canvas 2D, and then either add the result manually through addImage method or set up drawing in the styleimagemissing event. This way you have full control over the pattern's appearance.
Implementing all kinds of patterns and corresponding styling options like the multi-colored stripes in the style specification and GL JS core does seem impractical though.
Generating a striped pattern blob with multiple color support is more than a few lines of code.
All that would need to be done on the library end would be to implement a simple gradient option for polygons. The library already does that for lines, why not polygons? With a gradient, I could just set it up in a way that does hard stops and problem solved.
I am also a paying customer and would appreciate less snark from a member of the organization. My request was perfectly reasonable.
I'm sorry for sounding snarky, that wasn't my intent. Supporting expression-powered gradients does sound like an interesting idea and one we could explore, though it could be very tricky to implement. Let me leave this as an open ticket and comment in detail on the potential challenge later. Meanwhile, try the styleimagemissing workaround — this should fit the purpose quite well.
Hey there,
I tried to fill polygons with patterns today using the Canvas approach outlined by @mourner. Funny enough, my use case is essential the same as described by @wtravO: I need to show the crops currently cultivated on a farms fields. Due to the amount of crops on a farm, solely using colors for distinguishing crops isn't working that well.
In addition, patterns may aid map data comprehension by color vision deficient viewers.
Here's what I came up with so far:
https://observablehq.com/@chrispahm/filling-polygons-with-patterns-in-mapbox-gl-js
Notice the rasterize function turning svg patterns into base64 pngs for use with Mapbox.
One thing I'm relatively unsatisfied with is the blurriness of the patterns. I tried to implement a small interpolation logic, however one can still easily tell the difference between the (raster) pattern and the (perfectly crisp) vector tiles. Considering how beautiful Mapbox maps are in general, this really is a bummer. Furthermore, with increasing pattern resolution, map performance seems to decrease (seems obvious, but could also be a mistake on my behalf).
Please let me know if you have a better/more performant idea for improving pattern visualisations. Best Christoph
A relatively simple solution is to create an SVG that has the look you are going for, and then make the colors place holders. You can then take the SVG string, replace the color placeholders, then add that to the maps sprite. This is how Azure Maps does templated icons: https://learn.microsoft.com/en-us/azure/azure-maps/how-to-use-image-templates-web-sdk
Hey, I'm just bumping this to add my use case.
In my use case, we want to provide a unified look-and-feel between QGIS, mapbox, and other GIS software. We do data-as-a-service, and have thousands of sources.
QGIS and other GIS software already supports stripes, with the width, angle, and color of the stripes all being parameters.
That means there's no great way to load all those images. Clearly, we'll be doing it dynamically, but it's unclear whether a raster image will look right.
The solution that would help me, and likely move geostyler's target support for mapbox forward, would be to make a fill-stripearray (like dasharray) property, a fill-stripe-angle property, and a fill-color property. Then users would be able to make crisp, efficient stripes with different numbers of colors (by using no fill color on additional stripe-only layers). That would handle stripes and cross-hatching too (though it wouldn't handle dash-fills with dots in them).
