CoffeeMap - Coffee Venue Map (MVC Version)

Project Description

CoffeeMap is an interactive map project showcasing coffee-related venues around the world. This version utilizes MVC architecture and incorporates JSON for data storage, along with Chart.js for visualizing statistics related to coffee venues. Users can explore various coffee culture venues, such as coffee exhibitions, coffee competitions, coffee factories, and training centers, all displayed on an interactive map powered by OpenStreetMap. This version also includes data-driven insights presented in the form of charts to enhance the user experience.

Installation and Usage

1. Clone or download this repository:

   bash
   複製程式碼
   git clone https://github.com/TANANIS/CoffeeMapMVCv2.git
   

2. Install the required dependencies (if any), including setting up a local or cloud-based environment for serving MVC applications.

3. Navigate to the project folder, which contains the MVC structure, with controllers, models, views, and static files like HTML, CSS, JS, JSON, and Chart.js.

4. Open the index.cshtml file to view the coffee venue map and its related statistics in your browser.

5. To modify the map's features or charts, edit the corresponding controller logic (for data handling), view (for layout), and JavaScript (for map and chart visualization).

Features

• Interactive Map: Displays coffee venues using OpenStreetMap. Users can pan, zoom, and click on markers to view venue details.
• Data in JSON Format: Coffee venue information is stored in a JSON file for easy updates and management.
• Chart.js Visualization: Data related to coffee venues is visually represented using charts (e.g., venue statistics, event popularity).
• MVC Architecture: Follows Model-View-Controller architecture to separate concerns and improve maintainability.

Technologies and Tools

• HTML/CSS: Used for website structure and styling.
• JavaScript: Powers the interactive map and chart functionalities.
• JSON: Stores coffee venue data, allowing for easy updates and management.
• Chart.js: Used to display visual data such as statistics and event charts.
• OpenStreetMap: Map service used for displaying the coffee venues.
• Leaflet.js: JavaScript library for embedding and interacting with OpenStreetMap data.
• ASP.NET MVC: The framework used for structuring the application.