Map

Penjelasan Property untuk type Map:

PropertyTypeRequiredDefaultDescription

gridTheme

string

"crud"

Isi dengan text "map".

map_marker_fieldName

array / string

null

Untuk mendeklarasikan kunci yang dari respon json yang akan kita gunakan untuk menampilkan marker. Gunakan value array jika respon json dari server dipisahkan antara latitude & longitude, gunakan value string jika sebaliknya. Contoh penulisan: - array : "map_marker_fieldName": ["lintang", "bujur"] - string: "map_marker_fieldName": "lintang_bujur"

map_display_table

boolean

false

Untuk menampilkan tabel data dari marker yang ditampilkan. Property ini akan menampilkan tabel dengan kolom yang di set di property dynamicColumns.

map_display_table_position

string

left

Properti berfungsi jika property map_display_table = true. Maksudnya untuk menentukan posisi tabel yang akan ditampilkan. Pilihan value nya: "left" / "right".

map_display_table_size

number

3

Property untuk mengatur lebar dari tabel.

map_display_table_first_load

boolean

false

Properti berfungsi jika property map_display_table = true. Maksudnya untuk menentukan visibilitas tabel ketika halaman pertama kali dimuat.

map_marker_icon_path

string

null

Jika anda ingin mengubah tampilan gambar marker pada peta. Isi dengan path gambar statis.

map_marker_icon_fieldName

string

null

Jika anda ingin mengubah tampilan gambar marker pada peta dengan icon dinamis dari baris data. Isi dengan nama kunci yang berisi value path image. Property ini tidak akan berpengaruh jika property map_marker_icon_path diisi.

map_marker_color_fieldName

string

null

Jika anda ingin mengubah tampilan gambar marker pada peta dengan icon dinamis dari baris data. Isi dengan nama kunci yang berisi value path image. Property ini tidak akan berpengaruh jika property map_marker_icon_path diisi.

mapOtions

object

{
zoom: 15,
maxZoom: 20,
scrollWheelZoom: true,
fullscreenControl: false,
geoSearch: false,
bounds:
[
    [51.515, -0.09],
    [51.52, -0.1],
    [51.52, -0.12]
],
boundsOptions: {padding: [1, 1]},
"center": [-6.9859133, 107.6326594],
"mainMarker": [-6.9859133, 107.6326594],
"mainMarkerIcon": "https://r.....png",
"navigationLink": true,
"navigationLinkMode": 2 
}

Isi properti ini dengan properti bawaan package Leaflet.js yang bisa anda lihat disini https://leafletjs.com/reference.html#map-option. additional property: beberapa property adalah kaste untuk saba framework seperti - mainMarker : untuk menampilkan marker statis utama. sehingga memungkinkan untuk mengaktifkan fitur navigasi dan menghitung jarak. - mainMarkerIcon: menentukan icon untuk marker utama. - navigationLink: mengaktifkan fitur navigasi dari marker utama ke marker yang di klik. - navigationLinkMode: mode navigasi (1=mobil, 2=motor)

mapOtherOpt

"mapOtherOpt": {
      "calcDistanceFromMainMarker": {
        "show": false,
        "fieldName": "distance_result"
      }
    }

calcDistanceFromMainMarker: menghitung jarak antara markeur utama dan marker yang di klik, fieldName: berfungsi di halaman edit/add jika anda ingin mengisi input lain dengan value dari jarak ini. show: menampilkan informasi jarak di bawah peta.

map_draw_opt

object

"map_draw_opt": {
  "polyline": false,
  "marker": false
},

Properti ini untuk mengaktifkan pengeditan lokasi pada form (halaman Add / Edit). Jika polyline di set ke true, maka pada saat tambah/edit user akan dapat menandai lokasi dengan bentuk polyline pada peta. Begitu juga dengan marker, jika di set ke true, maka pada saat tambah/edit user akan dapat menandai lokasi dengan marker.

PreviousCalendarNextMarkers

Last updated