Pages

Saturday, November 19, 2016

WorldMap Cosmetics

Aloha again,

Remember the the world map control that I've created during JavaOne? Because it is based on high resolution SVG data the map is big (from a memory point of view). Sometimes you need high res but sometimes you don't...long story short...I've created also a low resolution version of the map.

Here is a little screenshot that shows both maps (the upper one is the low-res version and the lower one the high-res version)...



At the moment both maps are in the same repo which you can find on github

Oh and before I forget to mention it, there is now also support for CSS styling available.

That's it for a Saturday morning...now I need more coffee ;) 

*** UPDATE ***
More fun on a Sunday morning... :)

I've added the possibility to visualize locations by their latitude and longitude. With this you could mark locations like airports, cities etc. At the moment the indicator is just a simple circle but I might change this in the near future. It would be cool if one could also use icons like fontawesome etc. to visualize the location (maybe I'll be able to implement this next week).
Here is a screenshot that shows some major airports on the world map...




Oh and be warned that there will be modifications coming soon...just need more time :)

*** UPDATE 2 ***
Like mentioned there have been more modifications but now I guess the world map component is ready to go. At least I have no further ideas anymore at the moment.
Here is a list of changes that I did...

  • got rid of the scalable content pane
  • moved the SVG paths to property files
  • added support for Ikonli icons
  • added mouse wheel zooming at mouseposition
  • added selectable countries
  • added zoom to country method
  • mouse handler support for locations
  • clean ups

Here is another screenshot...




*** UPDATE 3 ***

The more I play around with it the more ideas are coming... :)
While I was skimming the web for some new ideas I saw some worldmaps in business dashboards where they use it to visualize regions like APAC, EMEA etc.
So I thought it might be useful to support those business regions and add some convenience methods to handle them.



On the map above you see the European Union (in it's current state) colored and centered. To get this view you simply have to call two methods now...


BusinessRegion.EU.setColor(Color.rgb(124, 208, 255));
world.zoomToRegion(BusinessRegion.EU);

I thought this might be useful for dashboard kind of things so you will now find a new enum called Business Region which contains the following regions

  • AMERICAS
  • APAC
  • APJC
  • ANZ
  • BENELUX
  • BRICS
  • DACH
  • EMEA
  • EU
  • NORAM

Because I do not know which other business regions could be useful I've also added the possibility to add your own region by using the new CountryRegion class. So if you would like to create a region with the countries Belgium, Netherlands and Luxemburg (which are the Benelux) you can do this with the following line of code...

CountryRegion myRegion = new CountryRegion("BENELUX", BE, NL, LU);

There is one little problem at the moment when zooming to the region APAC. Because  APAC contains countries on the very right and left of the map (this is related to the used Mercator projection) which makes zooming in not really useful.

If you have other needs or ideas on how to improve the world map control, please let me know :)

So feel free to use it for what ever you need it...

And don't forget...keep coding...

2 comments:

  1. This is very nice, great work! Question, where did you get the country border information? My thought is that country borders change with time and I would like to have the option to update the border locations as needed. I normally get geo-political information from sources like NOAA.gov and USGS.gov.

    ReplyDelete
    Replies
    1. The border information was extracted from a svg file and can be found in a property file (one for high- and one for lo-resolution). Those files contain the country paths in svg notation for each country.

      Delete