Published on

Unveiling Earthquake Mapper: A Journey through ReactJS, OpenLayers, and CORS Challenges

2 min read
SourceDemo

Introduction

Welcome to the captivating world of Earthquake Mapper, my latest project that brings together the power of ReactJS, OpenLayers, and real-time earthquake data from BMKG's API. As an aspiring web developer, this project presented me with a myriad of challenges and opportunities to sharpen my skills in front-end development and spatial visualization. Join me as I take you through the exhilarating journey of building Earthquake Mapper, exploring the realm of APIs, CORS hurdles, and the valuable lessons I learned along the way.

Earthquake Mapper began as a vision to create an interactive map that displays real-time earthquake data in Indonesia. I chose ReactJS for its flexibility and component-based architecture, while OpenLayers emerged as the ideal mapping library for its robust features and seamless integration with ReactJS. Together, they became the backbone of my project, empowering me to craft a dynamic and visually appealing map interface.

gempa Project Imagegempa1 Project Image

Confronting CORS Challenges: A Roadblock to Real-Time Data

As I sought to access real-time earthquake data from BMKG's API, I encountered the dreaded Cross-Origin Resource Sharing (CORS) issue. Struggling to fetch data directly from the API due to CORS restrictions, I was faced with the realization that my front-end could not directly communicate with the backend of BMKG's server. To overcome this challenge, I installed a CORS extension on my browser, which allowed me to fetch data from the API. However, this was not a viable solution for my project, as I needed to ensure that all users could access the map without installing the extension. For future projects, I reccommend to process the API on the backend to avoid CORS issues.

Conclusion: Building Earthquake Mapper has been a profound learning experience that has expanded my skills as a web developer. Through ReactJS and OpenLayers, I crafted an interactive and visually appealing map that harnesses real-time earthquake data. Confronting CORS challenges taught me the significance of backend solutions for APIs with CORS restrictions, paving the way for future projects.