Center visible HighMaps area

Question

I'm displaying the USA states and using the full USA map from the highmaps collection. If I'm hiding or only showing N states is there a way to resize the rendered map area to zoom or show only the visible area.

An example would be to show all states on the east coast only. Right now the full USA map "area" is shown but it's blank.

Can highmaps limit the visible area to a smaller than full-map-area? Such as "center on visible area?

Or is the preffered way to show sections of the USA to provide custom map data which only renders sections of the USA you want to show on a map.

Example Map:

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']
            }]
        });
    });
});
//--><!]]>

This is something that can be done, but you need to share more details. How do you "hide" those states? Can you share a working JSFiddle? — Roco CTZ, Jun 07 '16 at 00:53
Sorry right now the full code is above. If the state is not in `series.data` it's not "shown" but clearly this isn't the same as removing the the data from the map geofile data ... because all the states area is still considered in the final output to the screen. What the some techniques to do this, because i'm currently not aware of any ... — tenken, Jun 07 '16 at 19:53
maybe you want to see my answer from this question: http://stackoverflow.com/questions/28933713/how-to-zoom-to-specific-point-in-highmaps/28935317#28935317 — Roco CTZ, Jun 07 '16 at 22:46

score 0 · Answer 1 · edited Mar 19 '18 at 12:57

Here is a js fiddle example: https://jsfiddle.net/geogeorge/0aaca5xx/14/

Add the following script to your page header:

<script src="https://code.highcharts.com/mapdata/countries/us/us-all.js</script>

Then, include the code below in your map series section:

   series: [{
    data: data,
    color:"blue",
    joinBy: ['postal-code', 'code'],
    dataLabels: {
        enabled: true,
        format: '{point.name}'
    }
}, {
        name: 'Separators',
        type: 'mapline',
        data: Highcharts.geojson(Highcharts.maps['countries/us/us-all'], 'mapline'),
        color: 'silver',
        showInLegend: false,
        enableMouseTracking: false
    }]

Center visible HighMaps area

1 Answers1