I want to display a map of the USA with only certain states visible, such as those on the east coast. Is there a way to resize the map area dynamically to show only the selected states?
For example, when I try to display just the east coast states, the full USA map is displayed but remains blank.
Is it possible for highmaps to limit the visible area to a smaller region than the full map? Can it be set to "center on visible area"?
Alternatively, should I provide custom map data that only renders the specific sections of the USA that I want to show on the map?
Example Map:
https://i.sstatic.net/qlelH.png
Example JS:
<!--//--><![CDATA[//><!--
jQuery(document).ready(function () {
var rep_color = 'orange';
var dem_color = '#244999';
jQuery.getJSON("http://maps.example/sites/default/files/geojson-maps/current-usa.geojson", function(geojson_result) {
jQuery(".prez-map.map-1278").slideDown().highcharts('Map', {
chart : {
borderWidth : 1,
borderColor: 'silver',
borderRadius: 3,
shadow: true
},
credits: {
enabled: false
},
title : {
text : ""
},
subtitle : {
text : ''
},
legend: {
enabled: false
},
series: [{
// This is the result of the .getJSON call value which passes it's result to the anonymous function. We will load this Nodes file value URL to get this data.
mapData: geojson_result,
borderColor: 'white',
nullColor: 'white',
allAreas: true,
dataLabels: {
enabled: false,
color: '#FFFFFF',
format: '{point.code}'
},
data: [{"code":"ME","color":"#CC6600"},{"code":"NH","color":"#CC6600"},{"code":"MA","color":"#CC6600"},{"code":"CT","color":"#CC6600"},{"code":"NJ","color":"#CC6600"},{"code":"PA","color":"#CC6600"},{"code":"DE","color":"#CC6600"},{"code":"MD","color":"#CC6600"},{"code":"VA","color":"#CC6600"},{"code":"PA","color":"#CC6600"},{"code":"KY","color":"#CC6600"},{"code":"SC","color":"#CC6600"},{"code":"GA","color":"#CC6600"}],
// Take a key in data and map it to a key in mapData.
joinBy: ['postal-code', 'code']
}]
});
});
});
//--><!]]>