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
