Map with background filled as SVG pattern

I wanted to use svg fill patterns for thematic maps. I found an interesting library patternfills and filled the whole world with one of the pattern. Defining SVG patterns and using with geojson2svg was quite easy. I’ll explain the basic usage of SVG fill patterns here.

Here is the map

So first let’s check how to create this fill pattern. The code below shows the pattern definition. Basically with any SVG element fill pattern can be created, here hatch pattern is formed with path element. Read more about SVG patterns for detailed explanation.

<div id="mapArea" style="width: 100%;">
  <svg id="map" xmlns="http://www.w3.org/2000/svg" x="0" y="0" >
  <defs>
    <pattern id="hatch0" patternUnits="userSpaceOnUse"
        x="0" y="0" width="10" height="10">
      <g style="fill:none; stroke:#fff; stroke-width:2">
        <path d="M-1,1 l2,-2 M0,10 l10,-10 M9,11 l2,-2"/>
      </g>
    </pattern>
  <defs>
  </svg>
  <script type="text/javascript" src="./js/build.js"></script>
</div>

And now if we see the JavaScript code for usage of pattern, its quite easy:

34   // process every feature
35   geojson.features.forEach(function(f) {
36     var svgString, svg;
37     svgString = convertor.convert(
38       f,
39       {attributes: {'style': 'fill:url(#hatch0)'}});
40     svg = parseSVG(svgString);
41     svgMap.appendChild(svg);
42   });

We just pass the fill style while converting each feature to SVG path element. The above code is part of the JavaScript main file. Different patterns can be passed to geojson features based on your classification.Thematic mapping with geojson2svg has been explained in my previous blogs.

Note: Each article in this blog is an individual project. Here is the source code for this article’s map.