Setelah sebelumnya kami membahas tentang cara membuat Maps di Laravel, kali ini kami akan membahas tentang cara membuat maps di CodeIgniter versi 3 dan 4. Simak artikel ini untuk mengetahui langkah-langkahnya!
CodeIgniter adalah salah satu framework PHP dengan konsep MVC (Model-View-Controller) yang dapat digunakan untuk membuat website dinamis berbasis PHP. Dengan CodeIgniter, Anda dapat menambahkan berbagai fungsi pada website untuk membuat tampilannya lebih informatif, salah satunya adalah maps atau peta.
Ada beberapa cara yang dapat Anda gunakan untuk membuat maps di CodeIgniter, seperti melalui API Google Maps hingga menggunakan Leaflet yang tidak membutuhkan akses API.
Dalam artikel ini, kami akan membahas cara membuat maps di CodeIgniter versi 3 dan 4 menggunakan library Leaflet, karena kemudahannya dalam proses pembuatan yang hanya membutuhkan nilai latitude/longitude (Lintang/Bujur) dan library Leaflet nya saja.
Apa itu leaflet?
Leaflet adalah library JavaScript yang digunakan untuk membuat peta interaktif secara mudah. Selain itu, Leaflet termasuk dalam aplikasi open source, sehingga dapat Anda gunakan dan modifikasi secara gratis tanpa harus membayar lisensinya.
Leaflet dirancang untuk menampilkan peta atau maps sederhana, namun ringan ketika diakses. Tidak hanya itu, Leaflet memiliki beragam fitur yang memudahkan pengembang menambahkan peta ke situs web atau aplikasi web mereka.
Membuat maps di Codeigniter
Dalam panduan membuat maps di CodeIgniter, kami akan memberikan contoh pembuatan maps melalui library Leaflet pada versi CI3 dan CI4. Seperti apa, simak informasi berikut ini.
Cara Membuat Maps di CodeIgniter 3
- Download terlebih dahulu file leafleat https://leafletjs.com/download.html.
- Ekstrak leaflet.zip, Klik kanan pilih “Extract to leaflet\” maka menghasilkan folder “leaflet”, lalu pindahkan folder leaflet ke folder assets di root CI (jika belum ada, buat dulu folder assets). Jadi struktur foldernya seperti ini:
public_html/assets/leaflet
- Setelah di ekstrak, buat sebuah controller dan beri nama
map.php
.
<?php if(!defined('BASEPATH')) exit('No direct script access allowed');
class Map extends CI_Controller{
public function index(){
$this->load->view('map/index');
}
}
- Setelah memasukan script tersebut, pada base_url() di CodeIgniter 3, pastikan helper url diaktifkan dengan menambahkan ‘url’ ke dalam array
$autoload['helper']
di application/config/autoload.php:
$autoload['helper'] = array('url');
- Pastikan juga untuk mengatur base_url di
application/config/config.php
agar sesuai dengan URL root aplikasi CodeIgniter Anda. Misalnya, jika aplikasi berjalan di hosting, Anda dapat mengaturnya seperti ini:
$config['base_url'] = 'https://namadomain';
- Buat folder map pada folder view. Setelah itu, pada folder map kita buat file bernama index.php, sehingga strukturnya menjadi
view/map/index.php
.
- Masukan script berikut pada index.php.
<!-- leaflet map -->
<link rel="stylesheet" href="<?= base_url(); ?>/assets/leaflet/leaflet.css" />
<script src="<?= base_url(); ?>/assets/leaflet/leaflet.js"></script>
- Setelah itu, masukan juga elemen div untuk menampung peta.
<style>
#map { height: 180px; }
</style>
<div id="map"></div>
- Setelah semua konfigurasi selesai, selanjutnya inisialisasi peta Leaflet dengan menentukan koordinat awal melalui JavaScript. Berikut adalah contoh sederhana bagaimana melakukannya di file view Anda:
var map = L.map('map').setView([-7.739677908186675, 110.398694180979599], 13);
Script -7.739677908186675, 110.398694180979599 menunjukan koordinat ketika maps pertama kali dibuka. Anda dapat menyesuaiikannya, sesuai dengan lokasi maps yang Anda inginkan. Gunakan titik koordinat latitude dan longitude.
- Setelah semua disetting. Langkah terakhir adalah memasukan jenis peta yang digunakan.
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
L.marker([-7.739677908186675, 110.39869418097959]).addTo(map)
.bindPopup('A pretty CSS popup.<br> Easily customizable.')
.openPopup();
- Berikut adalah contoh script lengkapnya:
<!-- leaflet map -->
<link rel="stylesheet" href="<?= base_url(); ?>/assets/leaflet/leaflet.css" />
<script src="<?= base_url(); ?>/assets/leaflet/leaflet.js"></script>
<style>
#map {
position: relative;
width: 100%;
height: 100%;
}
#map iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height:100% !important;
}
</style>
<div id="map"></div>
<script>
var map = L.map('map').setView([-7.739677908186675, 110.398694180979599], 13);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
L.marker([-7.739677908186675, 110.39869418097959]).addTo(map)
.bindPopup('A pretty CSS popup.<br> Easily customizable.')
.openPopup();
</script>
- Setelah dijalankan, maka akan menampilkan gambar berikut:

