Friday, January 13, 2017

Friday Fun XLIII

Aloha,

Today it's just a short post but I thought it might be of interest for one or the other. Two days ago the idea came to my mind that it might be fun to combine my world map control with my heat map control. To be honest I had no idea where I could use it for but I thought it might be useful for some cases.
So I was skimming the web for use cases and found a couple of them which let me create this little fun control for you.
In principle it is the world map from this post that now also contains a heat map from this post. The world map has all features as the original version, the only difference is that the hover effect and selection effect is disabled by default. But you can enable it if you like.
I was surprised how easy it was to combine both maps into one and so the whole creation took me around 30min. The harder part was to find some data that I can use to test the capabilities of the combined map. 
The problem was that I needed data that came with latitude and longitude coordinates and in the end I found a simple list that contains around 7000 cities with their latitude/longitude coordinates.
The idea of the heat map is to visualize some kind of hot spots on a map. The hot spots become bigger the more "events" are in the same area. Long story short, here are some screenshots of the same data using different heat map settings...




As you can see the visualization depends on the used color mapping (color gradient from center of an event to the outside) and the event radius (size of each event).
The code to generate the upper heatmap looks as follows...

worldMap = WorldBuilder.create()
                       .resolution(Resolution.HI_RES)
                       .zoomEnabled(false)
                       .hoverEnabled(false)
                       .selectionEnabled(false)
                       .colorMapping(ColorMapping.BLUE_YELLOW_RED)
                       .fadeColors(false)
                       .eventRadius(3)
                       .heatMapOpacity(0.75)
                       .opacityDistribution(OpacityDistribution.LINEAR)
                       .build();

Where the code for the lower heatmap looks like this...

worldMap = WorldBuilder.create()
                       .resolution(Resolution.HI_RES)
                       .zoomEnabled(false)
                       .hoverEnabled(false)
                       .selectionEnabled(false)
                       .colorMapping(ColorMapping.INFRARED_3)
                       .fadeColors(false)
                       .eventRadius(5)
                       .heatMapOpacity(0.75)
                       .opacityDistribution(OpacityDistribution.EXPONENTIAL)
                       .build();

If you would like to see only the hot spots without the base background color you simply have to set fadeColors(true) and you will get something like this...


In principle that's all I have to share with you today and I hope it might be useful for some of you.
As always you can find the code over at github, so feel free to fork it and use it :)

Oh and do not forget...keep coding ;)

2 comments:

  1. Great work! Do you think we can turn it into a scrollable, zoomable 2D map in such a way that I can see the complete Antarctica and North pole and the left and right are seamless ?

    ReplyDelete
    Replies
    1. Hi there, well the worldmap is zoomable but it's not activated in that demo. I did not implement pan but you could also use zoom to country or zoom to region. I did not test it with the heatmap but if I'll find some time this week I'll give it a try.
      Cheers,
      Gerrit

      Delete