0

I've been searching the internet for a package which can create a simply global map. There are several which I've searched, webgl globe, kartograph, cartodb, R etc.

None of these have what I'm looking for.

What I'm looking for: I want a map of the globe, which has two colours for the each country. there would be a background colour, then the second colour would fill from the bottom by x percent based on an input. For example, if I created a map of gun owners as a percentage over the US map, the background colour would be cream and the second colour would fill the map 55% which represents the amount of gun owners.

So, basically, the second colour in the map would act like a bar chart which fills the colour of the country by the % being applied to the country/area.

Please let me know if any .js library or which tools might be able to do this.

1 Answers1

0

Just take any SVG map of the world and change every country into a mask with two rects below it. Do the rest with a simple loop and svgTopOfTwoElements.style.setProperty("height", heightPercentage, ""). Just search google for getting started with SVG from javascript (it's practically the same as working with HTML elements). The only possible concern would be that 17% of the users don't support SVG (IE8-), but for the ease of use you get in return I would believe this to be an acceptable price.

David Mulder
  • 26,123
  • 9
  • 51
  • 114
  • That would fill the country completely instead of just a portion – Oktav Apr 29 '13 at 10:23
  • My bad, apologies. You could simply convert the svg countries to masks with a few global replaces and below it have two `rects`. Edited the answer to reflect this. – David Mulder Apr 29 '13 at 10:25
  • Oktav: it would fill just a portion(proportional to the 55% metric) –  Apr 29 '13 at 11:21
  • David Mulder: Thank you for your input, I will look into this –  Apr 29 '13 at 11:22