Free Hit Counter

Membuat Peta GIS dengan Codeigniter 3, Bootstrap dan Leaflet.

By Author - Oktober 22, 2021


Leaflet adalah salah satu open source peta interaktif yang bekerja di semua platform baik desktop maupun mobile. Banyak fitur-fitur pemetaan dan plugin yang disediakan untuk pengembang.

Disini saya mencoba membuat project pemetaan Restoran atau tempat makan, dimana nantinya kita bisa melihat titik lokasi restoran di peta.

Berikut adalah tahapan untuk membuat peta di halaman website anda.


1. Buat project Codeigniter dengan nama Restoran.







2. Masuk ke folder application, lalu folder views. Buka file welcome_message.php. 

3. Panggil dan sisipkan file CSS dan JS Bootstrap terlebih dahulu. Untuk pemanggilan file Bootstrap, saya melalui link CDN yang sudah disediakan. Silahkan lihat di sini https://getbootstrap.com/docs/5.0/getting-started/introduction/.

4. Selanjutnya tambahkan elemen DIV di mana peta akan ditampilkan, sebagai contoh saya letakkan di container dengan ID “mapid”, seperti di bawah ini.

<div id="mapid"></div>

5. Lalu atur tingginya dengan menambahkan kode di bawah ini di tag Head.

<style type="text/css">
   	#mapid { height: 480px; }
 </style>

6. Panggil file CSS dan JS Leaflet, letakkan file CSS di bagian Head dan JS di bagian bawah sebelum tag tutup Body.


<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
 		
<!-- Leaflet JS -->
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>

7. Untuk memulai menampilkan peta hal pertama yang dilakukan adalah inisialisasi peta dan memanggil koordinat pusat dan zoom awal.

var mymap = L.map('mapid').setView([-6.9024812, 107.61881], 15);

8. Selanjutnya kita akan menambahkan layer, dalam hal ini saya mencoba menggunakan sumber dari OSM atau Open Street Map, seperti di bawah ini.

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
			    attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
			    maxZoom: 18,
			}).addTo(mymap);
			var marker = L.marker([-6.9024812, 107.61881]).addTo(mymap);