How to code more patterns for FillPattern?

[mflorence99]

Another awesome job with FillPattern -- it has saved me countless hours!

There's a URL in FillPattern.js that directs the reader to a source of patterns examples and presumably some clues or tools on how to build them. That URL is http://seig.ensg.ign.fr/fichchap.php?NOFICHE=FP31&NOCHEM=CHEMS009&NOLISTE=1&N=8 but it no longer works.

Just as a question: do you have an alternate source of information?

[Viglino]

The link was just a reference to a French cartography course with a set of cartographic patterns example... but nothing to help code new patterns ...
See archive: https://web.archive.org/web/20061125043036/http://seig.ensg.ign.fr/fichchap.php3?NOCONT=CONT3&NOCHEM=CHEMS009&NOFICHE=FP31&NOLISTE=1&N=8&RPHP=fichchap&RCO=CONT3&RCH=CHEMS001&RF=FP4&RPF=3&RPC=0

The patterns themselves are a set of drawing instructions I've created using from svg.
What pattern do you need? do you have examples?

@+

[mflorence99]

Got it @Viglino, many thanks! I was looking for version of your "tree" and "pine" patterns with the tree top filled in. I'm using them to distinguish between two different land uses of the two different tree types. Going forwards, though, there are a number of other land use cases I'd like to depict, so I was trying to understand how to build them myself.

BTW you may have seen this site: http://www.imagico.de/map/jsdotpattern.php

It took me a while to understand how it works but once I cracked it I used the SVG patterns it generates in another project. Random is good but by no means essential to me and your patterns are impressively terse and easy to incorporate into a codebase.

[Viglino]

I've added filled version of the tree and pine pattern (there was just a fill / stroke property to change) 😄
BTW, you can also use a char as pattern (see example):

  ol.style.FillPattern.addPattern ("bug (fontawesome)", { char:'\uf188', size:12, font:"10px FontAwesome" });
  ol.style.FillPattern.addPattern ("smiley (width angle)", { char:'\uf118', size:20, angle:true, font:"15px FontAwesome" });

Thank-you for the link, I'll try to see which one I can add...

[mflorence99]

Fabulous, thank you so much for your help! Thanks too for the tip. I had read in your docs it could be done, but I hadn't wrapped my head around how yet :)