Where We Work (Map / Regions)

“Where We Work” Module → https://www.figma.com/file/IdaocPKZYLeadqsWjgIVn8/IFES---Visual-Design---Production?node-id=992%3A38767

amCharts packages and license → https://blenderbox.atlassian.net/wiki/spaces/IFFES/pages/2131984403/DataViz+with+amCharts

Countries Map should be built with the pulsating bullets effect. See demo → https://www.amcharts.com/demos/map-with-pulsating-bullets/

Clickable Links in Tooltips → https://www.amcharts.com/docs/v4/tutorials/clickable-links-in-tooltips/

Region Maps (SVG) → https://drive.google.com/drive/folders/1z7qycglqHRoAylAJHwam8bzvLirgLNF-?usp=sharing

Implementation notes:

  • Regions will have field_region boolean field marked as TRUE

  • Each Country should have field_latitude and field_longitude filled with values matching coordinates of Country capitals.

  • Pulsating dots are colored according to the “Activity Status” for each Country: Current Field Offices, Current Activities, Past Programming.

  • When the pulsating dot is hovered over, it displays a tooltip with the Country Name, Tooltip Text, and a link to Country taxonomy term page.

  • Country Terms that have field_regions or field_exclude marked as TRUE, do not appear on the map.

  • If Country does not have Latitude/Longitude coordinates, it does not appear on the map.

Interactive Country Maps:

  • Interactive Map of Countries should have the following options:

    • Display All Countries on the map

    • Display Countries from one selected Region (field_region_selection)

    •  

Regions Cards

  • when added to page, the paragraph should render Region Cards that show an SVG map outline saved in field_region_map and link to the taxonomy term page.

  • display all regions that have field_region marked as TRUE

  • regions are displayed in the order which is set in the taxonomy as term weight

 

Acceptance Criteria

the module loads a full world map with pulsating dots for each Country from the Countries Taxonomy Vocabulary (not regions or Global term)

countries are loaded based on the Region selection (Global for all countries)

if only one of the two sections (Country Map or Regions Cards) is  added to the module, then tabs do not display. If both hare added, the Tabs allow the user to switch between the map and region cards

the module (and tabs within it) are styled according to the styleguide and uses responsive layout

the module is added to the accessibility scanner and passes tests