interactivemapdemo's Introduction

Interactive Map demo

This is sample app to demonstrate the plotting of various points on the Map and filter specific informations via charts. Data converted and stored in normalised format to provide filtering efficiently on the front end side. The demo app works for a specific CSV file format to get meaningful information of rides.

How it works

Upload CSV containing data of travel between two location points (demo file to be uploaded).
Once the data is uploaded, all booking locations are displayed in Map as clustures.
Below the map are some story charts indicating some insights from the given data.
Click on the chart values to filter the plotting on the map.
Click the button on top right to reset the filters and go back to ploting of all points

Currently user can see filters for

What type travel plans are booked by users
What are the different different packages that the users are using the most

Bugs!!

Please use Safari or Firefox For best results for plotting almost 50k points on the map using the above library. Current version of chrome has some issue in plot the markers for large numbers Leaflet/Leaflet.markercluster#951
No loader shown if big csv file is loaded

Tech

This project uses a number of open source projects to work properly:

ReactJS - A JavaScript library for building user interfaces
Redux - Official React bindings for Redux
Leaflet - Library for mobile-friendly interactive maps
Leaflet.markercluster - Marker Clustering plugin for Leaflet. It allows a meaningful way to plot huge amount of markers on the map.

Installation

This project requires Node.js v10+ to run.

git clone https://github.com/Rinkuk1993/interactiveMapDemo.git

Install the dependencies and devDependencies and start the server.

$ cd interactiveMapDemo
$ npm install

$ cd interactiveMapDemo
$ yarn

Development

Open your favorite Terminal and run these commands to run. npm start

Building from source

For production release npm run build

Todos

Adding more filters
- To show where more cancellations are happening
- When is the peak time of booking
- Which are the top 10 users booking frequently so any coupons / discount can be provided
Add loader after uploding big CSV file
Upload demo CSV to git

interactivemapdemo's People

Contributors

Watchers

interactivemapdemo's Issues

Security fix

Top 10 users booking frequently so any coupons / discount can be provided

Upload demo CSV to git

Data Description
● id - booking ID
● user_id - the ID of the customer (based on mobile number)
● vehicle_model_id - vehicle model type.
● package_id - type of package (1=4hrs & 40kms, 2=8hrs & 80kms, 3=6hrs & 60kms, 4= 10hrs
& 100kms, 5=5hrs & 50kms, 6=3hrs & 30kms, 7=12hrs & 120kms)
● travel_type_id - type of travel (1=long distance, 2= point to point, 3= hourly rental).
● from_area_id - unique identifier of area. Applicable only for point-to-point travel and
packages
● to_area_id - unique identifier of area. Applicable only for point-to-point travel
● from_city_id - unique identifier of city
● to_city_id - unique identifier of city (only for intercity)
● from_date - time stamp of requested trip start
● to_date - time stamp of trip end
● online_booking - if booking was done on desktop website
● mobile_site_booking - if booking was done on mobile website
● booking_created - time stamp of booking
● from_lat - latitude of from area
● from_long - longitude of from area
● to_lat - latitude of to area
● to_long - longitude of to area
● Car_Cancellation - whether the booking was cancelled (1) or not (0) due to unavailability of a
car.