GIS (Geographic Information System) adalah sistem informasi geografis dan menjadi salah satu project populer yang sering digunakan sebagai tugas kuliah bahkan project besar. Pada kesempatan kali ini kita akan belajar banyak hal dari backend hingga frontend, dimulai dari instalasi laravel hingga membuat interaksi pada map menggunakan mapbox & react.js. Selain itu kamu akan belajar bagaiman caranya menggunakan Inertia.js agar aplikasi laravel kita menjadi Single Page Application. Yukk mari kita mulai!
Step 1: Buat Project Laravel 10
Pertama-tama, buka cmd/terminal.
Kemudian jalankan perintah berikut untuk mendownload dan menginstall project Laravel 10:
composer create-project laravel/laravel laravel-inertia-map
composer create-project laravel/laravel laravel-inertia-map
Step 2: Setup Database
Setelah menginstall project Laravel, mari konfigurasi database terlebih dahulu.
Buka file .env. Lalu tambahkan detail database sebagai berikut:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=nama databasemu
DB_USERNAME=username databasemu
DB_PASSWORD=password databasemu
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=nama databasemu
DB_USERNAME=username databasemu
DB_PASSWORD=password databasemu
Step 3: Setup Inertia & React.js menggunakan Laravel Breeze
Laravel Breeze merupakan sebuah kit yang membantumu dalam scaffold project laravel-mu, seperti fitur autentikasi, edit profile, reset password hingga setup inertia. Pada kesempatan kali ini kita akan menggunakan laravel breeze untuk setup Inertia dan React.js.
Install laravel breeze menggunakan command berikut:
composer require laravel/breeze --dev
composer require laravel/breeze --dev
Setelah selesai install, jalankan command berikut untuk memulai setup dari laravel breeze.
php artisan breeze:install
php artisan breeze:install
Setelah command dijalankan, pastikan memilih opsi berikut:
Setelah proses setup laravel breeze selesai, lakukan migrasi pada database.
php artisan migrate
php artisan migrate
Kemudian jalankan laravel dev server dan client dev server
php artisan serve
npm run dev
php artisan serve
npm run dev
Jika berhasil buka projectmu pada http://localhost:8000/, maka akan muncul tampilan berikut:
Step 4: Lakukan Registrasi dan modikasi Dashboard
Buat akun pertamamu pada halaman register dan lengkapi data yang diminta.
Setelah proses registrasi selesai, maka kamu akan di redirect ke halaman dashboard.
Pastikan sebelum melanjutkan ketahap ini, kamu sudah belajar tentang React.js
Pindah ke file Dashboard.jsx kemudian lakukan modifikasi pada line berikut
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
import { Head } from "@inertiajs/react";
export default function Dashboard({ auth }) {
return (
<AuthenticatedLayout
user={auth.user}
header={
<h2 className="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
Dashboard GIS
</h2>
}
>
<Head title="Dashboard GIS" />
<div className="py-12">
<div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div className="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg mb-2">
<div className="p-6 text-gray-900 dark:text-gray-100 ">
Selamat Datang
</div>
</div>
</div>
</div>
</AuthenticatedLayout>
);
}
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
import { Head } from "@inertiajs/react";
export default function Dashboard({ auth }) {
return (
<AuthenticatedLayout
user={auth.user}
header={
<h2 className="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
Dashboard GIS
</h2>
}
>
<Head title="Dashboard GIS" />
<div className="py-12">
<div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div className="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg mb-2">
<div className="p-6 text-gray-900 dark:text-gray-100 ">
Selamat Datang
</div>
</div>
</div>
</div>
</AuthenticatedLayout>
);
}
Step 5: Setup Mapbox
Pastikan kamu sudah memiliki akun pada Platform Mapbox
Setelah berhasil registrasi, buatlah access token yang nanti akan kita gunakan agar dapat mengakses map.
Install dependencies yang kita butuhkan agar dapat menggunakan mapbox
npm install --save react-map-gl mapbox-gl
npm install --save react-map-gl mapbox-gl
Setelah selesai tambahkan Mapbox pada dashboard
import Map from "react-map-gl";
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
import { Head } from "@inertiajs/react";
export default function Dashboard({ auth }) {
return (
<AuthenticatedLayout
user={auth.user}
header={
<h2 className="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
Dashboard GIS
</h2>
}
>
<Head title="Dashboard GIS" />
<div className="py-12">
<div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div className="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg mb-2">
<div className="p-6 text-gray-900 dark:text-gray-100 ">
Selamat Datang
</div>
</div>
<div className="h-max">
<Map
mapboxAccessToken="MAPBOX ACCESS TOKEN"
initialViewState={{
longitude: 106.8291201,
latitude: -6.1836782,
zoom: 12,
}}
style={{ width: "100%", height: 600 }}
mapStyle="mapbox://styles/mapbox/streets-v9"
/>
</div>
</div>
</div>
</AuthenticatedLayout>
);
}
import Map from "react-map-gl";
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
import { Head } from "@inertiajs/react";
export default function Dashboard({ auth }) {
return (
<AuthenticatedLayout
user={auth.user}
header={
<h2 className="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
Dashboard GIS
</h2>
}
>
<Head title="Dashboard GIS" />
<div className="py-12">
<div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div className="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg mb-2">
<div className="p-6 text-gray-900 dark:text-gray-100 ">
Selamat Datang
</div>
</div>
<div className="h-max">
<Map
mapboxAccessToken="MAPBOX ACCESS TOKEN"
initialViewState={{
longitude: 106.8291201,
latitude: -6.1836782,
zoom: 12,
}}
style={{ width: "100%", height: 600 }}
mapStyle="mapbox://styles/mapbox/streets-v9"
/>
</div>
</div>
</div>
</AuthenticatedLayout>
);
}
Load mapbox css pada app.blade.php:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title inertia>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
<link href="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css" rel="stylesheet">
<!-- Scripts -->
@routes
@viteReactRefresh
@vite(['resources/js/app.jsx', "resources/js/Pages/{$page['component']}.jsx"])
@inertiaHead
</head>
<body class="font-sans antialiased">
@inertia
</body>
</html>
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title inertia>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
<link href="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css" rel="stylesheet">
<!-- Scripts -->
@routes
@viteReactRefresh
@vite(['resources/js/app.jsx', "resources/js/Pages/{$page['component']}.jsx"])
@inertiaHead
</head>
<body class="font-sans antialiased">
@inertia
</body>
</html>
Agar tampilan height dari map tidak hancur tambahkan css pada app.css
@tailwind base;
@tailwind components;
@tailwind utilities;
div[mapboxgl-children] {
height: fit-content !important;
}
@tailwind base;
@tailwind components;
@tailwind utilities;
div[mapboxgl-children] {
height: fit-content !important;
}
Berikut tampilan map yang sudah berhasil kita integrasikan:
Alternatif Bagi yang tidak punya Mapbox Access Token
Bagi kamu yang tidak memilik kartu kredit atau debit dengan visa ketika registrasi pada mapbox kamu dapat menggunakan alternatif lain yaitu maplibre.
NOTE: Bagi yang menggunakan MapLibre pastikan di tutorial part 2 dan 3 import map sesuai dengan settingan saat ini!
Install maplibre dependencies:
npm install --save react-map-gl maplibre-gl
npm install --save react-map-gl maplibre-gl
Pada app.blade.php ganti css map menggunakan code berikut:
<link rel='stylesheet' href='https://unpkg.com/maplibre-gl@3.3.1/dist/maplibre-gl.css' />
<link rel='stylesheet' href='https://unpkg.com/maplibre-gl@3.3.1/dist/maplibre-gl.css' />
Modifikasi import map, hapus mapboxAccessToken dan load style token gratis, pastikan copy paste mapStyle tanpa ada perubahan:
import Map from "react-map-gl/maplibre";
// ...rest of your code
<Map
initialViewState={{
longitude: 106.8291201,
latitude: -6.1836782,
zoom: 12,
}}
style={{ width: "100%", height: 600 }}
mapStyle="https://api.maptiler.com/maps/streets/style.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL"
/>;
import Map from "react-map-gl/maplibre";
// ...rest of your code
<Map
initialViewState={{
longitude: 106.8291201,
latitude: -6.1836782,
zoom: 12,
}}
style={{ width: "100%", height: 600 }}
mapStyle="https://api.maptiler.com/maps/streets/style.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL"
/>;
Jika sudah maka map-mu akan berfungsi sebagaiman mestinya.
Kita sudahi dulu ya teman-teman, nanti di tutorial berikutnya kita akan belajar untuk menambahkan interaksi CRUD untuk marker pada map, stay tune dan happy coding!
Selanjutnya
Part 2 - Tutorial GIS Interaktif Menggunakan Laravel Inertia & React