EHRN: Interactive Google Map Prototype

Interactive Google Map of Eurasia — The map uses custom overlays to delineate each country in the region, throughout the seven subregions, each of which will have summary profiles available online.

A user hovers over the country of Ukraine, causing it to be highlighted on the map. — Above, a user hovers the cursor over the country of Ukraine, causing a label to appear and the country’s overlay to change color from blue to gray. Similarly, if a user hovers over a button for one of the subregions of Eurasia, country overlays turn gray for the entire region.

A user clicks on Ukraine to access a Google Maps infoWindow with information about harm reduction in the country. The country becomes orange, and no longer reacts to hover events. If the user clicks anywhere on the map or in the x at the upper right corner of the infoWindow, the window will disappear, and the country will return to its original shade of blue.

An entire region is highlighted on the map — When a user clicks on one of the subregional buttons, it causes the subregion to be highlighted in orange, and an infoWindow to appear. Like with country infoWindows, the user need click anywhere on the map or in the x in the upper right corner of the window to return the map to its original state. Above, Eastern Europe is highlighted.

'Project' => 'Create a graphic means for accessing country profile information about harm reduction issues for Eurasian Harm Reduction Network, as part of the Open Society Foundations and Parsons Fellowship in Information Design.',

'Challenges' => 'Create an interface that users can interact with to see glimpses of the status of harm reduction in each country and subregion of Eurasia, and then dive deeper to see specifics about any given country or subregion.',

'Solutions' => 'Since we were dealing with geographic regions, I chose a map as a means for seeing country and region borders. I chose Google Maps for a stable, well-managed and cross-browser compatible platform on which to build the interface. I created a grayscale base map with varying shades of EHRN’s corporate blue to highlight each subregion of Eurasia (as overlays, using a database that I found with GPS coordinates for each country’s borders), as well as corresponding buttons to access regional harm reduction profiles. Upon mouse hover over a region’s button or a country on the map, the region or country turns gray. Upon mouse click, it turns orange, and a Google Maps infoWindow appears with a glimpse at pertinant information and a link for the full profile. At the time of the map implementation, Kosovo was not listed as a separate country, so I also created custom labels that also appear on mouse hover.'

);