79 lines
3.0 KiB
Plaintext
79 lines
3.0 KiB
Plaintext
@*
|
|
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);
|
|
}
|
|
|
|
<div class="leaflet-map-picker-container">
|
|
@if (showLabel)
|
|
{
|
|
<label class="text-sm font-semibold text-gray-700 mb-2 block">
|
|
<i class="ph ph-map-pin me-2"></i>
|
|
@label
|
|
</label>
|
|
}
|
|
|
|
@if (showSearch)
|
|
{
|
|
<!-- Search Box -->
|
|
<div class="leaflet-map-picker-search">
|
|
<div class="relative">
|
|
<input
|
|
type="text"
|
|
id="@searchInputId"
|
|
class="input leaflet-map-picker-search-input"
|
|
placeholder="Cari lokasi (nama tempat, alamat, kota)..."
|
|
autocomplete="off"
|
|
/>
|
|
<i class="ph ph-magnifying-glass leaflet-map-picker-search-icon"></i>
|
|
<button
|
|
type="button"
|
|
id="@clearSearchBtnId"
|
|
class="leaflet-map-picker-clear-btn hidden"
|
|
>
|
|
<i class="ph ph-x"></i>
|
|
</button>
|
|
</div>
|
|
<!-- Search Results Dropdown -->
|
|
<div id="@searchResultsId" class="leaflet-map-picker-results hidden"></div>
|
|
</div>
|
|
}
|
|
|
|
<div id="@mapId" class="leaflet-map-picker"></div>
|
|
|
|
@if (showHelpText)
|
|
{
|
|
<p class="leaflet-map-picker-help-text">
|
|
<i class="ph ph-info me-1"></i>
|
|
@helpText
|
|
</p>
|
|
}
|
|
</div>
|