highcharts / map-collection-dist

Other
29 stars 37 forks source link

US map showing states merged to show as the regions #80

Open ravijaiswal7 opened 3 years ago

ravijaiswal7 commented 3 years ago

I have a use case where I need to separate US map by census region(Northeast, Midwest, South, West) and Nielsen region(Northeast, East Central, West Central, South, Pacific) using border, after searching a lot I did not find any such feature. could you please add a new map in collection showing states merged to show as regions. US_Map_Census_Region

KacperMadej commented 3 years ago

Hi @ravijaiswal7

Thank you for reporting the issue.

The image you have attached is not clear as to how states are merged. Could you point us to information sources for the divisions for both census regions and Nielsen? I have some suggestions below.

The source for the census regions map could be this one: https://www2.census.gov/geo/pdfs/maps-data/maps/reference/us_regdiv.pdf

For the Nielsen regions map, I'm not able to find a good source. Here's a 5 regions division: https://www.nationalgeographic.org/maps/united-states-regions/ but "Nielsen" is not mentioned there.

ravijaiswal7 commented 3 years ago

Hi @ravijaiswal7

Thank you for reporting the issue.

The image you have attached is not clear as to how states are merged. Could you point us to information sources for the divisions for both census regions and Nielsen? I have some suggestions below.

The source for the census regions map could be this one: https://www2.census.gov/geo/pdfs/maps-data/maps/reference/us_regdiv.pdf

For the Nielsen regions map, I'm not able to find a good source. Here's a 5 regions division: https://www.nationalgeographic.org/maps/united-states-regions/ but "Nielsen" is not mentioned there.

Hi Kacper,

Attaching new image along with states comprising of each region. Both for census regions and nielsen regions.

census regions:

image

nielsen regions:

image

My main purpose is to show thick borders segregating each region from each other.

attaching map as alone for better view:

census region:

image

nielsen region:

image

ravijaiswal7 commented 3 years ago

Hi @ravijaiswal7 Thank you for reporting the issue. The image you have attached is not clear as to how states are merged. Could you point us to information sources for the divisions for both census regions and Nielsen? I have some suggestions below. The source for the census regions map could be this one: https://www2.census.gov/geo/pdfs/maps-data/maps/reference/us_regdiv.pdf For the Nielsen regions map, I'm not able to find a good source. Here's a 5 regions division: https://www.nationalgeographic.org/maps/united-states-regions/ but "Nielsen" is not mentioned there.

Hi Kacper,

Attaching new image along with states comprising of each region. Both for census regions and nielsen regions.

census regions:

image

nielsen regions:

image

My main purpose is to show thick borders segregating each region from each other.

attaching map as alone for better view:

census region:

image

nielsen region:

image

Hi Kasper,

To re frame my question there should be a way to customize regions. today's use case is to show census regions and nielsen region comprising of some states. some other day we may combine few states to call it as some other regions and segregate from other regions using a thick border. I hope I have framed my question correctly now.

KacperMadej commented 3 years ago

Generating outlines for selected or listed features to be placed on top of a map to show regions through borders and labels. This is how I understand the request - please correct me if I am wrong.

Why in the census region map Midwest and South have the same color? is this a single region?

ravijaiswal7 commented 3 years ago

Generating outlines for selected or listed features to be placed on top of a map to show regions through borders and labels. This is how I understand the request - please correct me if I am wrong.

Why in the census region map Midwest and South have the same color? is this a single region?

Yes you are correct in your understanding. Please ignore the colour, it seems like same but they are different shades of blue coming from color axis out of some range. Midwest and South are different region. In general we should be able to combine or group any states to form any custom region and these regions should show a label and separated by thick border/outline from each other.

KacperMadej commented 3 years ago

This seems like a bigger feature and will require more than a few hours of development to get even a decent PoC. If you will provide a base map name and regions listed with the base map features (e.g. states for the USA map) and custom fields (name, id, etc. - most of them are optional, but names are required and id/hc-key will be useful) then we could generate a new map for you (from our sources using the map generator) that could be placed on top of the base map to get something like this: http://jsfiddle.net/BlackLabel/58cn4puw/ (this just to show the rough idea - if you zoom the difference caused by using maps with different levels of details are very noticeable, but a new map with the same source as the base map will have matching outlines)

Internal note: Creating a universal solution would require support for all feature types and adding a code that could create correct paths for merged features. It is currently faster to generate a new map instead. However, this feature would be helpful for a dynamic generation of many different maps that have small differences between them - e.g. a world map with some regions added to one country or another (disputed areas), custom regions of any sort on any map.

ravijaiswal7 commented 3 years ago

Hi @KacperMadej ,

I did not understand what you are asking in the above comment. however I am leaving my organization so marking my colleague in this thread so he will provide you all the details and take help from you. @6991vaibhav will take it forward from here.

6991vaibhav commented 3 years ago

Hi @KacperMadej

The solution we are looking for is : can we define group of states as a custom region so that we can highlight the outer border surrounding those states. say I wanna show custom region comprises of two states 'North Dakota and South Dakota' so that I will highlight the outer Border for these two States. image

Same way I should be able to group any states and highlight their outer border.

KacperMadej commented 3 years ago

Here's a PoC (code doesn't look great, but should work well enough to show the concept): https://jsfiddle.net/BlackLabel/mf38ezwy/1/

Each region is a different series. Each series has an SVG filter applied to create an outline (thanks to https://stackoverflow.com/a/49694939/4046096).

In the demo a label with x/y position is added to allow adding labels for the chart - the green label in the chart for the green region was added using this part of the code.

More filters for different colors and line widths could be added and more regions could be highlighted. It all depends on chart data, so this is a flexible and dynamic solution.

@6991vaibhav @ravijaiswal7 Please give it a try and we could work forward improving this way of solving the problem or look for another.

Internal note: Performance could be better if the path shapes were generated once and used in a chart (in a similar way as map outlines are loaded from the map source files), but that solution won't be dynamic by default and when it will be dynamic then it might no longer have a noticeably better performance when outlining the regions.

6991vaibhav commented 3 years ago

@KacperMadej Thanks for the solution. I tried the above solution and I am able to customize the region with set of states.