Download the PHP package koossaayy/laravel-mapbox without Composer

Laravel Mapbox

Easily Integration of Mapbox inside your Laravel application

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

Installation

You can install the package via composer:

After installing the package, create an account on MapBox and get your token.

Expose that token in your .env file as below:

For example

Don't forget to publish your config file using:

This is the contents of the published config file:

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, 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:

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:

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 <x-mapbox /> component as follows:

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

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.

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

Testing

This package is tested using PestPHP

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

License

The MIT License (MIT). Please see License File for more information.