Seamless Maps Integration

Embed interactive maps in a breeze!

Decouple your code from your map provider: Google Maps, LeafLet. 

composer require symfony/ux-map

What Map gives you

  • Two renderers

    Leaflet or Google Maps, the same PHP API.

  • Markers and popups

    Place markers, attach HTML popups and info windows.

  • Shapes on top

    Polygons, polylines and circles over any tile layer.

  • Built in PHP

    Compose the whole map server-side, render it in Twig.

  • Stimulus hooks

    Extend the map from your own controllers.

Interactive Maps

Add Map to your app.

Render interactive Maps in PHP with Leaflet or Google Maps.

src/Controller/UxPackage/MapController.php 
// ... use statements hidden - click to show
 
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Attribute\Route;
use Symfony\UX\Map\InfoWindow;
use Symfony\UX\Map\Map;
use Symfony\UX\Map\Marker;
use Symfony\UX\Map\Point;
 

class MapController extends AbstractController
{
    #[Route('/map', name: 'app_map')]
    public function __invoke(): Response
    {
        $map = (new Map('default'))
            ->center(new Point(45.7534031, 4.8295061))
            ->zoom(6)

            ->addMarker(new Marker(
                position: new Point(45.7534031, 4.8295061),
                title: 'Lyon',
                infoWindow: new InfoWindow(
                    content: '<p>Thank you <a href="https://github.com/Kocal">@Kocal</a> for this component!</p>',
                )
            ));

        return $this->render('ux_packages/map.html.twig', [
            'map' => $map,
        ]);
    }
}
templates/ux_packages/map.html.twig 
{% extends 'base.html.twig' %}

{% block body %}
    <div>
        {# The map must have a defined height #}
        {{ ux_map(map, {style: 'height: 600px;'}) }}
    </div>
{% endblock %}
Symfony logo

UX Map

Everything is a PHP object

What you can put on a map.

A Map is built the same way a form is: you describe it in PHP, the renderer turns it into JavaScript.

Markers and info windows

Attach a title and an HTML popup to any point. You write the popup content in PHP, no template needed.

$map->addMarker(new Marker(
    position: new Point(48.8566, 2.3522),
    title: 'Paris',
    infoWindow: new InfoWindow(
        content: '<p>Come and visit!</p>',
    ),
));

Shapes over the tiles

Polygons, polylines, circles and rectangles share the same builder, and each one can carry its own popup.

$map
    ->addPolyline(new Polyline(
        points: [$lyon, $paris],
    ))
    ->addCircle(new Circle(
        center: $lyon,
        radius: 25_000,
    ));

Swap the renderer

The same Map renders with Leaflet or Google Maps. Change the DSN, not your controller.

ux_map:
    renderer: '%env(resolve:UX_MAP_DSN)%'

# UX_MAP_DSN=leaflet://default
# UX_MAP_DSN=google://GOOGLE_MAPS_API_KEY@default

Install Map.

$ composer require symfony/ux-map

More from Symfony UX.

Map is one package among many. They share the same Stimulus foundation and install the same way.

Image for the Stylized Dropzone UX package

Stylized Dropzone

Form type for stylized "drop zone" for file uploads

Image for the Notify UX package

Notify

Trigger native browser notifications from inside PHP

Image for the CalendarLink UX package

CalendarLink

Let users add your events to their calendar of choice in one click.

Browse every package

Keep Map at hand.

Documentation, the people behind it, and where to ask when something does not behave.

Documentation

Symfony UX Map documentation
Screencasts

Watch UX screencasts on SymfonyCasts.
Community

Feedback · support · contributions.