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:
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!
Written by
This allows a user to view content related to pinned locations on Google maps by clicking or hovering over them. Ant-Design was used to create the popover components which shows date, location, and links related to incidents of police violence in a given area.
Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more
Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore
If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Start a blog