Why sift through endless headlines when you can watch the news unfold on a live map? With MapyNews, real-time events come to life as hotspots, letting you track stories across the globe with just a glance.
Staying informed about global events can be overwhelming, especially when you need to quickly locate relevant information, like what’s happening in London at this very moment. This is where MapyNews, our responsive web application, steps in. MapyNews offers a dynamic dashboard that visualizes news feeds as geographical hotspots and includes an interactive timeline feature that allows users to track how stories evolve in real-time. As older news becomes less relevant, it automatically fades away, making it easier to focus on current events. With real-time updates, MapyNews ensures you're always up-to-date, whether it’s local news or global headlines, all displayed in one comprehensive view.
We utilized React.js to build the interactive dashboard, while news feeds are scraped from The Hindu as mock data using Puppeteer and Node.js. Now, let’s dive into the implementation details of MapyNews and explore its key features.
Technology Stack
React.js: A popular, open-source JavaScript library that powers the interactive dashboard. React allows us to visualize news feeds geographically, placing markers as hotspots on a world map or globe. React’s component-based architecture simplifies the development of dynamic and responsive user interfaces, making complex UI interactions more manageable.
Puppeteer: A JavaScript library providing a high-level API to control Chrome via the DevTools Protocol. Puppeteer was used to web scrape news from The Hindu, enabling us to extract relevant news details. The scraped data is stored in a .csv file for easy access.
Node.js: A cross-platform, open-source JavaScript runtime that runs on various operating systems and allows JavaScript to execute outside the browser. Node.js serves as the runtime environment for the web scraping script, ensuring fast and efficient data extraction.
Key Features of MapyNews
Geographical News Visualization: Users can visualize news feeds as hotspots on either a world map or a 3D globe, simply by toggling a switch button.
Interactive Hotspots: Hotspots are plotted based on the latitude and longitude of the news event's location. A user can click on any hotspot to view the corresponding news feed in detail.
Dynamic Hotspot Sizing: Hotspots grow and shrink in real-time based on news relevance. As a story trends, its hotspot increases in size; as it fades in importance, the hotspot decreases, providing a clear visual cue of current events.
Interactive Timeline: The dashboard includes a timeline feature with play, pause, and resume options. This allows users to see how news hotspots evolve over the course of the day. Pausing the timeline at a particular timestamp gives users a snapshot of world events at that moment, distinguishing between trending and fading stories by hotspot size.
Advantages of Using MapyNews
Real-Time News Tracking: MapyNews offers instant access to news as it happens, with updates dynamically reflected on the dashboard. Users can easily spot trending stories across different regions without sifting through endless articles.
Geographical Context: By plotting news on a map, MapyNews provides geographical context to global events, helping users understand where stories are unfolding and how they relate to each other on a global scale.
Efficient and Interactive Design: With its intuitive interface, MapyNews allows users to interact with news hotspots, adjust timelines, and track the evolution of stories in a seamless and visually engaging way.
Time-Based Insights: The interactive timeline enables users to explore news trends over the course of a day. This feature is particularly useful for identifying patterns in the news cycle, allowing users to pause and review the most relevant moments.
Upcoming Features
Categorical Navigation: We are introducing the ability to navigate news by categories such as politics, business, technology, and more. This feature will allow users to filter the news displayed on the map based on specific topics of interest. By selecting a category, users can focus on relevant news stories, enhancing their experience with a more tailored and organized view of current events.
Timeline Drag Feature: In addition to the existing play, pause, and resume functions on the timeline, we are introducing a drag indicator. This feature will allow users to manually scroll back in time, enabling them to explore news from earlier in the day or previous days with ease.
