This project serves as a developmental project to hone skills in OpenLayers.js which is an open-source JavaScript library for displaying map data in web browsers, it provides an API for building rich web-based geographic applications similar to Google Maps and Bing Maps

Frontend: project is using React with Webhook and Typescript

Backend: Proxy server is set up using Express and Cors and utilised APIs from Google Maps Services i.e. GeoCoding Api & Distance Matrix Api

Project Features:

• Display Shopping malls as point features on a custom styled map using MapTiler Cloud, the map is configured to centralise onto Singapore
• Upon clicking on a point feature, an overlay is displayed to show details regarding that shopping mall
• User can input an address at the search bar and upon search, user's address will be reflected on the map
• App will connect this point of origin to the various shopping malls and when user hovers over the line, distance and duration between these 2 points are displayed in an Overlay