Align patterns and gradients to a grid

This commit is contained in:
ahocevar
2018-05-22 16:05:32 +02:00
parent c32bd2274c
commit 7cfa65b8c3
6 changed files with 24 additions and 25 deletions
+4 -3
View File
@@ -3,10 +3,11 @@ layout: example.html
title: Styling feature with CanvasGradient or CanvasPattern
shortdesc: Example showing the countries vector layer styled with patterns and gradients.
docs: >
First this example creates a reusable [`CanvasPattern`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasPattern)
This example creates a [`CanvasPattern`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasPattern)
and a [`CanvasGradient`](https://developer.mozilla.org/en/docs/Web/API/CanvasGradient). The countries are loaded from
a GeoJSON file. A style function determines for each country whether to use a fill with the pregenerated
CanvasGradient (rainbow colors) or a CanvasPattern (repeating stacked circles).
a GeoJSON file. A style function determines for each country whether to use a fill with the
CanvasGradient (rainbow colors) or a CanvasPattern (repeating stacked circles). **Note**: For seamless repeat patterns,
image width and height of the pattern image must be a factor of two (2, 4, 8, ..., 512).
tags: "canvas, gradient, pattern, style"
---
<div id="map" class="map"></div>