PHPackages                             imamhsn195/interactive-map - 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. imamhsn195/interactive-map

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

imamhsn195/interactive-map
==========================

A Laravel package for interactive maps using Leaflet.js. Provides an easy-to-use Blade component and helper functions to display interactive maps with multiple location markers.

v1.1.0(3mo ago)01MITBladePHP ^8.1

Since Jan 24Pushed 3mo agoCompare

[ Source](https://github.com/imamhsn195/laravel-Interactive-map)[ Packagist](https://packagist.org/packages/imamhsn195/interactive-map)[ Docs](https://git.xhub.ae/imamhasan/interactive-map)[ RSS](/packages/imamhsn195-interactive-map/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependencies (2)Versions (3)Used By (0)

Laravel Interactive Map
=======================

[](#laravel-interactive-map)

A Laravel package for interactive maps using Leaflet.js. This package provides an easy-to-use Blade component and helper functions to display interactive maps with multiple location markers.

Features
--------

[](#features)

- 🗺️ Interactive maps powered by Leaflet.js
- 📍 Multiple location markers with popups
- 🔍 Click-to-zoom functionality
- 📏 Auto-fit bounds to show all markers
- 🔗 Google Maps integration links
- 🎨 Customizable styling
- ⚙️ Configurable settings

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

[](#installation)

### Via Composer

[](#via-composer)

```
composer require imamhsn195/laravel-interactive-map
```

### For Local Development/Testing

[](#for-local-developmenttesting)

If you want to test the package locally before publishing, see [TESTING\_LOCALLY.md](TESTING_LOCALLY.md) for detailed instructions.

For publishing instructions, see [PUBLISHING.md](PUBLISHING.md).

Quick setup:

1. Add path repository to your Laravel project's `composer.json`:

    ```
    {
        "repositories": [
            {
                "type": "path",
                "url": "../laravel-packages/laravel-Interactive-map",
                "options": {
                    "symlink": true
                }
            }
        ]
    }
    ```

    **Note:** `symlink: true` enables auto-sync - changes in the package are immediately reflected without running `composer update`. See [LOCAL\_SETUP.md](LOCAL_SETUP.md) for details.
2. Install: `composer require imamhsn195/laravel-interactive-map:@dev`
3. Publish assets: `php artisan vendor:publish --tag=interactive-map-assets`

### Step 1: Install Package

[](#step-1-install-package)

```
composer require imamhsn195/laravel-interactive-map
```

### Step 2: Publish Assets (Optional)

[](#step-2-publish-assets-optional)

If you want to customize the configuration, views, or assets:

```
# Publish configuration
php artisan vendor:publish --tag=interactive-map-config

# Publish views
php artisan vendor:publish --tag=interactive-map-views

# Publish assets (CSS/JS)
php artisan vendor:publish --tag=interactive-map-assets
```

Usage
-----

[](#usage)

### Important: Layout Requirements

[](#important-layout-requirements)

The map component uses Laravel's `@push` directive to add styles and scripts. Make sure your Blade layout file includes the corresponding `@stack` directives:

**In your layout file (e.g., `resources/views/layouts/app.blade.php`):**

```

    @stack('styles')

    @yield('content')

    @stack('scripts')

```

**Without these `@stack` directives, the map styles and JavaScript won't load, causing the map to not display properly.**

**Custom Stack Names:**

If your layout uses different stack names (e.g., `@stack('css')` and `@stack('js')`), you can configure them in `config/interactive-map.php`:

```
'stacks' => [
    'styles' => 'css',    // Match your @stack('css')
    'scripts' => 'js',    // Match your @stack('js')
],
```

### Method 1: Using Blade Component (Recommended)

[](#method-1-using-blade-component-recommended)

The easiest way to use the map is with the Blade component:

```

```

### Method 2: Using Helper Function

[](#method-2-using-helper-function)

```
@php
    $locations = [
        [
            'name' => 'Location 1',
            'lat' => 25.17,
            'lng' => 55.35,
            'url' => 'https://maps.app.goo.gl/...',
            'address' => 'Address here',
        ],
    ];
@endphp

{!! interactive_map($locations, 'contactMap', '400px', '100%') !!}
```

### Method 3: Using in Controller

[](#method-3-using-in-controller)

```
public function contact()
{
    $locations = [
        [
            'name' => 'Dubai Office',
            'lat' => 25.17188147144341,
            'lng' => 55.3556179237354,
            'url' => 'https://maps.app.goo.gl/uYiJ6CfwoNm3XGgh9',
            'address' => 'Ras Al Khor Industrial Area, Dubai',
        ],
    ];

    return view('contact', compact('locations'));
}
```

Then in your Blade template:

```

```

### Method 4: Using with Database Model

[](#method-4-using-with-database-model)

```
// In your controller
public function locations()
{
    $locations = Location::all()->map(function ($location) {
        return [
            'name' => $location->name,
            'lat' => $location->latitude,
            'lng' => $location->longitude,
            'url' => $location->google_maps_url,
            'address' => $location->address,
        ];
    })->toArray();

    return view('locations', compact('locations'));
}
```

Location Data Format
--------------------

[](#location-data-format)

Each location can have the following fields:

FieldRequiredDescriptionAlternative Names`name`YesLocation name`title``lat`YesLatitude`latitude``lng`YesLongitude`longitude``url`NoGoogle Maps URL`map_url``address`NoPhysical address-`description`NoAdditional description-Configuration
-------------

[](#configuration)

After publishing the configuration file, you can customize the map settings in `config/interactive-map.php`:

```
return [
    'default' => [
        'tile_layer' => 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
        'attribution' => '© OpenStreetMap contributors',
        'zoom' => 8,
        'padding' => [50, 50],
        'marker_click_zoom' => 11,
    ],

    'container' => [
        'id' => 'mapContainer',
        'class' => 'w-100 h-100',
        'height' => '400px',
        'width' => '100%',
    ],

    /*
    | Blade Stack Names
    | Configure the stack names used for pushing styles and scripts.
    | These should match the @stack directives in your layout file.
    */
    'stacks' => [
        'styles' => 'styles',  // Change to match your layout's @stack('styles')
        'scripts' => 'scripts', // Change to match your layout's @stack('scripts')
    ],
];
```

### Configuration Options

[](#configuration-options)

OptionDefaultDescription`tile_layer`OpenStreetMap URLMap tile provider`attribution`OSM attributionMap attribution text`zoom`8Default zoom level`padding`\[50, 50\]Bounds padding`marker_click_zoom`11Zoom level on marker click`container.id`'mapContainer'Container element ID`container.height`'400px'Default map height`container.width`'100%'Default map width`stacks.styles`'styles'Blade stack name for styles`stacks.scripts`'scripts'Blade stack name for scriptsComponent Attributes
--------------------

[](#component-attributes)

When using the Blade component, you can pass the following attributes:

- `locations` (array, required): Array of location data
- `container-id` (string, optional): Custom container ID
- `height` (string, optional): Map height (e.g., '400px', '500px', '50vh'). Default: '400px'
- `width` (string, optional): Map width (e.g., '100%', '800px', '90vw'). Default: '100%'

Requirements
------------

[](#requirements)

- PHP: ^8.1
- Laravel: ^9.0|^10.0|^11.0|^12.0
- Leaflet.js: 1.9.4 (loaded via CDN)

Browser Support
---------------

[](#browser-support)

This package uses Leaflet.js, which supports all modern browsers:

- Chrome
- Firefox
- Safari
- Edge
- Opera

Customization
-------------

[](#customization)

### Custom Styling

[](#custom-styling)

After publishing assets, you can customize the CSS in `public/vendor/interactive-map/css/interactive-map.css`.

### Custom Views

[](#custom-views)

After publishing views, you can customize the Blade template in `resources/views/vendor/interactive-map/map.blade.php`.

Troubleshooting
---------------

[](#troubleshooting)

### Map not displaying

[](#map-not-displaying)

1. **Check your layout file** - Ensure you have `@stack('styles')` in `` and `@stack('scripts')` before `` in your Blade layout file. Without these, the map styles and JavaScript won't load.
2. Ensure Leaflet.js is loading correctly (check browser console)
3. Verify the container ID is unique on the page
4. Check that the container has a defined height

### Markers not showing

[](#markers-not-showing)

1. Verify location coordinates are valid (lat/lng)
2. Check that locations array is not empty
3. Ensure coordinates are within valid range (-90 to 90 for lat, -180 to 180 for lng)

### Styles not applying

[](#styles-not-applying)

1. **Verify `@stack('styles')` is in your layout** - The component uses `@push('styles')` which requires `@stack('styles')` in your layout
2. Publish assets: `php artisan vendor:publish --tag=interactive-map-assets`
3. Clear view cache: `php artisan view:clear`
4. Check that CSS file is being loaded in browser DevTools

### JavaScript not working

[](#javascript-not-working)

1. **Verify `@stack('scripts')` is in your layout** - The component uses `@push('scripts')` which requires `@stack('scripts')` in your layout
2. Check browser console for JavaScript errors
3. Ensure Leaflet.js library is loading (check Network tab)

License
-------

[](#license)

MIT License

Support
-------

[](#support)

For issues, questions, or contributions, please visit the [GitHub repository](https://github.com/imamhsn195/laravel-interactive-map).

Changelog
---------

[](#changelog)

See [CHANGELOG.md](CHANGELOG.md) for version history.

###  Health Score

34

—

LowBetter than 77% of packages

Maintenance78

Regular maintenance activity

Popularity1

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity44

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% 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 ~0 days

Total

2

Last Release

114d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/bbece67b896d2832ed332c2a10df5713c716130910cf7002f50f94a199e73fed?d=identicon)[imamhsn195](/maintainers/imamhsn195)

---

Top Contributors

[![imamhsn195](https://avatars.githubusercontent.com/u/44502980?v=4)](https://github.com/imamhsn195 "imamhsn195 (6 commits)")

---

Tags

laravelgeolocationmapmapsleafletmarkersOpenStreetMapBlade componentinteractive-map

### Embed Badge

![Health badge](/badges/imamhsn195-interactive-map/health.svg)

```
[![Health](https://phpackages.com/badges/imamhsn195-interactive-map/health.svg)](https://phpackages.com/packages/imamhsn195-interactive-map)
```

###  Alternatives

[cornford/googlmapper

An easy way to integrate Google Maps with Laravel.

457447.9k4](/packages/cornford-googlmapper)[mediawiki/maps

Adds various mapping features to MediaWiki

84145.0k3](/packages/mediawiki-maps)[dragon-code/pretty-routes

Pretty Routes for Laravel

10058.7k4](/packages/dragon-code-pretty-routes)[interaction-design-foundation/laravel-geoip

Support for multiple Geographical Location services.

17221.0k3](/packages/interaction-design-foundation-laravel-geoip)[symfony/ux-map

Easily embed interactive maps in your Symfony application

18178.5k4](/packages/symfony-ux-map)[kolirt/laravel-openstreetmap

Package for openstreetmap.org

2332.5k](/packages/kolirt-laravel-openstreetmap)

PHPackages © 2026

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