HK Map Share

Share the Route. Share the City.

Comment

Inspiration

Have you ever seen the crowds of tourists in central Hong Kong? Have you heard of valuable, beautiful places that remain undiscovered by guidebooks? We noticed that most visitors focus only on the city's core, missing out on the diverse experiences spread across all of Hong Kong's districts. Our project was inspired by a simple question: What if everyone could share their local knowledge to create a more complete, community-driven map of the city?

What it does

HK Map Share is a local web application that turns your browser into a personal map-making tool for exploring Hong Kong.

  • Pin Attractions: You can drop custom pins on a map, tag them with a name, description, category (e.g., Food, View, Shop, Hike), and even add photos.
  • Create & Share Routes: Plan your perfect day by connecting multiple pins to create custom walking tours, food crawls, or sightseeing itineraries.
  • Share Your Discoveries: The entire map—all your pins and routes—can be exported as a single .json file. You can share this file with friends, and they can import it into their own copy of HK Map Share to see your recommendations instantly on their map. It's a simple yet powerful way to share your personal Hong Kong guide.

How we built it

We built HK Map Share as a truly portable client-side application that runs entirely in your web browser. The portability comes from its simple file structure - just three files that can be opened directly in any modern browser.

  • Frontend: The core is built with pure HTML, CSS, and JavaScript (ES6+). We used the Leaflet.js library for the interactive map.
  • Data Handling: All pin and route data is managed in the browser's memory using JavaScript arrays and objects. The export function converts this data into a .json file for download. The import function uses the FileReader API to read .json files and load data back onto the map.
  • No Backend Required: Since it's self-contained, it can run directly from your computer's file system without needing a web server. The map tiles load from OpenStreetMap, but all application logic and data storage happen locally.

Challenges we ran into

  • First-Time Web Development: This was our first experience building a complete web application from scratch, which involved learning HTML structure, CSS styling, and JavaScript interactivity simultaneously.
  • Tight Time Constraints: We had limited time to design, implement, and test all features, which required careful prioritization of core functionality.
  • Client-Side Data Persistence: Implementing robust import/export functionality using only browser APIs was challenging without a database backend.

Accomplishments that we're proud of

  • Creating a Self-Contained Tool: We built a fully-functional application that works offline (after initial map load) and can be shared as simple file attachments.
  • Clean, Intuitive UI Design: Despite being beginners, we created an interface with tab navigation, filtering, and clear visual hierarchy that makes map creation accessible to non-technical users.
  • Complete Feature Set: Delivered points management, route creation, and sharing capabilities within our constraints.

What we learned

  • Advanced JavaScript and JSON: We mastered data structure manipulation, FileReader API for client-side file handling, and local storage management.
  • Client-Side Application Architecture: Learned how to build feature-rich applications that don't require server infrastructure.
  • UI/UX Principles: Discovered the importance of intuitive workflows for technical actions like file import/export.

What's next for HK Map Share

  • Mobile Application: Convert the web app into a native mobile app using frameworks like React Native or Capacitor for better mobile experience.
  • Route Optimization and Time Calculation: Implement algorithms to automatically optimize route order and calculate estimated travel times between points.
  • Community Hub: Create a simple website where users can upload and discover .json map files, forming a distributed repository of Hong Kong explorations.
Share this project:

Updates