feat: Initial commit - WebGIS Smart City Project by Naufal Zaky Ramadhan (D1041231071)

03/frontend/js/modules/draw.js

@@ -0,0 +1,31 @@
+export const setupDrawControls = (map, onGeometryCreated) => {
+    const drawControl = new L.Control.Draw({
+        draw: { marker: true, polyline: true, polygon: true, circle: false, circlemarker: false, rectangle: false }
+    });
+    map.addControl(drawControl);
+
+    map.on(L.Draw.Event.CREATED, function (event) {
+        const layer = event.layer;
+        const type = event.layerType;
+        
+        // Peta draw default tipe: marker -> spbu, polyline -> jalan, polygon -> kavling
+        let customType = type;
+        if(type === 'marker') customType = 'spbu';
+        if(type === 'polyline') customType = 'jalan';
+        if(type === 'polygon') customType = 'kavling';
+        if(window.currentDrawType) customType = window.currentDrawType; // Untuk P2/P3
+
+        onGeometryCreated(customType, layer.toGeoJSON().geometry, layer);
+    });
+
+    // Custom Menu Handlers
+    const markerDrawer = new L.Draw.Marker(map, drawControl.options.draw.marker);
+    const polylineDrawer = new L.Draw.Polyline(map, drawControl.options.draw.polyline);
+    const polygonDrawer = new L.Draw.Polygon(map, drawControl.options.draw.polygon);
+
+    document.getElementById('btn-draw-spbu')?.addEventListener('click', () => { window.currentDrawType='spbu'; markerDrawer.enable(); });
+    document.getElementById('btn-draw-jalan')?.addEventListener('click', () => { window.currentDrawType='jalan'; polylineDrawer.enable(); });
+    document.getElementById('btn-draw-kavling')?.addEventListener('click', () => { window.currentDrawType='kavling'; polygonDrawer.enable(); });
+    
+    return drawControl;
+};

03/frontend/js/modules/form.js

@@ -0,0 +1,50 @@
+export const renderForm = (type, geometry, onSubmit, onCancel) => {
+    const container = document.getElementById('form-container');
+    container.style.display = 'flex';
+    
+    const extraFields = type === 'spbu' ? `
+        <div class="form-group">
+            <label class="checkbox-group">
+                <input type="checkbox" id="input-24jam">
+                <span>Buka 24 Jam</span>
+            </label>
+        </div>
+    ` : '';
+
+    container.innerHTML = `
+        <div class="form-panel">
+            <h3 style="margin:0 0 10px 0; font-size:1rem; border-bottom:1px solid rgba(255,255,255,0.1); padding-bottom:8px;">Simpan Data (${type.toUpperCase()})</h3>
+            <div class="form-group">
+                <input type="text" id="input-nama" class="form-control" placeholder="Nama / Label" required>
+            </div>
+            <div class="form-group">
+                <input type="text" id="input-deskripsi" class="form-control" placeholder="Deskripsi Singkat">
+            </div>
+            ${extraFields}
+            <div style="display:flex; gap:10px; margin-top:8px;">
+                <button id="btn-save" class="btn-submit" style="flex:1;">Simpan</button>
+                <button id="btn-cancel" class="btn-submit" style="background:rgba(255,255,255,0.1); color:var(--text-light); flex:1;">Batal</button>
+            </div>
+        </div>
+    `;
+
+    document.getElementById('btn-save').addEventListener('click', () => {
+        const payload = {
+            type,
+            geometry,
+            nama: document.getElementById('input-nama').value,
+            deskripsi: document.getElementById('input-deskripsi').value,
+        };
+        if (type === 'spbu') payload.buka_24_jam = document.getElementById('input-24jam').checked;
+        
+        onSubmit(payload);
+        container.style.display = 'none';
+        container.innerHTML = '';
+    });
+
+    document.getElementById('btn-cancel').addEventListener('click', () => {
+        if(onCancel) onCancel();
+        container.style.display = 'none';
+        container.innerHTML = '';
+    });
+};

03/frontend/js/modules/map.js

@@ -0,0 +1,25 @@
+/**
+ * map.js
+ * Tanggung Jawab: Inisialisasi peta Leaflet dasar dan base layer.
+ */
+
+export const initMap = (containerId) => {
+    // Pusat peta default (Universitas Tanjungpura, Pontianak)
+    const map = L.map(containerId, {
+        zoomControl: false
+    }).setView([-0.0583, 109.3448], 15);
+
+    // Pindahkan zoom control ke kanan bawah
+    L.control.zoom({
+        position: 'bottomright'
+    }).addTo(map);
+
+    // Tile Layer Premium (CartoDB Dark Matter untuk Glass UI)
+    L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
+        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
+        subdomains: 'abcd',
+        maxZoom: 20
+    }).addTo(map);
+
+    return map;
+};