ashish-kj / pwc_html

PwC_HTML

Welcome to our Project made with the help of API System. Thanks to PredictHQ events API and MAPBox for providing such a brilliant api solution.

Objective: The main purpose of making this project is to search the event organized by various parties in UAE.

Working Model:

Step 1: Let us first open our index.html. This page is just an intro page to display some basic information.

Step 2: This page mapview.html is the backbone of the project. The flow of the project is very simple as explained below. On page load, we just load an empty map generated via Mapbox with the specific Lat and Lng of UAE with a zoom level 12. After creating a blank map, we use an API to get all Categories and Labels which is now populated to show in Search filter box just above the map. After that, we select various parameter to build our search and finally, we click on Search button. Seach button, first populate the filter and build an url which is now being called by fetch method of javascript and the JSON values returned by the api is now sent for generating Markers on map.

Concept is simple, on each request we clear the map markers from the Map and put a fresh new marker values as per the values in response.

Technologies we use: HTML, CSS, Vue.js

Credit: Bootstrap - for layout generation Google Font - for specific font Font Awesome - For icon to be shown on web page Vue - A Javascript library which is being used for core functionality.

Thanks

• Ashish Kumar Jha
• 2018A7PS0173U