Skip to content

World Vector Map

This demo shows how to render a world map with Gross Domestic Product (GDP) statistics for 2013. Hover on any country to see its GDP information. Hover on the map's legend to highlight countries that match the appropriate GDP values. You can also use the upper and lower handles on the legend to filter out countries that are not in the selected range.

If you'd like to see the demo in full screen click here

Review the complete source code and copy/paste it to create your own. 
1
{"action": "import", "url": "../cf-demos/world-vector-map/index.html"}

1
{"action": "import", "url": "../cf-demos/world-vector-map/index.js"}

1
{"action": "import", "url": "../cf-demos/world-vector-map/style.css"}