diff --git a/Views/Main/Profil/Edit.cshtml b/Views/Main/Profil/Edit.cshtml
index dbf9b18..f6508b0 100644
--- a/Views/Main/Profil/Edit.cshtml
+++ b/Views/Main/Profil/Edit.cshtml
@@ -1,7 +1,12 @@
-ο»Ώ@{
+@{
ViewData["Title"] = "Profil Bank Sampah";
}
+@section Styles {
+
+
+}
+
+
+
+
+ @{
+ ViewData["MapId"] = "map-picker";
+ ViewData["LatInputId"] = "latitude-input";
+ ViewData["LngInputId"] = "longitude-input";
+ ViewData["SearchInputId"] = "search-location";
+ ViewData["SearchResultsId"] = "search-results";
+ ViewData["ClearSearchBtnId"] = "clear-search";
+ ViewData["Label"] = "Pilih Lokasi di Peta";
+ }
+ @await Html.PartialAsync("_LeafletMapPicker")
+
-
\ No newline at end of file
+
+
+@section Scripts {
+
+
+
+}
\ No newline at end of file
diff --git a/Views/Main/Profil/Index.cshtml b/Views/Main/Profil/Index.cshtml
index 82a60a5..714abc4 100644
--- a/Views/Main/Profil/Index.cshtml
+++ b/Views/Main/Profil/Index.cshtml
@@ -2,6 +2,17 @@
ViewData["Title"] = "Profil Bank Sampah";
}
+@section Styles {
+
+
+}
+
@@ -149,12 +160,55 @@
Latitude
- 324242
+ -6.2088
Longitude
- -371872
+ 106.8456
+
+
+
+
+
+
+
+ Lokasi di Peta
+
+
+
+
+ Peta menampilkan lokasi Bank Sampah
+
+
-
\ No newline at end of file
+
+
+@section Scripts {
+
+
+}
\ No newline at end of file
diff --git a/Views/Shared/_LeafletMapPicker.cshtml b/Views/Shared/_LeafletMapPicker.cshtml
new file mode 100644
index 0000000..6608dbe
--- /dev/null
+++ b/Views/Shared/_LeafletMapPicker.cshtml
@@ -0,0 +1,78 @@
+@*
+ Leaflet Map Picker - Reusable Partial View
+
+ Usage:
+ @await Html.PartialAsync("_LeafletMapPicker", new LeafletMapPickerModel
+ {
+ MapId = "map-picker",
+ LatInputId = "latitude-input",
+ LngInputId = "longitude-input",
+ SearchInputId = "search-location",
+ SearchResultsId = "search-results",
+ ClearSearchBtnId = "clear-search",
+ Label = "Pilih Lokasi di Peta",
+ HelpText = "Cari lokasi menggunakan search box di atas, atau klik pada peta untuk menentukan lokasi secara manual"
+ })
+*@
+
+@model dynamic
+
+@{
+ var mapId = ViewData["MapId"]?.ToString() ?? "map-picker";
+ var latInputId = ViewData["LatInputId"]?.ToString() ?? "latitude-input";
+ var lngInputId = ViewData["LngInputId"]?.ToString() ?? "longitude-input";
+ var searchInputId = ViewData["SearchInputId"]?.ToString() ?? "search-location";
+ var searchResultsId = ViewData["SearchResultsId"]?.ToString() ?? "search-results";
+ var clearSearchBtnId = ViewData["ClearSearchBtnId"]?.ToString() ?? "clear-search";
+ var label = ViewData["Label"]?.ToString() ?? "Pilih Lokasi di Peta";
+ var helpText = ViewData["HelpText"]?.ToString() ?? "Cari lokasi menggunakan search box di atas, atau klik pada peta untuk menentukan lokasi secara manual";
+ var showLabel = ViewData["ShowLabel"] == null ? true : (ViewData["ShowLabel"] is bool labelValue && labelValue);
+ var showSearch = ViewData["ShowSearch"] == null ? true : (ViewData["ShowSearch"] is bool searchValue && searchValue);
+ var showHelpText = ViewData["ShowHelpText"] == null ? true : (ViewData["ShowHelpText"] is bool helpValue && helpValue);
+}
+
+
+ @if (showLabel)
+ {
+
+ }
+
+ @if (showSearch)
+ {
+
+
+ }
+
+
+
+ @if (showHelpText)
+ {
+
+
+ @helpText
+
+ }
+
+ @{
+ ViewData["MapId"] = "map-picker";
+ ViewData["LatInputId"] = "latitude-input";
+ ViewData["LngInputId"] = "longitude-input";
+ ViewData["SearchInputId"] = "search-location";
+ ViewData["SearchResultsId"] = "search-results";
+ ViewData["ClearSearchBtnId"] = "clear-search";
+ ViewData["Label"] = "Pilih Lokasi di Peta";
+ }
+ @await Html.PartialAsync("_LeafletMapPicker")
+
+```
+
+#### Langkah 3: Initialize JavaScript Component
+
+```cshtml
+@section Scripts {
+
+
+
+}
+```
+
+### Metode 2: HTML Manual
+
+```html
+
+
+
+
+
+
+
+
+
+ Cari lokasi menggunakan search box di atas, atau klik pada peta untuk menentukan lokasi secara manual
+
+
+
+ Gagal mencari lokasi. Silakan coba lagi.
+
+ `;
+ }
+ }
+
+ displaySearchResults(results) {
+ if (!this.searchResults) return;
+
+ if (results.length === 0) {
+ this.searchResults.innerHTML = `
+
+
+ Lokasi tidak ditemukan
+
+ `;
+ this.searchResults.classList.remove('hidden');
+ return;
+ }
+
+ this.searchResults.innerHTML = results.map(result => {
+ const escapedDisplayName = result.display_name.replace(/'/g, "\\'");
+ return `
+
+
+
+
+
${result.display_name}
+
+ ${parseFloat(result.lat).toFixed(6)}, ${parseFloat(result.lon).toFixed(6)}
+
+
+
+
+ Lokasi Dipilih
+ ${lat.toFixed(8)}, ${lng.toFixed(8)}
+ Drag marker untuk mengubah lokasi
+
+ `).openPopup();
+
+ // Handle marker drag
+ this.currentMarker.on('dragend', (e) => {
+ const marker = e.target;
+ const position = marker.getLatLng();
+
+ // Update input values
+ if (this.latInput) this.latInput.value = position.lat.toFixed(8);
+ if (this.lngInput) this.lngInput.value = position.lng.toFixed(8);
+
+ // Update popup content
+ marker.setPopupContent(`
+
+ Lokasi Dipilih
+ ${position.lat.toFixed(8)}, ${position.lng.toFixed(8)}
+ Drag marker untuk mengubah lokasi
+
+ `);
+
+ // Fetch address for new position
+ this.fetchAddress(position.lat, position.lng);
+ });
+
+ // Center map on marker
+ this.map.setView([lat, lng], 15);
+
+ // Fetch address if requested
+ if (fetchAddr) {
+ this.fetchAddress(lat, lng);
+ }
+ }
+
+ // Public API methods
+ getCoordinates() {
+ return {
+ lat: parseFloat(this.latInput?.value),
+ lng: parseFloat(this.lngInput?.value)
+ };
+ }
+
+ setCoordinates(lat, lng, updateMarker = true) {
+ if (this.latInput) this.latInput.value = lat.toFixed(8);
+ if (this.lngInput) this.lngInput.value = lng.toFixed(8);
+
+ if (updateMarker) {
+ this.updateMarker(lat, lng);
+ }
+ }
+
+ destroy() {
+ // Clean up event listeners and map
+ if (this.map) {
+ this.map.remove();
+ }
+ clearTimeout(this.searchTimeout);
+ }
+}
+
+// Export for use in modules or expose globally
+if (typeof module !== 'undefined' && module.exports) {
+ module.exports = LeafletMapPicker;
+} else {
+ window.LeafletMapPicker = LeafletMapPicker;
+}