Regional Information Visualization Platform "Machishiru"

Inspiration

Initially, the idea was to use Google Maps, which users are familiar with, to view information necessary for disaster response. Since the accuracy and usability of the information available varies from municipality to municipality, there was concern that it would be time-consuming to search for various information in an emergency. Therefore, we decided to create a highly usable map by visualizing the information on a map.

What it does

1. System Overview Machishiru (Know Your Town) - Regional Information Map Visualization Platform A web application for local governments that displays various regional information on a map, allowing users to intuitively obtain information.

2. Front-end Functions (Next.js)

*2.1 Map Display Functionality *

-Google Maps API integration: Interactive map display
-Marker display: Color-coded markers for each information layer
-Circular display: Display of photochemical smog impact areas
-Boundary line display: City and district boundaries
-Zoom and pan operations: Map scaling and panning
-Marker click: Display of detailed information

2.2 Information layer management

-Photochemical smog information: Color-coded by level (green → yellow → orange → red → purple) -Tourist information: Crowd level, business hours, description -Disaster waste disposal facilities: Facility type, capacity, business hours -Water pipe information: Condition, material, diameter, inspection information -Road closure information: Importance, reason, period, alternative route -Product inventory information: Store information, product list, inventory status

2.3 Left sidebar functions

-Information layer selection: Show/hide toggle -Filtering function: Detailed filter by layer -List view: List of filtered locations -Search function: Search by location name or address -Legend display: Legend for each layer

2.4 Right sidebar functions

-Display detailed information: Detailed information about the location -Registration Function: Register new location information -Edit Function: Edit existing location information -Delete Function: Delete location information -Image Upload: Base64 encoding and automatic compression -Product Management: Add, edit, and delete inventory products

2.5 Header Function

-Search Box: Location search (PC only) -Multilingual Support: 6 languages (Japanese, English, French, Chinese, Korean, Spanish) -Data Update: Real-time data reload -Responsive Design: Mobile and desktop compatible

2.6 Data Management Functions

-Firebase Firestore Integration: Real-time data synchronization -CSV Export: Export all data in CSV format -Duplicate Data Removal: Automatic duplicate detection and deletion -Data Initialization: Automatic sample data generation

4. Database Functionality (Firebase Firestore)

4.1 Data Structure

-points collection: All location information -Classification by type: smog, tourist, disaster, water pipe, road closure, inventory -Geographic information: Latitude, longitude, address -Metadata: Creation date, update date, document ID

4.2 Details by Data Type

-Photochemical smog information -Level (1-5) -Measurement date and time -Area affected -Tourist information -Congestion level (1-5) -Business hours -Congestion status explanation -Peak hours -Recommended visiting hours -Disaster waste disposal facilities -Facility type -Acceptance capacity -Business hours -Types of waste accepted -Water pipe information -Pipe type -Year of installation -Last inspection date -Next inspection date -Condition -Diameter -Material -Road closure information -Importance -Reason -Start date -End date -Area affected -Alternative route -Product inventory information -Store name -Store type -Product list -Inventory -Price

6. User Experience Features

6.1 Interaction

-Drag & Drop: Map operation -Click operation: Marker selection -Form input: Information registration/editing -Real-time updates: Data synchronization

6.2 Responsive Design

-Desktop: 3-column layout -Mobile: Swipe drawer format -Tablet: Adaptive layout

6.3 Accessibility

-Multilingual Support: Support for 6 languages -Keyboard Operation: Accessibility Support -Screen Reader: Voice Reading Support

7. Data Processing Features

7.1 Image Processing

-Automatic Compression: Automatic compression to less than 1MB -Base64 Encoding: Firebase Storage Support -Preview Function: Confirmation before upload -Format Support: JPEG, PNG, GIF, WebP

7.2 Data Conversion

-CSV Export: Export all data -BOM-UTF8 Support: Prevent Japanese character encoding issues -Complex Data Support: Array and nested object processing

7.3 Search and Filtering

-Full-text Search: Search by location name or address -Layer-based Filter: Filter by type -Advanced Filter: Filter by conditions

How we built it

Built using V0 and Cursor vibration coding.

Challenges we ran into

We struggled with refactoring because data update processing became complicated due to an increase in information layers as we tried to respond to various needs. (We also learned many lessons and identified areas for improvement regarding instructions to generative AI.)

Accomplishments that we're proud of

This system has enabled us to establish connections with various local governments. We were able to build our first Google Maps-based service as a company.

What we learned

High expectations for Google Maps from users in various industries. (The biggest appeal is that it is a familiar tool that users are accustomed to using, and many users appreciate the convenience of having information consolidated in one place.)