Creating Popovers with Ant-Design for Google Maps
In an attempt to push social justice reform in the right direction, Human Rights First, a nonprofit has encouraged individuals and groups alike to step up to address the inequalities and brutalities that have become common in this country. My team and I have worked with Human Rights First to provide clear insight into the police brutality that has been going on around the country by those whose job is to protect and serve their citizens. We want to make these instances of violence clear for journalists, protesters, and lawyers so that they can help create lasting change.
To do this, we have created a map visualization which allows users to view these incidents by simply clicking or hovering over pins all over the United States which will show embedded video links of police violence. We broke down our roadmap by creating user stories. From start to finish, we wanted to emulate exactly how a user will enter the site, and how they would navigate through it. Then for each user story, we broke down the technologies that would be required to make this a reality, starting with Frontend technologies and working through the backend technologies.
The user story that we will be discussing involved creating a popover component which holds this data of police violence within each pin drop.
This allows the user to view embedded links from twitter, reddit, etc. which show incidents of police violence by clicking on a baton (pin drop) on google maps where that incident occurred. This was created by using card components with ant design which pops up by either clicking it open or hovering over that item. Handle changes were used to allow the user to click the component open and closed, as well as to present that card by hovering. Within the card component, we show the location, date, and evidence of those incidents through embedded links.
The end result looks like this:
Technical Overview
To make the above image a reality, we considered a few different implementations before settling on what you see. Initially, we attempted to use the InfoWindow feature with GoogleMapsReact but it required more coding and many challenges to to render the desired result. Since we were encouraged to use Ant-Design, we settled on using a Popover component to render the card which was much simpler to implement. To achieve the desired result, we needed to set useState for clicks and hovers
and then create handleChanges for when a user clicks on a pin(incident) to open the popover, closes the pin(incident), or hovers over the incident.
Next we need to create a function to render the data. We call our function linkStore which has a simple if statement that says if the length of the evidence(link to police violence) is greater than 0, return that data by mapping through the “link” and set links as objects within an anchor tag.
After this, we had wanted to show new data at the top, so if we find new evidence of violence, users don’t have to scroll down to see this. For this, we used unshift to bring this evidence to the front of the array like so:
Finally, we needed to pass this data or content if you will (see above) into our popover component. We ran into slight complications with how to create a hover and click within the popover component. We fixed this by creating a component within a component, starting with the hover handleChange in the parent component and the click handleChange within child component. We also passed props down from our data to include the location(title) and date of the incident, so that the user knows when these events occurred. Lastly, we used an image of a baton to replace the standard pin drop which I thought was clever and more indicative of what the user would be looking at.
Project Progress So Far
List of Shipped Features:
- Consent form that a user must agree to before viewing potentially violent information with the option of continuing to homepage or being redirected to humanrightsfirst homepage.
- Map visualization using Google Maps API
- Pins for incidents of police violence
- Ability to hover or click on these pins to show a popup of location, date, and embedded links to footage of the incident.
- Search bar that directs the user to the location that they type in on the map (New York, New York) etc.
- Mobile version responsiveness for map visualization page
Gif of Consent form functionality
http://g.recordit.co/CuZT4oxke5.gif
Gif of Map Visualization functionality
http://g.recordit.co/t8NljgCC6T.gif
Features to be Made in the Future
When looking ahead at what features we’d like to implement in the coming weeks, we decided to replace the batons which represent our pins of incidents as google map pins. We felt that it would be more professional and it would also allow us the ability to put numbers within the pin that can indicate to the user, the number of incidents within that pin. Another feature we’d like to add is responsiveness to the consent form page as well as a design change. Currently it is an all black page and card component. We would like to make the “continue” button more prominent with a blue tint and the “take me away” button to be a bland gray as well as a few margin alignment changes. We would also like to improve our search bar feature by centering to the searched location. Finally, we’d like to add clustering to our pinned incidents so that the user doesn’t see a large jumble of pins in the same area but rather one big pin which breaks up into smaller pins as the user zooms in.
Challenges in the Future
As far as potential challenges, I could see clustering being challenging to implement as well as our Google Maps API once we receive the data from our Data Scientist team. These features have been partially implemented but will need to be changed once we receive that data.
Lessons Learned
Feedback from my labs team has been great and really helpful towards improving my skills as a developer. A piece of feedback that I heard more than once was to be more assertive in my requests to work on certain projects. I can be agreeable and open to doing many things but I have been working on improving my voice in regards to which way the project should go as well as which projects I contribute to. This project has really helped me learn how to work with a team and plan a project from the ground up. Labs has given me real world experience to improve not only my programming skills but also my ability to collaborate with others.
I hope this article was helpful to you and good luck building your own popups!
