Laravel 13 - Real-Time Visitor Geolocation Using Geo Genius.
Laravel 13 - Real-Time Visitor Geolocation Using Geo Genius.
In this tutorial, we will learn how to build a Laravel 13 app that detects visitor location using Geo Genius package and displays IP, city, country, latitude, longitude, and timezone in real time.
Quick Overview
This guide walks you through building a Laravel 13 application that detects and displays a visitor’s geolocation using the Laravel Geo Genius package, starting from creating a fresh Laravel project and installing the required package, followed by publishing its configuration and running migrations, then defining a route that retrieves the visitor’s location based on their IP address and passes it to a Blade view, where the data is displayed in a structured format using Tailwind CSS, and finally testing the implementation by running the development server to confirm that details such as IP address, city, region, country, latitude, longitude, timezone, and country flag are correctly shown, along with additional use cases explaining how to store user location during registration or login and how to fetch geolocation data for a specific IP address.
Step # 1 : Set Up a New Laravel 13 Application.
To begin, you'll need a new Laravel 13 application. In this tutorial, we'll create a project named geo-genius. Before getting started, make sure Composer is installed on your system, since Laravel uses it to manage project dependencies. It's also recommended to install the Laravel Installer globally, as it provides a faster and more convenient way to create new Laravel applications. If you haven't installed it yet, run the following command.
composer global require laravel/installer
Once the Installer has been added, create a new Laravel 13 application by executing the command below.
laravel new geo-genius
During the installation process, Laravel will prompt you to select several options. Use the following choices for this tutorial.
- Starter Kit: Select None to start with a clean and minimal application.
- Testing Framework: Choose Pest for a modern and developer-friendly testing experience.
- Laravel Boost: Select No, as it isn't required for this project.
- Database: Choose SQLite as the default database connection.
- Run Migrations: Type Yes to run the default migrations automatically.
- Frontend Dependencies: Select Yes to install the required frontend packages during setup.
After the installation is complete, you'll have a fresh Laravel 13 project named geo-genius. The application will be configured with Pest for testing, SQLite as the database, the frontend dependencies will already be installed, and the default migrations will have been executed.
Step # 2 : Switch to the Project Directory.
After creating the application, open your preferred command line tool, such as Git Bash, Command Prompt, or Terminal, and navigate to the project folder by running the following command.
cd geo-genius
Working from the project's root directory is important because all future Composer, Artisan, and development-related commands should be executed from this location. This ensures that every command interacts with the correct Laravel application and helps avoid unexpected issues later on.
Step # 3 : Install the Geo Genius Package in Laravel 13.
Next, install the Laravel Geo Genius package using Composer. Make sure you are inside the project directory, then execute the following command.
composer require devrabiul/laravel-geo-genius
Composer will download the package and automatically register it with your Laravel application. The Laravel Geo Genius package makes it easy to determine a visitor's location using their IP address and provides useful information such as the user's country, city, latitude, and longitude. Once installed, your application will be able to retrieve geographic data and take advantage of location based functionality whenever needed.
Step # 4 : Publish the Package Assets and Run the Migration.
Once the package has been installed, the next step is to publish its assets so that you can access and customize the configuration settings. Execute the following Artisan command.
php artisan vendor:publish --provider="Devrabiul\LaravelGeoGenius\LaravelGeoGeniusServiceProvider"
Running this command will publish the package configuration file and create the config/laravel-geo-genius.php file inside your application. In addition, the package will publish a migration that adds a timezone column to the users table. If you plan to store timezone or other location related information in the database, you'll need to run the migration again so the new column can be added. Use the following command to apply the changes.
php artisan migrate
Although this package supports saving location and timezone data to the database, we won't be using that functionality in this tutorial. However, we'll still execute the migration to ensure the application is fully prepared for future use cases.
Step # 5 : Define a Route for Displaying Geo Data.
Open the routes/web.php file and add the following route to handle the geo data request.
Route::get('/geo', function () {
$geo = laravelGeoGenius()->geo()->locateVisitor();
return view('geo', compact('geo'));
});
When a user visits the /geo route in their browser, the application automatically triggers this logic and captures the visitor’s information in real time. The laravelGeoGenius()->geo()->locateVisitor() helper detects the user’s location based on their IP address and returns the relevant geographic data. This data is then passed to a Blade view named geo using compact('geo'), allowing the view to access it easily and display it in a readable format. In the view, you can show details such as the user’s country, city, latitude, and longitude.
Step # 6: Create a Blade View to Display Location.
Create a new Blade file named geo.blade.php inside the resources/views folder and add the following code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Code Shotcut - Laravel 13 Visitor Location</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen flex items-center justify-center bg-gradient-to-br from-gray-950 via-black to-gray-900 text-white p-6">
<div class="absolute inset-0 overflow-hidden">
<div class="absolute top-20 left-10 w-80 h-80 bg-indigo-500/20 blur-3xl rounded-full"></div>
<div class="absolute bottom-20 right-10 w-80 h-80 bg-purple-500/20 blur-3xl rounded-full"></div>
</div>
<div class="relative w-full max-w-3xl">
<!-- Header -->
<div class="text-center mb-8">
<h1 class="text-3xl font-bold tracking-tight">
Code Shotcut - Visitor Location Details
</h1>
<p class="text-gray-400 text-sm mt-2">
Automatically detected using IP address in Laravel 13
</p>
</div>
<div class="bg-white/5 backdrop-blur-2xl border border-white/10 rounded-2xl shadow-2xl p-6 space-y-3">
<div class="flex items-center justify-between px-4 py-3 rounded-xl bg-white/5 hover:bg-white/10 transition">
<span class="text-gray-400">IP Address</span>
<span class="font-semibold">{{ $geo['ip'] }}</span>
</div>
<div class="flex items-center justify-between px-4 py-3 rounded-xl bg-white/5 hover:bg-white/10 transition">
<span class="text-gray-400">City</span>
<span class="font-semibold">{{ $geo['city'] }}</span>
</div>
<div class="flex items-center justify-between px-4 py-3 rounded-xl bg-white/5 hover:bg-white/10 transition">
<span class="text-gray-400">Region</span>
<span class="font-semibold">{{ $geo['region'] }}</span>
</div>
<div class="flex items-center justify-between px-4 py-3 rounded-xl bg-white/5 hover:bg-white/10 transition">
<span class="text-gray-400">Country</span>
<span class="font-semibold">
{{ $geo['country'] }} <span class="text-gray-500">({{ $geo['countryCode'] }})</span>
</span>
</div>
<div class="flex items-center justify-between px-4 py-3 rounded-xl bg-white/5 hover:bg-white/10 transition">
<span class="text-gray-400">Latitude</span>
<span class="font-semibold">{{ $geo['latitude'] }}</span>
</div>
<div class="flex items-center justify-between px-4 py-3 rounded-xl bg-white/5 hover:bg-white/10 transition">
<span class="text-gray-400">Longitude</span>
<span class="font-semibold">{{ $geo['longitude'] }}</span>
</div>
<div class="flex items-center justify-between px-4 py-3 rounded-xl bg-white/5 hover:bg-white/10 transition">
<span class="text-gray-400">Timezone</span>
<span class="font-semibold">{{ $geo['timezone'] }}</span>
</div>
<div class="flex items-center justify-between px-4 py-3 rounded-xl bg-white/5 hover:bg-white/10 transition">
<span class="text-gray-400">Country Flag</span>
<span class="text-2xl">{{ $geo['country_flag'] }}</span>
</div>
</div>
<!-- Footer -->
<p class="text-center text-xs text-gray-500 mt-6">
Code Shotcut • Built with Laravel 13 • Powered by Laravel Geo Genius Package
</p>
</div>
</body>
</html>
This view is used to display the visitor’s location data passed from the route. It uses Tailwind CSS for styling and presents information such as IP address, city, region, country, latitude, longitude, timezone, and country flag. Each value is accessed from the $geo variable and displayed in a structured layout for easy readability.
Step # 7 : Test Laravel Geo Genius Package.
Start the Laravel development server by running the following command.
php artisan serve
Once the server is running, open your browser and visit: http://127.0.0.1:8000/geo. When you access this URL, Laravel will execute the route you defined and load the geo.blade.php view. The page will display the visitor’s location data that is automatically detected from their IP address, including IP address, city, region, country, country code, latitude, longitude, timezone, and country flag. This confirms that the Laravel Geo Genius package is working correctly and successfully passing location data from the backend to the Blade view.
Handling Visitor Location and Custom IP Detection
If you want to store a user’s location during registration, you can detect their geolocation at the time of account creation and save it in your database. This data can later be used in the user profile or for features like analytics, personalization, or location based content. You can also update the stored location each time the user logs in to keep the information up to date.
If you want to store a user’s location during registration, you can detect their geolocation at the time of account creation and save it in your database. This data can later be used in the user profile or for features like analytics, personalization, or location based content. You can also update the stored location each time the user logs in to keep the information up to date.
Conclusion
By following this guide, you’ve successfully integrated visitor geolocation detection into your Laravel 13 application using the Laravel Geo Genius package. You created a fresh Laravel project, installed and configured the package, published its assets, and set up a route that retrieves location data based on the visitor’s IP address. You then built a Blade view using Tailwind CSS to display key details such as IP address, city, region, country, latitude, longitude, timezone, and country flag in a structured format. Finally, you tested the implementation to confirm that the geolocation data is being correctly fetched and displayed, with additional insight into how this data can be stored or retrieved for specific use cases.
For more details and advanced configuration options, refer to the official Laravel Geo Genius package documentation: https://github.com/devrabiul/laravel-geo-genius.
Share this with friends!
To engage in commentary, kindly proceed by logging in or registering
Subscribe to Our Newsletter
Stay ahead of the curve! Join our newsletter to see what everyone’s talking about.
Continue with Google
0 Comments