Map with pattern fills

author(s): Øystein Moseng

by prateekbansal07

HTML

<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/maps/modules/offline-exporting.js"></script>
<script src="https://code.highcharts.com/maps/modules/pattern-fill.js"></script>
<script src="https://code.highcharts.com/maps/modules/accessibility.js"></script>

<div id="container"></div>

CSS

#container {
    height: 500px;
    min-width: 300px;
    max-width: 800px;
    margin: 0 auto;
}

JavaScript

(async () => {

    const topology = await fetch(
        'https://code.highcharts.com/mapdata/countries/us/us-az-all.topo.json'
    ).then(response => response.json());

    // We use a darker border for some states
    var darkBorderColor = '#ccc';



var dx=[];
var EM=[];
var Ven=[''];
var American_Indian=[''];

var Black =[''];
var cervical=['']

for(var i=0;i<topology.objects.default.geometries.length;i++)
{
	var d=topology.objects.default.geometries[i].properties.name;
  var p=[];
  p.push(d);
 	p.push("#e6e696");
  if(EM.indexOf(d)>-1)
  {
  p[1]="#15906e";
  }
     if(Black.indexOf(d)>-1)
  {
  p[1]="#1f5490";
  }
   if(cervical.indexOf(d)>-1)
  {
  p[1]="#5e2750";
  }
   if(Ven.indexOf(d)>-1)
  {
  p[1]="#cd1e41";
  }
   if(American_Indian.indexOf(d)>-1)
  {
  p[1]="#5a6175";
  }

   p.push("black");
  dx.push(p);
}


    // Define the data, linking flags to each point's color.pattern.image. We
    // specify a smaller border width for the smaller states. For some states we
    // also specify an explicit x/y offset for the images, where the default is
    // not satisfactory. Aspect ratio is provided in series definition, and the
    // width height for each image is calculated automatically based on that and the
    // bounding box of each state.
    var data = dx;

    // Create the chart
    Highcharts.mapChart('container', {
        chart: {
            map: topology,
             backgroundColor: '#4b96af'
        },
				credits:{
        	enabled:false,
        },
        title: {
            text: ''
        },     

        // Add zoom/pan
        mapNavigation: {
            enabled: true,
            enableDoubleClickZoomTo: true,
            buttonOptions: {
                verticalAlign: 'bottom'
            }
        },

        // Limit zoom
        xAxis: {
            minRange: 3500
        },

        // We do not want a legend
        legend: {
            enabled: false
        },

        // Make tooltip show full image
       ...