Coloring a region programmatically based by user selection with Highmaps - Javascript highmap

Javascript examples for highmap:Map

  1. HOME
  2. Javascript
  3. highmap
  4. Map

Description

Coloring a region programmatically based by user selection with Highmaps

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <style id="compiled-css" type="text/css">

#container {/*w w w. j  ava  2 s.c o m*/
   height: 500px;
   min-width: 310px;
   max-width: 600px;
   margin: 0 auto;
}
.loading {
   margin-top: 10em;
   text-align: center;
   color: gray;
}


      </style> 
   </head> 
   <body> 
      <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
      <script src="https://code.highcharts.com/maps/highmaps.js"></script> 
      <script src="https://code.highcharts.com/maps/modules/data.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/mapdata/countries/us/us-all.js"></script> 
      <div id="container"></div> 
      <select name="" id="select"> 
         <option value="OR">OR</option> 
         <option value="CO">CO</option> 
         <option value="NM">NM</option> 
         <option value="NE">NE</option> 
         <option value="MO">MO</option> 
         <option value="AL">AL</option> 
      </select> 
      <script type="text/javascript">
$.getJSON('https://cdn.rawgit.com/highcharts/highcharts/057b672172ccc6c08fe7dbb27fc17ebca3f5b770/samples/data/us-population-density.json', function(data) {
  $.each(data, function() {
    this.code = this.code.toUpperCase();
    this.id = this.code;
  });
  var chart = Highcharts.mapChart('container', {
    chart: {
      map: 'countries/us/us-all',
      borderWidth: 1
    },
    title: {
      text: 'US population density (/km?)'
    },
    exporting: {
      sourceWidth: 600,
      sourceHeight: 500
    },
    legend: {
      layout: 'horizontal',
      borderWidth: 0,
      backgroundColor: 'rgba(255,255,255,0.85)',
      floating: true,
      verticalAlign: 'top',
      y: 25
    },
    mapNavigation: {
      enabled: true
    },
    colorAxis: {
      min: 1,
      type: 'logarithmic',
      minColor: '#EEEEFF',
      maxColor: '#000022',
      stops: [
        [0, '#EFEFFF'],
        [0.67, '#4444FF'],
        [1, '#000022']
      ]
    },
    series: [{
      animation: {
        duration: 1000
      },
      data: data,
      joinBy: ['postal-code', 'code'],
      dataLabels: {
        enabled: true,
        color: '#FFFFFF',
        format: '{point.code}'
      },
      name: 'Population density',
      tooltip: {
        pointFormat: '{point.code}: {point.value}/km?'
      },
      point: {
        events: {
          click: function() {
            var point = this;
            point.zoomTo();
            point.select();
          }
        }
      },
      states: {
        select: {
          color: '#a4edba'
        }
      }
    }]
  });
  var select = document.getElementById('select');
  select.addEventListener('change', (e) => {
      var value = e.target.value,
          point = chart.get(value);
    point.zoomTo();
    point.select();
  });
});

      </script>  
   </body>
</html>

Related Tutorials