1 files changed, 91 insertions, 71 deletions
diff --git a/ab_openstreetmap/static/src/js/openstreetmap_widget.js b/ab_openstreetmap/static/src/js/openstreetmap_widget.js
index 0f0bfd82..c84a2293 100644
--- a/ab_openstreetmap/static/src/js/openstreetmap_widget.js
+++ b/ab_openstreetmap/static/src/js/openstreetmap_widget.js
@@ -1,86 +1,106 @@
 odoo.define("ab_openstreetmap.openstreetmap_widget", function (require) {
   "use strict";
-  var fieldRegistry = require("web.field_registry");
-  var abstractField = require("web.AbstractField");
 
-  var openstreetmap = abstractField.extend({
+  const fieldRegistry = require("web.field_registry");
+  const AbstractField = require("web.AbstractField");
+
+  const OpenStreetMapWidget = AbstractField.extend({
     template: "openstreetmap_template",
+
     start: function () {
-      var self = this;
-      this._super();
-      self._initMap();
-    },
-    _initMap: function () {
-      var self = this
-      $(document).ready(function () {
+      const self = this;
+      return this._super.apply(this, arguments).then(() => {
         setTimeout(() => {
-          var lat = self.recordData.latitude;
-          var lng = self.recordData.longtitude;
-          
-          if (!lat && !lng) {
-            lat = -6.2349;
-            lng = 106.9896;
-          }
-          
-          var mymap = L.map('mapid').setView([lat, lng], 13);
-          L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
-            attribution:
-            '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
-          }).addTo(mymap);
-
-          var edit = self.mode == "edit" ? true : false;
-          var marker = L.marker([lat, lng], { draggable: edit }).addTo(mymap);
-          
-          marker.on("dragend", function (e) {
-            var latlng = e.target._latlng;
-            self.trigger_up("field_changed", {
-              dataPointID: self.dataPointID,
-              changes: {
-                lat: latlng.lat,
-                lng: latlng.lng,
-              },
-              viewType: self.viewType,
-            });
-          });
-          
-          if (edit) {
-            var geocode = L.Control.geocoder({
-              defaultMarkGeocode: false,
-            }).addTo(mymap);
-            
-            geocode.on("markgeocode", function (e) {
-              var lat = e.geocode.center.lat;
-              var lng = e.geocode.center.lng;
-              
-              mymap.flyTo([lat, lng]);
-              marker.setLatLng(new L.LatLng(lat, lng));
-              self.trigger_up("field_changed", {
-                dataPointID: self.dataPointID,
-                changes: {
-                  lat: lat,
-                  lng: lng,
-                },
-                viewType: self.viewType,
-              });
-            });
-          }
-
-          var interval = setInterval(() => {
-            if (mymap && mymap._size.x > 0){
-              clearInterval(interval);
-            } else if (!document.getElementById("mapid")) {
-              clearInterval(interval);
-            }
-            window.dispatchEvent(new Event("resize"));
-          }, 500);
+          self._renderMapWhenReady();
         }, 100);
+      });
+    },
+
+    _renderMapWhenReady: function () {
+      const self = this;
+      const check = () => {
+        const container = document.getElementById("mapid");
+        if (container && container.offsetWidth > 0 && container.offsetHeight > 0) {
+          self._initMap();
+        } else {
+          setTimeout(check, 100);
+        }
+      };
+      check();
+    },
+
+    _initMap: function () {
+      const self = this;
+      const container = document.getElementById("mapid");
 
+      // Bersihkan Leaflet instance sebelumnya jika ada
+      if (container && container._leaflet_id) {
+        container._leaflet_id = null;
+      }
+
+      let lat = self.recordData.latitude;
+      let lng = self.recordData.longtitude;
+
+      if (!lat && !lng) {
+        lat = -6.2349;
+        lng = 106.9896;
+      }
+
+      const map = L.map("mapid").setView([lat, lng], 13);
+
+      L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
+        attribution:
+          '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+      }).addTo(map);
+
+      const edit = self.mode === "edit";
+      const marker = L.marker([lat, lng], { draggable: edit }).addTo(map);
+
+      // Simpan koordinat saat marker digeser
+      marker.on("dragend", function (e) {
+        const latlng = e.target._latlng;
+        self.trigger_up("field_changed", {
+          dataPointID: self.dataPointID,
+          changes: {
+            latitude: latlng.lat.toString(),
+            longtitude: latlng.lng.toString(),
+          },
+          viewType: self.viewType,
+        });
       });
+
+      // Fitur cari lokasi (geocoder)
+      if (edit) {
+        const geocode = L.Control.geocoder({ defaultMarkGeocode: false }).addTo(map);
+        geocode.on("markgeocode", function (e) {
+          const lat = e.geocode.center.lat;
+          const lng = e.geocode.center.lng;
+          map.flyTo([lat, lng]);
+          marker.setLatLng(new L.LatLng(lat, lng));
+          self.trigger_up("field_changed", {
+            dataPointID: self.dataPointID,
+            changes: {
+              latitude: lat.toString(),
+              longtitude: lng.toString(),
+            },
+            viewType: self.viewType,
+          });
+        });
+      }
+
+      // Force render ulang map
+      const interval = setInterval(() => {
+        if (map && map._size.x > 0) {
+          clearInterval(interval);
+        }
+        window.dispatchEvent(new Event("resize"));
+      }, 500);
     },
+
     isSet: function () {
       return true;
     },
   });
-  
-  fieldRegistry.add("openstreetmap", openstreetmap);
+
+  fieldRegistry.add("openstreetmap", OpenStreetMapWidget);
 });