A fun and interactive game to learn Melbourne's (and Sydney's) suburbs! Test your knowledge by finding suburbs on the map.
🎮 PLAY NOW 🎮
- Game Mode: Challenge yourself to find 5 random suburbs on the map
- Search Mode: Easily locate any suburb using the search feature
- Interactive Map: Hover over suburbs to see their names
- Score Tracking: Keep track of your performance with a summary at the end
Home screen with city and game/search mode selection
Game mode showing the current suburb to find
End game summary showing your score
Search mode with suburb autocomplete
Built using:
- Vanilla JavaScript (ES Modules)
- Leaflet.js for interactive maps
- Vite for frontend tooling (dev server, build)
- npm for package management
- BiomeJS for code formatting and linting
- Geographical data sourced from OpenStreetMap via Overpass API
The project uses a modular architecture with the following key files in the src/ directory:
app.js- Manages UI elements, event handling, and transitions between application views (hero, game, search).game.js- Contains the core game logic, including round management, scoring, timing, and state tracking.geo.js- Handles fetching and processing of geographical data (suburbs, boundaries) for different cities.main.js- Acts as the main application entry point, initializes the map and game, loads city data, and orchestrates interactions between different modules.map.js- Manages Leaflet map creation, configuration, styling, feature layers, and user interactions (zoom, pan, click, hover).eventbus.js- Implements event bus functionality for decoupled module communication.utils.js- Contains miscellaneous utility functions used across the application.style.css- Provides all CSS styles, variables, layout rules, and animations for the application interface.
The main user interface is defined in index.html in the root directory.
To run the project locally:
- Clone the repository:
git clone https://github.com/graf-semmel/melb-mapper.git
- Install dependencies:
npm install
- Start the development server:
This will open the application in your default browser.
npm run dev
This project is licensed under the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License (CC BY-NC-SA 4.0). See the LICENSE file for details.