Buat sebuah aplikasi web sederhana bernama **Simple GIS Map Editor**.
### Tujuan
Aplikasi digunakan untuk membuat dan mengedit objek geografis di atas peta, yaitu:
* Point
* Polyline
* Polygon
Setiap objek memiliki **attribute/data yang fleksibel**.
### Layout
Gunakan layout desktop yang modern, clean, profesional, dan mudah digunakan.
**Sidebar kiri**
* Lebar sekitar 320–380px.
* Menampilkan informasi objek yang sedang dipilih.
* Jika tidak ada objek yang dipilih, tampilkan informasi umum peta.
* Attribute ditampilkan dalam bentuk key-value.
* User dapat menambah, mengedit, dan menghapus attribute.
* Attribute harus fleksibel, tidak menggunakan field yang fixed.
**Area kanan**
* Peta memenuhi seluruh area yang tersisa.
* Peta menjadi fokus utama aplikasi.
* Gunakan tampilan modern seperti aplikasi GIS profesional.
### Basemap
Sediakan pilihan untuk mengganti basemap, misalnya:
* OpenStreetMap
* Satellite
* Terrain
* Light
* Dark
Buat tombol/dropdown **Basemap** di bagian atas peta.
### Drawing & Editing
User dapat membuat objek langsung di dalam peta:
1. **Point**
* Klik pada peta untuk membuat point.
* Point dapat dipindahkan.
* Point dapat dipilih untuk melihat attributenya.
2. **Polyline**
* User dapat menggambar garis dengan beberapa titik.
* Polyline dapat diedit.
* Vertex/titik garis dapat dipindahkan.
* Polyline dapat dipilih.
3. **Polygon**
* User dapat menggambar area polygon.
* Polygon dapat diedit.
* Vertex polygon dapat dipindahkan.
* Polygon dapat dipilih.
Sediakan toolbar drawing yang jelas:
* Select
* Add Point
* Draw Polyline
* Draw Polygon
* Edit
* Delete
### Flexible Attribute System
Setiap Point, Polyline, dan Polygon memiliki attribute yang fleksibel.
Contoh:
Point:
* name: "School A"
* category: "School"
* status: "Active"
Polyline:
* name: "Road 01"
* road_type: "Village Road"
* condition: "Good"
Polygon:
* name: "Rice Field A"
* land_type: "Agriculture"
* area_status: "Active"
Namun jangan hard-code field tersebut.
User harus dapat:
* Add attribute
* Edit attribute
* Delete attribute
* Mengubah key/name attribute
* Mengubah value
* Menambahkan attribute sebanyak yang diperlukan
Gunakan UI seperti:
`Attribute`
`name School A`
`category Education`
`status Active`
Tombol:
`+ Add Attribute`
### Object Information
Ketika user memilih objek pada peta, sidebar kiri otomatis berubah menjadi detail objek.
Contoh:
**POINT**
School A
Geometry:
Point
Coordinates:
* Latitude: ...
* Longitude: ...
Attributes:
* name: School A
* category: Education
* status: Active
Actions:
* Edit
* Delete
Untuk Polyline tampilkan:
* Geometry Type
* Length
* Attributes
Untuk Polygon tampilkan:
* Geometry Type
* Area
* Attributes
### Visual Style
Gunakan desain:
* Modern GIS dashboard
* Minimal
* Professional
* Clean
* Rounded corners
* Subtle shadows
* Good spacing
* Responsive
* Desktop-first
Gunakan warna yang profesional dan tidak terlalu ramai.
### Map Interaction
Pastikan user dapat:
* Zoom in
* Zoom out
* Pan
* Select object
* Edit geometry
* Delete object
* Change basemap
Objek yang dipilih harus memiliki visual highlight yang jelas.
### Data Model
Gunakan struktur data sederhana dan fleksibel.
Setiap feature minimal memiliki:
* id
* type: point | polyline | polygon
* geometry
* properties
`properties` harus berupa object/dictionary sehingga attribute dapat ditambahkan secara dinamis.
Contoh:
{
"id": 1,
"type": "point",
"geometry": {...},
"properties": {
"name": "School A",
"category": "Education",
"status": "Active"
}
}
### Output Utama
Aplikasi harus menghasilkan tampilan **peta yang dapat diedit** dengan sidebar informasi objek di sebelah kiri.
Fokus utama adalah:
**MAP + DRAWING + EDITING + FLEXIBLE ATTRIBUTES**
Buat prototype yang benar-benar interaktif, bukan sekadar desain statis.
Gunakan komponen UI yang sederhana dan mudah dipahami oleh pengguna non-teknis.
