first commit
This commit is contained in:
671
resources/views/admin/penjaja/asal/papar_mohon.blade.php
Normal file
671
resources/views/admin/penjaja/asal/papar_mohon.blade.php
Normal file
@@ -0,0 +1,671 @@
|
||||
@extends('layouts.appmin')
|
||||
|
||||
@section('tajuk')
|
||||
Permohonan Lesen Penjaja
|
||||
@endsection
|
||||
|
||||
|
||||
@section('breadcrumb')
|
||||
<ul class="breadcrumbs mb-3">
|
||||
<li class="nav-home">
|
||||
<a href="#">
|
||||
<i class="icon-home"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="separator">
|
||||
<i class="icon-arrow-right"></i>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#">Penjaja</a>
|
||||
</li>
|
||||
<li class="separator">
|
||||
<i class="icon-arrow-right"></i>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#">Permohonan Baru</a>
|
||||
</li>
|
||||
<li class="separator">
|
||||
<i class="icon-arrow-right"></i>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#">Papar Permohonan Baru</a>
|
||||
</li>
|
||||
</ul>
|
||||
@endsection
|
||||
|
||||
@section('css')
|
||||
|
||||
<!-- Select2 -->
|
||||
<link rel="stylesheet" href="{{ asset('plugins/select2/css/select2.min.css') }}">
|
||||
<link rel="stylesheet" href="{{ asset('plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css') }}">
|
||||
<link href="{{ asset('css/jsapi-template-main.css') }}" rel="stylesheet" type="text/css"/>
|
||||
<link href="https://js.arcgis.com/4.25/esri/css/main.css" rel="stylesheet" type="text/css" />
|
||||
<style>
|
||||
#viewDiv {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height: 500px;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
@endsection
|
||||
|
||||
|
||||
@section('content')
|
||||
|
||||
@if (session('success'))
|
||||
<div class="alert alert-success" role="alert">
|
||||
{{ session('success') }}
|
||||
</div>
|
||||
@endif
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="card card-round">
|
||||
<div class="card-header">
|
||||
<div class="card-head-row card-tools-still-right">
|
||||
<h4 class="card-title">Maklumat Peribadi Pemohon</h4>
|
||||
</div>
|
||||
</div> <!-- /.card-header -->
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="form-group">
|
||||
<label for="nokp">No KP</label>
|
||||
<input type="text" class="form-control" id="nokp" disabled
|
||||
value="{{ old('nokp', $permohonan?->user->nokp) }}" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="name">Name</label>
|
||||
<input type="text" class="form-control" id="name" disabled
|
||||
value="{{ old('name', $permohonan?->user->name) }}" />
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-7">
|
||||
<div class="form-group">
|
||||
<label for="email">Email</label>
|
||||
<input type="text" class="form-control" id="email" disabled
|
||||
value="{{ old('email', $permohonan?->user->email) }}" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-5">
|
||||
<div class="form-group">
|
||||
<label for="notelefon">No Telefon</label>
|
||||
<input type="text" class="form-control" id="notelefon" disabled
|
||||
value="{{ old('notelefon', $permohonan?->user->notelefon) }}" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="alamat">Alamat</label>
|
||||
<textarea class="form-control" id="alamat" rows="4" disabled>{{ old('alamat', $permohonan?->user->alamat) }}</textarea>
|
||||
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="jantina">Jantina</label>
|
||||
<input type="text" class="form-control" id="jantina" disabled
|
||||
value="{{ old('jantina', $permohonan?->user->jantina) }}" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="bangsa">Bangsa</label>
|
||||
<input type="text" class="form-control" id="bangsa" disabled
|
||||
value="{{ old('bangsa', $permohonan?->user->bangsa) }}" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- /.card-body -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card card-round">
|
||||
<div class="card-header">
|
||||
<div class="card-head-row card-tools-still-right">
|
||||
<h4 class="card-title">Maklumat Perniagaan(SSM)</h4>
|
||||
</div>
|
||||
</div> <!-- /.card-header -->
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="form-group">
|
||||
<label for="nossm">No SSM</label>
|
||||
<input type="text" class="form-control" id="nossm" disabled
|
||||
value="{{ old('nossm', $permohonan?->syarikat->nossm) }}" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="nama_perniagaan">Nama Perniagaan</label>
|
||||
<input type="text" class="form-control" id="nama_perniagaan" disabled
|
||||
value="{{ old('nama_perniagaan', $permohonan?->syarikat->name) }}" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="jenis_perniagaan">Jenis Perniagaan</label>
|
||||
<input type="text" class="form-control" id="jenis_perniagaan" disabled
|
||||
value="{{ old('jenis_perniagaan', $permohonan?->syarikat->jenis_perniagaan) }}" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="alamat_perniagaan">Alamat Perniagaan</label>
|
||||
<textarea class="form-control" id="alamat_perniagaan" rows="4" disabled>{{ old('alamat_perniagaan', $permohonan?->syarikat->alamat) }}</textarea>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="notelefon_perniagaan">No Telefon</label>
|
||||
<input type="text" class="form-control" id="notelefon_perniagaan" disabled
|
||||
value="{{ old('notelefon_perniagaan', $permohonan?->syarikat->notelefon) }}" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="bil_cawangan">Bil Cawangan</label>
|
||||
<input type="text" class="form-control" id="bil_cawangan" disabled
|
||||
value="{{ old('bil_cawangan', $permohonan?->syarikat->bil_cawangan) }}" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!--end::Row-->
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="card card-round">
|
||||
<div class="card-header">
|
||||
<div class="card-head-row card-tools-still-right">
|
||||
<h4 class="card-title">Maklumat Permohonan Lesen Penjaja</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="jenis_penjaja">Jenis Penjaja</label>
|
||||
<input type="text" class="form-control" id="jenis_penjaja" disabled
|
||||
value="{{ old('jenis_penjaja', $permohonan?->syarikat->jenis) }}" />
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="jenis_kenderaan">Jenis Kenderaan</label>
|
||||
<input type="text" class="form-control" id="jenis_kenderaan" disabled
|
||||
value="{{ old('jenis_kenderaan', $permohonan?->jenis_kenderaan) }}" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="no_pendaftaran">No Pendaftaran Kenderaan</label>
|
||||
<input type="text" class="form-control" id="no_pendaftaran" disabled
|
||||
value="{{ old('no_pendaftaran', $permohonan?->no_pendaftaran) }}" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="status_tanah">Status Tanah</label>
|
||||
<input type="text" class="form-control" id="status_tanah" disabled
|
||||
value="{{ old('status_tanah', $permohonan?->status_tanah) }}" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="alamat_penjajaan">Alamat Aktiviti Penjajaan</label>
|
||||
<input type="text" class="form-control" id="alamat_penjajaan" disabled
|
||||
value="{{ old('alamat_penjajaan', $permohonan?->alamat_penjajaan) }}" />
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="masa_jualan_mula">Masa Mula Jualan</label>
|
||||
<input type="text" class="form-control" id="masa_jualan_mula" disabled
|
||||
value="{{ old('masa_jualan_mula', $permohonan?->masa_jualan_mula) }}" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="masa_jualan_tamat">Masa Tamat Jualan</label>
|
||||
<input type="text" class="form-control" id="masa_jualan_tamat" disabled
|
||||
value="{{ old('masa_jualan_tamat', $permohonan?->masa_jualan_tamat) }}" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="makanan">Makanan</label>
|
||||
<textarea class="form-control" id="makanan" rows="4" disabled>{{ old('makanan', $permohonan?->makanan) }}</textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="minuman">Minuman</label>
|
||||
<textarea class="form-control" id="minuman" rows="4" disabled>{{ old('minuman', $permohonan?->minuman) }}</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="lain">Lain-lain</label>
|
||||
<input type="text" class="form-control" id="lain" disabled
|
||||
value="{{ old('lain', $permohonan?->lain) }}" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="mb-3">
|
||||
<label for="longitude">Longitud</label>
|
||||
<input id="longitude" class="form-control" type="text" name="longitude" value="{{ old('longitude', $permohonan?->longitude) }}" autofocus autocomplete="longitude"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="mb-3">
|
||||
<label for="latitude">Latitud</label>
|
||||
<input id="latitude" class="form-control" type="text" name="latitude" value="{{ old('latitude', $permohonan?->latitude) }}" autofocus autocomplete="latitude"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="viewDiv"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="card card-round">
|
||||
<div class="card-header">
|
||||
<div class="card-head-row card-tools-still-right">
|
||||
<h4 class="card-title">Dokumen Permohonan Lesen Penjaja</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
@if(!is_null($doc_gambar))
|
||||
<h6>Gambar Berukuran Passport</h6>
|
||||
@if ($doc_gambar->pivot->jenis_dokumen === 'pdf')
|
||||
<a href="{{ asset('storage/documents/' . $doc_gambar->pivot->path) }}" target="_blank">View PDF</a>
|
||||
@else
|
||||
<img src="{{ asset('storage/documents/' . $doc_gambar->pivot->path) }}" alt="Gambar Passport" style="max-width: 100px;">
|
||||
@endif
|
||||
@endif
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
@if(!is_null($doc_lokasi))
|
||||
<h6>Gambar Lokasi / Pelan</h6>
|
||||
@if ($doc_lokasi->pivot->jenis_dokumen === 'pdf')
|
||||
<a href="{{ asset('storage/documents/' . $doc_lokasi->pivot->path) }}" target="_blank">View PDF</a>
|
||||
@else
|
||||
<img src="{{ asset('storage/documents/' . $doc_lokasi->pivot->path) }}" alt="Gambar Lokasi" style="max-width: 100px;">
|
||||
@endif
|
||||
@endif
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
@if(!is_null($doc_kebenaran))
|
||||
<h6>Surat kebenaran pemilik tanah / pemegang rezab /perjanjian yang sah</h6>
|
||||
@if ($doc_kebenaran->pivot->jenis_dokumen === 'pdf')
|
||||
<a href="{{ asset('storage/documents/' . $doc_kebenaran->pivot->path) }}" target="_blank">View PDF</a>
|
||||
@else
|
||||
<img src="{{ asset('storage/documents/' . $doc_kebenaran->pivot->path) }}" alt="Surat Kebenaran" style="max-width: 100px;">
|
||||
@endif
|
||||
@endif
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
@if(!is_null($doc_kenderaan))
|
||||
<h6>Gambar Kenderaan</h6>
|
||||
@if ($doc_kenderaan->pivot->jenis_dokumen === 'pdf')
|
||||
<a href="{{ asset('storage/documents/' . $doc_kenderaan->pivot->path) }}" target="_blank">View PDF</a>
|
||||
@else
|
||||
<img src="{{ asset('storage/documents/' . $doc_kenderaan->pivot->path) }}" alt="Gambar Kenderaan" style="max-width: 100px;">
|
||||
@endif
|
||||
@endif
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
@if(!is_null($doc_kenderaan_geran))
|
||||
<h6>Salinan Geran Kenderaan</h6>
|
||||
@if ($doc_kenderaan_geran->pivot->jenis_dokumen === 'pdf')
|
||||
<a href="{{ asset('storage/documents/' . $doc_kenderaan_geran->pivot->path) }}" target="_blank">View PDF</a>
|
||||
@else
|
||||
<img src="{{ asset('storage/documents/' . $doc_kenderaan_geran->pivot->path) }}" alt="Gambar Kenderaan" style="max-width: 100px;">
|
||||
@endif
|
||||
@endif
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
@if(!is_null($doc_suntikan_ty2))
|
||||
<h6>Salinan Sijil Suntikan TY2 (Pengendali makanan sahaja)</h6>
|
||||
@if ($doc_suntikan_ty2->pivot->jenis_dokumen === 'pdf')
|
||||
<a href="{{ asset('storage/documents/' . $doc_suntikan_ty2->pivot->path) }}" target="_blank">View PDF</a>
|
||||
@else
|
||||
<img src="{{ asset('storage/documents/' . $doc_suntikan_ty2->pivot->path) }}" alt="Salinan Suntikan" style="max-width: 100px;">
|
||||
@endif
|
||||
@endif
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
@if(!is_null($doc_kursus_makanan))
|
||||
<h6>Salinan Sijil Kursus Pengendalian Makanan</h6>
|
||||
@if ($doc_kursus_makanan->pivot->jenis_dokumen === 'pdf')
|
||||
<a href="{{ asset('storage/documents/' . $doc_kursus_makanan->pivot->path) }}" target="_blank">View PDF</a>
|
||||
@else
|
||||
<img src="{{ asset('storage/documents/' . $doc_kursus_makanan->pivot->path) }}" alt="Salinan Sijil Kursus Pengendalian Makanan" style="max-width: 100px;">
|
||||
@endif
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="card card-round">
|
||||
<div class="card-header">
|
||||
<div class="card-head-row card-tools-still-right">
|
||||
<h4 class="card-title">Wang Proses</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="form-group">
|
||||
<label>Bil Pelbagai</label><br />
|
||||
<div class="d-flex">
|
||||
<div class="form-check">
|
||||
<input
|
||||
class="form-check-input"
|
||||
type="radio"
|
||||
name="cara_jana"
|
||||
id="cara_jana_epbt"
|
||||
/>
|
||||
<label
|
||||
class="form-check-label"
|
||||
for="cara_jana_epbt"
|
||||
>
|
||||
Manual
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input
|
||||
class="form-check-input"
|
||||
type="radio"
|
||||
name="cara_jana"
|
||||
id="cara_jana_mylesen"
|
||||
checked
|
||||
/>
|
||||
<label
|
||||
class="form-check-label"
|
||||
for="cara_jana_mylesen"
|
||||
>
|
||||
Automatik
|
||||
</label>
|
||||
<input id="janabil" class="btn btn-sm btn-secondary" type="button" name="janabil" value="Jana" disabled />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
|
||||
<form action="{{route('pt.simpan_wangproses')}}" method="post">
|
||||
@csrf
|
||||
<input type="hidden" name="permohonan_id" id="permohonan_id" value="{{$permohonan->id}}">
|
||||
<div class="row g-3 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label for="no_bil_pelbagai" class="col-form-label">No Bil Pebagai <small>(jana di ePBT)</small></label>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<input id="no_bil_pelbagai" class="form-control" type="text" name="no_bil_pelbagai" value="" />
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<input id="simpanbil" class="btn btn-sm btn-secondary" disabled type="submit" name="simpanbil" value="Simpan" />
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<table class="table">
|
||||
<?php
|
||||
$i = 0;
|
||||
?>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>No Akaun BP</th>
|
||||
<th>No Resit<br />(Tarikh Bayar)</th>
|
||||
<th>Bayaran<br />(RM)</th>
|
||||
</tr>
|
||||
@foreach($permohonan?->bilpelbagais as $bp)
|
||||
<?php $i++; ?>
|
||||
<tr>
|
||||
<td><?php echo $i; ?>.</td>
|
||||
<td>{{$bp->no_akaun_bilpelbagai}}</td>
|
||||
<td>{{$bp->no_resit}}<br />{{$bp->dt_bayar}}</td>
|
||||
<td>{{$bp->amaun_bayar}}</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- /.col -->
|
||||
<div class="col-md-6">
|
||||
<div class="card card-round">
|
||||
<div class="card-header">
|
||||
<div class="card-head-row card-tools-still-right">
|
||||
<h4 class="card-title">Maklumat Fail</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form action="{{route('pt.simpan_nofail')}}" method="post">
|
||||
@csrf
|
||||
<input type="hidden" name="permohonan_id" id="permohonan_id" value="{{$permohonan->id}}">
|
||||
<div class="form-group">
|
||||
<label for="no_fail_lesen">No Fail Lesen</label>
|
||||
<input type="text" class="form-control" id="no_fail_lesen"
|
||||
value="{{ old('no_fail_lesen', $permohonan->no_fail_lesen) }}" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="no_akaun_lesen">No Akaun Lesen</label>
|
||||
<input type="text" class="form-control" id="no_akaun_lesen"
|
||||
value="{{ old('no_akaun_lesen', $permohonan->no_akaun_permohonan) }}" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input id="simpannofail" class="btn btn-sm btn-secondary" type="submit" name="simpannofail" value="Simpan" />
|
||||
</div>
|
||||
</form>
|
||||
<hr>
|
||||
<form action="{{route('pt.hantar_ppk')}}" method="post">
|
||||
@csrf
|
||||
<input type="hidden" name="permohonan_id" id="permohonan_id" value="{{$permohonan->id}}">
|
||||
<div class="form-group">
|
||||
<label class="form-check-label" for="flexRadioDefault1">
|
||||
Serah kepada Penolong Pegawai Kesihatan
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input id="simpan" class="btn btn-sm btn-secondary" type="submit" name="janabil" value="Hantar" />
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- /.col -->
|
||||
</div> <!--end::Row-->
|
||||
@endsection
|
||||
|
||||
@section('js')
|
||||
<!-- Select2 -->
|
||||
<script src="{{ asset('plugins/select2/js/select2.full.min.js') }}"></script>
|
||||
<script type="text/javascript" src="https://js.arcgis.com/4.25/"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
$(document).ready(function() {
|
||||
|
||||
$('#cara_jana_mylesen').click(function(){
|
||||
$('#janabil').removeAttr('disabled');
|
||||
$('#simpanbil').attr('disabled', 'disabled');
|
||||
});
|
||||
|
||||
$('#cara_jana_epbt').click(function(){
|
||||
$('#simpanbil').removeAttr('disabled');
|
||||
$('#janabil').attr('disabled', 'disabled');
|
||||
});
|
||||
});
|
||||
|
||||
require([
|
||||
"esri/Map",
|
||||
"esri/views/MapView",
|
||||
"esri/widgets/Home",
|
||||
"esri/widgets/ScaleBar",
|
||||
"esri/widgets/LayerList",
|
||||
"esri/widgets/Legend",
|
||||
"esri/widgets/Expand",
|
||||
"esri/widgets/Compass",
|
||||
"esri/layers/Layer",
|
||||
"esri/layers/GraphicsLayer",
|
||||
"esri/Graphic",
|
||||
"esri/geometry/support/webMercatorUtils"
|
||||
], (
|
||||
Map, MapView, Home, ScaleBar, LayerList, Legend,
|
||||
Expand, Compass, Layer, GraphicsLayer, Graphic, webMercatorUtils
|
||||
) => {
|
||||
const layerUrl = "https://onemap.mbip.gov.my/arcgis/rest/services/Hosted/Maklumat_Lot/FeatureServer";
|
||||
const map = new Map({basemap: "topo-vector"});
|
||||
const view = new MapView({
|
||||
container: "viewDiv",
|
||||
map: map,
|
||||
center: [103.576, 1.555] ,
|
||||
zoom: 14
|
||||
});
|
||||
|
||||
|
||||
//Construct a SimpleMarkerSymbol object
|
||||
var markerSymbol = {
|
||||
type: "simple-marker",
|
||||
color:[226,15,5],
|
||||
outline:{
|
||||
color:[255,255,255],
|
||||
width:2
|
||||
}
|
||||
};
|
||||
|
||||
// Construct a GraphicsLayer with Graphic objects
|
||||
var layer = new GraphicsLayer({
|
||||
graphics: []
|
||||
});
|
||||
|
||||
layer.title = "Kedudukan Projek";
|
||||
|
||||
createFeatureLayers(layerUrl);
|
||||
|
||||
async function createFeatureLayers(url) {
|
||||
const featureService = await Layer.fromArcGISServerUrl(url);
|
||||
|
||||
map.add(featureService);
|
||||
map.add(layer);
|
||||
}
|
||||
|
||||
|
||||
// Function to make graphics draggable
|
||||
function makeGraphicDraggable(graphic) {
|
||||
let moveGraphic = false;
|
||||
|
||||
view.on("drag", (event) => {
|
||||
|
||||
if (moveGraphic) {
|
||||
event.stopPropagation();
|
||||
const point = view.toMap({ x: event.x, y: event.y });
|
||||
graphic.geometry = point;
|
||||
}
|
||||
});
|
||||
|
||||
view.on("pointer-down", (event) => {
|
||||
const screenPoint = { x: event.x, y: event.y };
|
||||
view.hitTest(screenPoint).then((response) => {
|
||||
if (response.results.length > 0 && response.results[0].graphic === graphic) {
|
||||
moveGraphic = true;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
view.on("pointer-up", () => {
|
||||
if (moveGraphic) {
|
||||
const { longitude, latitude } = webMercatorUtils.webMercatorToGeographic(graphic.geometry);
|
||||
console.log(`New position - Longitude: ${longitude}, Latitude: ${latitude}`);
|
||||
|
||||
$("#latitude").val(latitude);
|
||||
$("#longitude").val(longitude);
|
||||
moveGraphic = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// Add a new marker on map click if no marker exists
|
||||
view.on("click", (event) => {
|
||||
if (layer.graphics.length === 0) {
|
||||
const point = view.toMap({ x: event.x, y: event.y });
|
||||
const newGraphic = new Graphic({
|
||||
geometry: point,
|
||||
symbol: markerSymbol
|
||||
});
|
||||
layer.add(newGraphic);
|
||||
makeGraphicDraggable(newGraphic);
|
||||
const { longitude, latitude } = webMercatorUtils.webMercatorToGeographic(newGraphic.geometry);
|
||||
console.log(`Added marker at - Longitude: ${longitude}, Latitude: ${latitude}`);
|
||||
|
||||
$("#latitude").val(latitude);
|
||||
$("#longitude").val(longitude);
|
||||
|
||||
$("#waze").attr('href', 'https://waze.com/ul?ll='+latitude+','+longitude+'&z=10');
|
||||
} else {
|
||||
console.log('Marker already exists.');
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
const homeBtn = new Home({
|
||||
view: view
|
||||
});
|
||||
const scaleBar = new ScaleBar({
|
||||
view: view,
|
||||
unit: "dual"
|
||||
});
|
||||
const layerList = new LayerList({
|
||||
view: view
|
||||
});
|
||||
const legend = new Legend({
|
||||
view: view
|
||||
});
|
||||
const layerListExpand = new Expand({
|
||||
view: view,
|
||||
content: layerList,
|
||||
expanded: false,
|
||||
expandTooltip: "Expand LayerList"
|
||||
});
|
||||
const legendExpand = new Expand({
|
||||
view: view,
|
||||
content: legend,
|
||||
expandTooltip: "Expand Legend",
|
||||
expanded: false
|
||||
});
|
||||
const compass = new Compass({
|
||||
view: view,
|
||||
visible: false
|
||||
});
|
||||
view.ui.add(homeBtn, "top-left");
|
||||
view.ui.add(scaleBar, "bottom-right");
|
||||
view.ui.add(layerListExpand, "top-right");
|
||||
view.ui.add(legendExpand, "bottom-left");
|
||||
view.ui.add(compass, "top-left");
|
||||
// load the Compass only when the view is rotated
|
||||
view.watch('rotation', function (rotation) {
|
||||
if (rotation && !compass.visible) {
|
||||
compass.visible = true;
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
Reference in New Issue
Block a user