Skip to content

Releases: vitormicillo/filament-map-picker

v1.4.1

05 Nov 16:10
Compare
Choose a tag to compare

Use can set the marker icon size by filament resource settings parameter ->iconSize() :

->iconSize(32) //integer value

Full Changelog: v1.4.0...v1.4.1

v1.4.0

05 Nov 11:48
Compare
Choose a tag to compare
  • User can customize marker icons now, It is possible to use SVG or base64 encoded value

Example in how to use custom SVG Icon when "edit" a record from database

                   Map::make('location')
                       ->hiddenLabel()
                       ->columnSpanFull()
                       ->defaultLocation(latitude: 52.8027, longitude: -1.0546)
                       ->afterStateHydrated(function (callable $set, callable $get, $state, ?Model $record) {
                           if ($record) {
                               $icon = YourModel::find($record->databasefield)->base64_image;

                               $set('location', [
                                       'lat' => $record->lat,
                                       'lng' => $record->lon,
                                       'icon' => $icon //Insert this icon key with the value
                                   ]);
                           }
                       })
                       ->extraStyles(['min-height: 30vh', 'border-radius: 5px'])
                       ->liveLocation(false, false, 5000)
                       ->showMarker()
                       ->markerColor("#FF0000")
                       ->showGeomanToolbar(false)
                       ->showFullscreenControl(true)
                       ->showZoomControl()
                       ->draggable()
                       ->tilesUrl(self::getMapBox())
                       ->zoom(6)
                       ->detectRetina()
                       ->showMyLocationButton(false)
                       ->extraControl(['zoomDelta' => 1, 'zoomSnap' => 2]),

Another way to update in real time if you have a list of icons in a dropdown list
You can display the icon in the list as well and use this icon to set as a marker in the map, like the example below.

                    Select::make('category_id')
                        ->label('Category')
                        ->suffixIcon('heroicon-s-square-3-stack-3d')
                        ->options(function () {
                            return YourModel::where('is_active', true)->get()
                                ->mapWithKeys(function ($item) {
                                    return [
                                        $item->id =>
                                        "<div style='display: flex; align-items: center;'>
                                            <img src='{$item->base64_image}' alt='category_icon' style='width: 20px; height: 20px; margin-right: 8px;' />
                                            <span>{$item->name}</span>
                                        </div>",
                                    ];
                                })
                                ->toArray();
                        })
                        ->searchable()
                        ->allowHtml()
                        ->required()
                        ->reactive()
                        ->afterStateUpdated(function ($state, callable $set, callable $get, $livewire){
                            $model = YourModel::find($state);
                            if($model && $model->iconcolumnname) {
                                $livewire->dispatch('update-marker-icon', ['icon' => $category->iconcolumnname]);
                            } else {
                               $livewire->dispatch('update-marker-icon',['icon' => null]) ;
                            }
                        }),

You can do it in your way, just call $livewire and pass the parameter 'update-marker-icon'

Full Changelog: v1.3.1...v.1.4.0

Full Changelog: v1.3.1...v1.4.0

v1.3.1

23 Oct 14:29
Compare
Choose a tag to compare
  • Update warning message after snapshot creation

Full Changelog: v1.2.2...v1.3.1

v1.3.0

23 Oct 11:52
Compare
Choose a tag to compare

New feature to capture image from the map

This is an example of the code in how to trigger the function in the map in order to capture the snapshot.
Note: Latitude and longitude are not mandatory, you can move the map and trigger the action to capture the image.

“If you have Geoman shapes drawn on your map, they will be included in the generated image.”

Actions::make([
   Action::make('capture_map_image')
       ->hiddenLabel()
       ->icon('heroicon-m-camera')
       ->color('info')
       ->action(function (callable $get, callable $set, $livewire) {
           $lat = $get('lat');
           $lon = $get('lon');

           if(!empty($lat) && !empty($lon)){
               $livewire->dispatch('capture-map-image');
           }
       })
   ])->columnSpan(1)

In your web.php file is necessary to add the route, i.e you can use a custom Controller
The map feature will post the blob image to this url /upload-map-image

Route::post('/upload-map-image', [MapController::class, 'uploadMapImage'])->name('upload.map.image');

Full Changelog: v1.2.1...v1.3.0

v1.2.2

03 Oct 10:59
Compare
Choose a tag to compare

Updated Readme

Full Changelog: v1.2.1...v1.2.2

v1.2.1

03 Oct 10:47
Compare
Choose a tag to compare

Leaflet full-screen styles are handled by JavaScript now

Full Changelog: v1.2.0...v1.2.1

v1.2.0

01 Oct 14:50
Compare
Choose a tag to compare

New option to disable Geoman tools bar in the map

Map::make('location')
      ->label('Location')
      ->columnSpanFull()
      ->defaultLocation(latitude: 52.8027, longitude: -1.0546)
      ->afterStateUpdated(function (Set $set, ?array $state): void {
             $set('latitude', $state['lat']);
             $set('longitude', $state['lng']);
      })
      ->afterStateHydrated(function ($state, $record, Set $set): void {
            // Use this to set the map in the marker location (edit)
           $set('location', ['lat' => $record->latitude, 'lng' => $record->longitude]);
      })
      ->extraStyles([
           'min-height: 50vh',
           'border-radius: 10px'
      ])
      ->liveLocation(true, true, 10000) // Updates live location every 10 seconds
      ->showMarker()
      ->showGeomanToolbar() // Display or not the geoman tools bar
      ->showFullscreenControl()
      ->showZoomControl()
      ->draggable()
      ->tilesUrl("https://tile.openstreetmap.de/{z}/{x}/{y}.png")
      ->zoom(12)
      ->detectRetina()
      ->showMyLocationButton()
      ->extraTileControl([])
      ->extraControl([
          'zoomDelta'    => 1,
          'zoomSnap'    => 2,
      ])

Full Changelog: v1.1.1...v1.2.0

1.1.0

20 Sep 10:59
Compare
Choose a tag to compare

In this update, improvements were made to the javascript file to update the geoJsonBox object in real time with the elements drawn on the map.

Impact
To test the plugin, I recommend creating in your resource file this field to view in real time the location data of the created areas.

Textarea::make('geomanbox')
      ->id('geomanbox')
      ->disabled()
      ->columnSpanFull()