Javascript examples for highmap:Map
Coloring a region programmatically based by user selection with Highmaps
<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>