PHPackages                             koossaayy/laravel-mapbox - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. koossaayy/laravel-mapbox

ActiveLibrary[Utility & Helpers](/categories/utility)

koossaayy/laravel-mapbox
========================

Easily Integration of Mapbox inside your Laravel application

v0.4.9(1y ago)7440.3k↓58.7%6MITPHPPHP ^8.1|^8.2|^8.3|^8.4CI passing

Since Nov 26Pushed 1y ago2 watchersCompare

[ Source](https://github.com/koossaayy/laravel-mapbox)[ Packagist](https://packagist.org/packages/koossaayy/laravel-mapbox)[ Docs](https://github.com/koossaayy/laravel-mapbox)[ GitHub Sponsors](https://github.com/koossaayy)[ RSS](/packages/koossaayy-laravel-mapbox/feed)WikiDiscussions main Synced 3d ago

READMEChangelog (10)Dependencies (12)Versions (28)Used By (0)

Laravel Mapbox
==============

[](#laravel-mapbox)

Easily Integration of Mapbox inside your Laravel application

[![Latest Version on Packagist](https://camo.githubusercontent.com/2c33809d19fd3911837f0c86717789f89cf616cf296ce8eb342878d8ad8c1c46/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6b6f6f7373616179792f6c61726176656c2d6d6170626f782e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/koossaayy/laravel-mapbox)[![GitHub Tests Action Status](https://camo.githubusercontent.com/e545a8e22883bcabf966a9e69206d3ea5bc379f12b3e2f61df27672235e03f59/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f6b6f6f7373616179792f6c61726176656c2d6d6170626f782f72756e2d74657374732e796d6c3f6272616e63683d6d61696e)](https://github.com/koossaayy/laravel-mapbox/actions?query=workflow%3Arun-tests+branch%3Amain)[![Total Downloads](https://camo.githubusercontent.com/b0cfb0910ba49cef54139099b5814147c69af8b44f9793d2f97e3e9e2d1a7b22/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6b6f6f7373616179792f6c61726176656c2d6d6170626f782e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/koossaayy/laravel-mapbox)

---

[![Laravel Mapbox](https://camo.githubusercontent.com/173ff5c8e13ea3092f7a5a66c8b05d0e1bb9bd2db0e5847f09ac3642f60a19e6/68747470733a2f2f62616e6e6572732e6265796f6e64636f2e64652f4c61726176656c2532304d6170626f782e706e673f7468656d653d6461726b267061636b6167654d616e616765723d636f6d706f7365722b72657175697265267061636b6167654e616d653d6b6f6f7373616179792532466c61726176656c2d6d6170626f78267061747465726e3d617263686974656374267374796c653d7374796c655f31266465736372697074696f6e3d456173696c792b496e746567726174652b4d6170626f782b696e746f2b796f75722b4c61726176656c2b6170706c69636174696f6e266d643d312673686f7757617465726d61726b3d3126666f6e7453697a653d313030707826696d616765733d68747470732533412532462532466c61726176656c2e636f6d253246696d672532466c6f676f6d61726b2e6d696e2e737667)](https://camo.githubusercontent.com/173ff5c8e13ea3092f7a5a66c8b05d0e1bb9bd2db0e5847f09ac3642f60a19e6/68747470733a2f2f62616e6e6572732e6265796f6e64636f2e64652f4c61726176656c2532304d6170626f782e706e673f7468656d653d6461726b267061636b6167654d616e616765723d636f6d706f7365722b72657175697265267061636b6167654e616d653d6b6f6f7373616179792532466c61726176656c2d6d6170626f78267061747465726e3d617263686974656374267374796c653d7374796c655f31266465736372697074696f6e3d456173696c792b496e746567726174652b4d6170626f782b696e746f2b796f75722b4c61726176656c2b6170706c69636174696f6e266d643d312673686f7757617465726d61726b3d3126666f6e7453697a653d313030707826696d616765733d68747470732533412532462532466c61726176656c2e636f6d253246696d672532466c6f676f6d61726b2e6d696e2e737667)

Easily inetgrate mapbox maps to your Laravel app using only blade components.

Installation
------------

[](#installation)

You can install the package via composer:

```
composer require koossaayy/laravel-mapbox
```

After installing the package, [create an account](https://mapbox.com) on MapBox and get your token.

Expose that token in your `.env` file as below:

```
MAPBOX_TOKEN={your mapbox token here}

```

For example

```
MAPBOX_TOKEN=pk.eyJ1IjoiiJjddd20yaDIzdmgwzWpqMm9vMDVrb3I1c2QzIn0.jepDEulAySscpF3o3w

```

Don't forget to publish your config file using:

```
php artisan vendor:publish --tag="mapbox-config"
```

This is the contents of the published config file:

```
return [
    'mapbox_token' => (env('MAPBOX_TOKEN', null))
];
```

Usage
-----

[](#usage)

The goal of this package is to use Blade components to render Mapbox GL maps.

Before starting using this component, you must include the CSS and JS files in the file where you want to display your map:

```

```

To show a basic map, you can use the component as follows :

```

```

Note: The `id` parameter is mandatory since it's used by Mapbox JS.

Next, here's how you can use the component with other options:

In some scenarios, you may want to control the `position` CSS attribute of the map, you can do that with the `position` parameter. The default value will be `absolute` as the documentation in Mapbox.

```

```

To show/hide navigation controls (Zoom in/Zoom out/Rotation), you can the use `:navigationControls` attribute as follows:

```

```

To customize the map style (not to be confused with default style like width and height...), using either [Mapbpox predefined styles or your own styles](https://docs.mapbox.com/mapbox-gl-js/api/map/#:~:text=to%20ScrollZoomHandler%23enable%20.-,options.style,-(Object%20%7C%20string)), you can use the `mapStyle` attribute as follows :

```

```

Note: Providing a wrong style identifier will result in some glitches while showing the map.

To center the camera of the map, on a certain point, you can use the `:center` attribute as follows:

```

```

To control the map interactivity (Enable/Disable mouse events like dragging or zooming), you can use the `:interactive` attribute, as follows :

```

```

To add markers to your map, you can use the `:markers` attribute, as follows :

```

```

The `:markers` attribute accepts an array of arrays, each array must have at least the `long` and `lat` keys. If you want to add a popup description, you may use the `description` key. If you want to enable HTML description, you may add `html` key and set it to true to enable it. However there is a catch, you can't directly pass the HTML string, you should encapsulate it in a PHP variable and pass the variable to the array. For example:

```
//Somewhere in your code
$htmlString = 'Hello world';
```

```

```

If the array is missing the `html` key, it won't render the passed variable, so make sure to pass it if you want to render an HTML description.

> **Note**Please notice that `description` key accepts HTML, and it will render it, so if you are getting your data from your users, please make sure to sanitize it before using it.

Also you can customize the marker icons, instead of using the default ones provided by Mapbox. To do so you can add `icon` key to the array of markers as follows:

```
$icon = '';
```

```

```

> **Note**Please notice that `icon` key accepts HTML, and it will render it, so if you are getting your data from your users, please make sure to sanitize it before using it.

> **Note**It's recommended to keep the number of markers to a max of 20, for performance reasons.

To control the style of the map (width, height, etc... Not to be confused with the `mapStyle` attribute), you can use the `style` and `class` attributes as follows :

```

```

To add RTL support to show Arabic/Hebrew, etc... names correctly, you can use the `:rtl` attribute, as follows

```

```

To add cooperative gestures (This allows the user to scroll the page without unintentionally zooming or panning the map.), you may use `:cooperativeGestures` attribute as follows:

```

```

In some cases, you want a draggable marker, for example, when you want the end user to select a point on the map and then return its coordinates, in that case, you can use the `:draggable` attribute as follows:

```

```

This will render a draggable marker. In order to get the coordinates of the marker, you must add the following JavaScript code after the `` component as follows:

```
markerid.on("dragend", function (e) {
    /*here you can get the coordinates as follows
     * e.target.getLngLat().lng : to get the longitude
     * e.target.getLngLat().lat : to get the latitude
     */
});
```

For example, if you have a map with id `map1`, the resulting code will be as follows :

```
markermap1.on("dragend", function (e) {
    /*here you can get the coordinates as follows
     * e.target.getLngLat().lng : to get the longitude
     * e.target.getLngLat().lat : to get the latitude
     */
});
```

Here's a full example, with all options being used:

```

```

In addition to regular map component, we added the map search component. This will add a search bar into the map container, and will allow the end user to search for places.
Before start using the search component, you must add the Mapbox geocoding plugin.

```

```

> **Note**The plugin must be imported after the Mapbox JS and CSS files.

After importing the geocoding plugin, now you can use the search component as follows:

```

```

The example below, is the search component with full options:

```

```

As the example illustrates, the only difference here is the geocoder position, which is the position of the search input. It can be one of those `['top-left', 'top-right', 'bottom-left','bottom-right']`

In order to listen to the change event, you need to add the `result` event listener, so you can get the result object.

```
geocoderid.on("result", function (event) {
    /**
     * Here you can lisen to the result event and get the result
     * for example you can get the longitude, atitude, and the place name as follows:
     * const long = event.result.geometry.coordinates[0];
     * const lat = event.result.geometry.coordinates[1];
     * const name = name = event.result.place_name;
     */
});
```

For example, if you have a map with id `searchmap`, the code will be as follows :

```
geocodersearchmap.on("result", function (event) {
    /**
     * Here you can lisen to the result event and get the result
     * for example you can get the longitude, atitude, and the place name as follows:
     * const long = event.result.geometry.coordinates[0];
     * const lat = event.result.geometry.coordinates[1];
     * const name = name = event.result.place_name;
     */
});
```

Testing
-------

[](#testing)

This package is tested using PestPHP

```
composer test
```

Changelog
---------

[](#changelog)

Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.

Contributing
------------

[](#contributing)

Please see [CONTRIBUTING](.github/CONTRIBUTING.md) for details.

License
-------

[](#license)

The MIT License (MIT). Please see [License File](LICENSE.md) for more information.

###  Health Score

46

—

FairBetter than 92% of packages

Maintenance43

Moderate activity, may be stable

Popularity43

Moderate usage in the ecosystem

Community13

Small or concentrated contributor base

Maturity68

Established project with proven stability

 Bus Factor1

Top contributor holds 98.8% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~87 days

Recently: every ~71 days

Total

15

Last Release

458d ago

PHP version history (6 changes)0.0.1PHP ^8.0

v0.1.0PHP ^8.1

v0.4.2PHP ^8.0|^8.1

v0.4.4PHP ^8.0|^8.1|^8.2

v0.4.6PHP ^8.1|^8.2|^8.3

v0.4.9PHP ^8.1|^8.2|^8.3|^8.4

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/6431084?v=4)[Koussay](/maintainers/koossaayy)[@koossaayy](https://github.com/koossaayy)

---

Top Contributors

[![koossaayy](https://avatars.githubusercontent.com/u/6431084?v=4)](https://github.com/koossaayy "koossaayy (80 commits)")[![machour](https://avatars.githubusercontent.com/u/304450?v=4)](https://github.com/machour "machour (1 commits)")

---

Tags

laravellaravel-mapboxlaravel-packagemapboxmapslaravelkoossaayylaravel-mapbox

###  Code Quality

TestsPest

### Embed Badge

![Health badge](/badges/koossaayy-laravel-mapbox/health.svg)

```
[![Health](https://phpackages.com/badges/koossaayy-laravel-mapbox/health.svg)](https://phpackages.com/packages/koossaayy-laravel-mapbox)
```

###  Alternatives

[spatie/laravel-pdf

Create PDFs in Laravel apps

1.0k4.8M47](/packages/spatie-laravel-pdf)[codewithdennis/filament-select-tree

The multi-level select field enables you to make single selections from a predefined list of options that are organized into multiple levels or depths.

329530.5k29](/packages/codewithdennis-filament-select-tree)[rawilk/profile-filament-plugin

Profile & MFA starter kit for filament.

3914.6k](/packages/rawilk-profile-filament-plugin)[worksome/exchange

Check Exchange Rates for any currency in Laravel.

124603.0k](/packages/worksome-exchange)[tarfin-labs/event-machine

Event-driven state machines for Laravel with event sourcing, type-safe context, and full audit trail.

199.4k](/packages/tarfin-labs-event-machine)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)