Interactive Map of Indonesia

A client-side web application featuring an interactive map of Indonesia. Built with vanilla HTML, CSS, and JavaScript — no frameworks, no dependencies.

Users can place pinpoint markers on the map, establish connections between locations with multiple transportation modes, and search for optimal routes based on travel time or cost.

---

Features

Map Interaction

• Full-size SVG-based Indonesia map
• Zoom via Ctrl + Scroll, Ctrl + (+) / Ctrl + (-), or UI controls
• Pan by click-and-drag
• Zoom follows cursor position for precision navigation
• Touch-optimized: pinch-to-zoom and drag on mobile devices

Pinpoint Management

• Double-click anywhere on the map to add a new location marker
• Each pinpoint displays its name, a connect button, and a delete button
• Red map-pin icon with hover animation
• All data persisted in localStorage — survives page reload

Location Connections

• Click the connect button on a source pinpoint, then click the target
• Enter distance (km) and select transportation mode:

Mode	Color	Speed	Cost
Train	#33E339	120 km/h	Rp 500/km
Bus	#A83BE8	80 km/h	Rp 100/km
Airplane	#000000	800 km/h	Rp 1,000/km

• Connection lines rendered in SVG with distance labels
• Multiple connections supported between any two points (different modes)

Route Search

• Persistent sidebar panel on the left viewport
• Search between any two valid pinpoint names
• Results sorted by:
  • Fastest (default)
  • Cheapest
• Displays up to 10 possible routes
• Each result includes:
  • Route name (origin → destination)
  • Transportation steps
  • Total duration
  • Total cost

Deletion

• Click connection line + Delete/Backspace to remove a route
• Trash button on pinpoint removes it and all associated connections

---

Tech Stack

Layer	Technology
Markup	HTML5
Styling	CSS3 (Custom Properties, Flexbox, Media Queries)
Logic	Vanilla JavaScript (ES6+)
Storage	localStorage

---

Getting Started

1. Clone or download the repository
2. Open index.html in a modern web browser
3. No server or build step required

Usage

1. Double-click the map to place a pinpoint
2. Enter a name and click Add
3. Click the connect icon on a pin, then click another pin
4. Fill in distance and transportation mode
5. Use the Find Route panel to search for optimal paths
6. Click a connection line and press Delete to remove it

---

Project Structure

interactive-map/
├── index.html
├── style.css
├── script.js
├── assets/
│   └── map.webp
└── README.md

---

Browser Support

• Google Chrome (latest)
• Microsoft Edge (latest)
• Mozilla Firefox (latest)
• Safari (latest)
• Mobile browsers (iOS Safari, Chrome for Android)

---

License

This project was developed for the LKS Web Technology Competition 2026.