A few weeks ago, one of our developers created a fascinating map with our tools called the COVID-19 Cruise Tracker. As you can tell by the title, the map keeps track of cruise ships currently at sea. Cruise ships in particular have impacted by COVID-19 so the tracker is particularly useful as a way of seeing what's going on with them. Each ship is tracked along with total passangers and total number of cases.
We decided it would be cool to interview the creator and get some insight into both him and why/how he built the tracker.
HERE: Please introduce yourself and tell us a bit about your background.
EVAN: Hey, I'm Evan, a full stack freelance developer from Sydney, Australia. I generally program in PHP & Vue, writing full stack Laravel apps but I love tinkering with new technologies and trying out cool tools. In the past, I've done fun stuff like getting PHP to run on the client side.
HERE: What gave you the idea to build the Cruise Tracker?
EVAN: When it broke that the Diamond Princess in Japan had hundreds of people on board infected with COVID it quicky became clear that it was the prefect environment for the virus to spread - enclosed spaces, recycled air, everyone touching the same surfaces, etc. About a week later, the Grand Princess off the coast of the United States also reported having a large quantity of people infected with the virus. When I checked a ship tracking tool, there were literally hundreds of cruise ships still criscrossing the oceans, so I decided the build a tool to track them all.
HERE: Can you describe how you built it?
EVAN: I started off with a pretty basic goal - display the cruise ships around Australia with the positive case count on a map marker. I built a quick little serverless function that loaded data from a google sheet (for easy data entry) and added the locations of each ship from marine location data. This quickly progressed into a full blown tracker with tooltips, sidebar, search & worldwide coverage.
It took a little bit of playing around to get everything displaying right, and the icons positioned correctly, but overall the Here JS maps SDK is easy to use and provides pretty much everything you need.
Each "Ship" is created as a marker on the map, and the html is rendered by a few small Vue components. Clicking the ship (either on the sidebar or on the map) shows the tooltip with more detailed information about the ship (passengers on board, case counts, notes & sources for the data).
HERE: Why did you chose HERE?
EVAN: I saw HERE's coronavirus tracker and had a look the through the docs for the map SDK, which seemed to be a good fit for what I was planning on doing. I've previously been scarred by the huge pricing jump on the google js maps, so the generous free tier seemed perfect!
HERE: What worked well?
EVAN: It was super easy to load the SDK and interact with it from inside Vue. With third party Typescript Types, you can get full blown IDE completion and documentation as well!
HERE: What didn't? (We can take criticism!)
EVAN: The markers are a bit hard to deal with (though I am probably abusing them) in the fact that the seem to be very buggy to update when the're out of the map viewport. For example, I want to make the map smoothly transition to the ship, but I couldn't figure out how to only trigger the tooltip to open once it was in view (opening it first causes it to never open since it's not in the viewport).
(Note from the editor - we can work on providing an example of that!)
HERE: What would you like to do next with the project?
EVAN: I'm pretty happy with the feature set at this point, so we'll be keeping it updated with new data for the next month or so while there are still ships out at sea. I might open source the code for those interested, once I get it cleaned up.
HERE: How can developers contact you?
EVAN: You can check out my website at https://atymic.dev, which has my contact information along with other projects and blog posts.
And that's a wrap. A huge thank you to Evan for answering our questions and building a cool tool. If this has inspired you, sign up for your free developer account and you can start building your own maps. Be sure to join our Slack if you need help and check our COVID-19 resources page for additional support.