Cara Membuat Maps di CodeIgniter 4
- Download terlebih dahulu file leafleat https://leafletjs.com/download.html.
- Ekstrak leaflet.zip, Klik kanan pilih “Extract to leaflet\” maka menghasilkan folder “leaflet”, lalu pindahkan folder leaflet ke folder assets di root CI (jika belum ada, buat dulu folder assets). Jadi struktur foldernya seperti ini:
public_html/public/leaflet
. - Setelah di ekstrak, buat sebuah controller dan lalu diberi nama map.php.
<?php
namespace App\Controllers;
class map extends BaseController
{
public function index(): string
{
return view('map/index');
}
}
- Setelah membuat control pada bagian config, klik folder routes lalu masukan script berikut:
$routes->get('/', 'map::index');
- Buat folder map pada folder view. Setelah itu, pada folder map kita buat file bernama index.php sehingga strukturnya menjadi
view/map/index.php
.
- Masukan script berikut pada index.php
<?= $this->section('head') ?>
<script src="<?= base_url('leaflet/leaflet.js') ?>"></script>
<link rel="stylesheet" href="<?= base_url('leaflet/leaflet.css') ?>" />
- Setelah itu, masukan juga elemen div untuk menampung peta:
<style>
#map { height: 180px; }
</style>
<div id="map"></div>
- Setelah semua konfigurasi selesai, Selanjutnya menginisialisasi peta Leaflet dengan menentukan koordinat awal melalui JavaScript. Berikut adalah contoh sederhana bagaimana melakukannya di file view Anda:
var map = L.map('map').setView([-7.739677908186675, 110.398694180979599], 13);
Script -7.739677908186675, 110.398694180979599 menunjukan koordinat ketika maps pertama kali dibuka.
- Setelah semua di setting, langkah terakhir adalah memasukan jenis peta yang digunakan.
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
L.marker([-7.739677908186675, 110.39869418097959]).addTo(map)
.bindPopup('A pretty CSS popup.<br> Easily customizable.')
.openPopup();
- Berikut adalah contoh script lengkapnya:
<?= $this->extend('layout') ?>
<?= $this->section('head') ?>
<script src="<?= base_url('leaflet/leaflet.js') ?>"></script>
<link rel="stylesheet" href="<?= base_url('leaflet/leaflet.css') ?>" />
<style>
#map {
position: relative;
width: 100%;
height: 100%;
}
#map iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height:100% !important;
}
</style>
<div id="map"></div>
<script>
var map = L.map('map').setView([-7.739677908186675, 110.398694180979599], 13);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
L.marker([-7.739677908186675, 110.39869418097959]).addTo(map)
.bindPopup('A pretty CSS popup.<br> Easily customizable.')
.openPopup();
</script>
- Setelah dijalankan, berikut hasilnya:
Sampai tahap ini, proses membuat peta di CodeIgniter telah selesai dan siap digunakan. Dengan adanya peta pada website, diharapkan pengunjung dapat lebih mudah mengetahui lokasi suatu tempat yang ingin mereka kunjungi.
Demikian artikel mengenai cara membuat maps di Codeigniter versi 3 dan 4 menggunakan Leaflet, semoga bermanfaat.