Introduction
Hey! So I am a print designer. I discovered the world of web development last summer. What I find exciting in this media is two things.
How the layout is fluid. It occupies space in a different manner, changes size and colour from device to device. Or as you change the browser window size.
How you can output the data. You don't have to create charts, set circle size and so on manually. You just feed the data and tweak how to display it.
Here is another one of my projects.
The plan was to...
use public map API
output the data over the map
create a responsive layout
Main resources
The website displays a running trail with Polyline object and the trail info with InfoBox
Google Maps Javascript API official docs
Thare are lots of libraries for using Google Maps in React. I went with @react-google-maps/api
You can go winamp with your map using snazzymaps.com themes
Leigh's channel was the main reference. Google maps, Mapbox, clustering and tons of other React stuff there
Learned a thing or two in the process
So yeah, I figured out how to use Google Maps API in React
Convert GPX running tracks to GeoJSON format
Import json data to React components
Refreshed memory on importing images / using them as CSS background in React
Practiced splitting an app to components / helper functions in separate files
Created responsive layout with media queries and a burger menu
That was fun!
Known issue
The InfoBox does not appear after clicking the navigation menu and going back to the home page.
I admit that this is beyond my understanding of React / Google Maps inner mechanics at this point.
If you feel like investigating you may find the issue following this link
Anyway
Here is my twitter.
See you around! 👹
Top comments (0)