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 Twig Components UX package

Twig Components

Create PHP classes that can render themselves

Image for the Live Components UX package

Live Components

Build dynamic interfaces with zero JavaScript

Image for the Turbo UX package

Turbo

Integration with Turbo for single-page-app and real-time experience

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.