Question

How would I style the "world_mill_en" map like this?

I know how to do the markers, just have to specify the longitude and latitude. How would I get rid of all the dividing lines between the continents, and change the fill such that it's just a bunch of grey dots? As far as I know, the api only lets you change it to a solid fill.

Also, how do I disable region hovering?

Was it helpful?

Solution

Use a pattern fill (with the image you want) for the region (doesn't require masking)

or

Use a pattern fill on a rectangle that uses a mask with the region in it

<svg xmlns="http://www.w3.org/2000/svg" 
 xmlns:xlink="http://www.w3.org/1999/xlink" 
 viewBox="0 0 1000 360">
 <defs>
    <pattern patternUnits="userSpaceOnUse" id="pat1" x="10" y="10" 
     width="425" height="319">
        <image width="425" height="319" 
         xlink:href="http://designm.ag/images/0709/wood/71.jpg" />
    </pattern>
    <text id="txt1" y="100" font-weight="bold" font-family="Verdana" 
     font-size="100">Some Text</text>
</defs>     

<use width="1000" height="400" xlink:href="#txt1" fill="url(#pat1)"/>
</svg>

Here's a fiddle showing how to do a simple pattern.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top