Configure Mapbox in Laravel with SenseCAP API

Map with Mapbox

PRELIMINARY

Previously we had succeeded in getting GPS data (longitude and latitude) from the SenseCAP API (read here). Next in this tutorial we will use this data and display it on our own website. This time, the tool for displaying or converting GPS data to a map is Mapbox. Yep, Mapbox is one of the largest providers of custom dare maps that has been around since 2010. Before working, there are things that need to be installed and paid attention to.

# REQUIREMENTS
Web Service (Apache/NGINX)
Composer (For install Laravel)
Browser (Google Chrome/Safari/Mozilla Firefox)

# INFORMATION
PHP 8.1
Laravel 10

DISCUSSION

Continuing the previous project, the first thing that will be done is to create a dashboard page, previously the configuration of this page will be a bit extensive because this project will be ongoing. So later there will be additional files for layout.

First, create a layout in the resources/views folder and create a new folder with the name layouts, then create the files app.blade.php, link.blade.php, navbar.blade.php, script.blade.php, and sidebar.blade.php.

After creating the layout, the next step is to create the core part, namely the content that will display a page. If you pay attention to the app.blade.php file there is syntax like this.

<div class="main-container">
     @yield('content')
</div>

This syntax will later display a page, then create a dashboard.blade.php file in the resources/views folder. The file that will later display the Mapbox map.

YOUR_MAPBOX_TOKEN comes from the Mapbox token, so please register first at https://www.mapbox.com/.

Mapbox Page

After successfully logging in you will find the Access Token, copy the token and move it to YOUR_MAPBOX_TOKEN. And you also get free calling 50,000 loads, meaning you won’t be charged anything for up to 50,000 calls to the API from Mapbox.

Access tokens in Mapbox

Next, create a DynamicRouterHandler.php file in the app/Http/Controllers folder. This is used to handle API access from the website.

After adding the router handler, in the file there is the syntax config(‘custom.TARGET_API’) which means you have to add the configuration in the custom.php file and the .env file. which functions to handle changes to the API address in the backend.

Add in .env file at the end.

TARGET_API=http://localhost:8081/api/

Add in custom.php at the config folder.

'TARGET_API' => env('TARGET_API')

And also add routing in the web.php file in the routes folder.

Next, run in cmd or terminal (run frontend): 
1. php artisan optimize
2. php artisan serve

And run the terminal again to run the backend: 
php artisan serve --port=8081.

After everything is running, the dashboard page can be displayed by opening http://localhost:8000/dashboard in the browser.

Dashboard show data from Mapbox

Akhirnya, Cara Configure Mapbox in Laravel with SenseCAP API telah selesai. Terimakasih sudah mengikuti tutorial ini. Tunggu tutorial berikutnya ya.

Download Source Code : https://github.com/budiodank/location-sensecap-app

Link PDF : https://drive.google.com/file/d/119-fQ1F4TD4hrVKf_CaCFds_yHYkG_1F/view?usp=sharing

Tech Solusi Consultant Corp