This project demonstrates my skills with third-party libraries by creating a Geographic Pin Map. The inspiration comes from traditional pin maps seen at gas stations, but with a modern, interactive approach.
I chose D3.js for data visualization due to its vast capabilities and high level of control. This library allows for the creation of everything from simple graphs to complex, dynamic maps.
- Uses D3.js to render a dynamic map of the Earth.
- Allows users to add pins by providing their location.
- Implements a WebSocket server using Express.js and Socket.io to synchronize pins in real time.
- Hosted on Glitch, a platform well-suited for projects requiring both a frontend and a backend.
- Locate the geographic data: World GeoJSON dataset.
- Define a projection for mapping coordinates onto the globe.
- Add the map to the DOM using D3.js.
- Use Express.js to serve the frontend.
- Implement Socket.io to handle real-time communication between users.
- Encountered deployment challenges:
- Netlify and GitHub Pages were not viable as they only support static sites.
- Vercel had issues with WebSockets.
- Heroku deployed successfully but lacks WebSocket support.
- Glitch turned out to be the best option, offering an easy and flexible deployment environment.
- Encapsulate the functionality into a reusable custom web component:
<geographic-pin-map server="...server url..." />
- Improve UI/UX for a more interactive experience.
- Add additional pin metadata (e.g., labels, categories, timestamps).
- Explore alternate hosting solutions for better scalability.
This project is a work in progress. Contributions and feedback are welcome!