ux-map
UX Map brings interactive mapping to Symfony applications using either Leaflet or Google Maps as your renderer. Define maps in PHP, render them in Twig, and layer on Stimulus controllers for event handling. Supports markers, polygons, polylines, circles, and popup info windows.
UX Map lets you build interactive maps in Symfony with Leaflet or Google Maps, complete with markers, polygons, and info windows.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-06-14
UX Map lets you build interactive maps in Symfony with Leaflet or Google Maps, complete with markers, polygons, and info windows. UX Map brings interactive mapping to Symfony applications using either Leaflet or Google Maps as your renderer. Define maps in PHP, render them in Twig, and layer on Stimulus controllers for event handling. Supports markers, polygons, polylines, circles, and popup info windows.
Use it when
- UX Map supports both Leaflet and Google Maps renderers.
- UX Map makes adding markers straightforward—define them in your PHP controller with latitude and longitude coordinates.
Verify before relying
Read SKILL.md below before installing (4 files). Open directory: indexed for reading, not audited.
Install
smnandre/symfony-ux-skills/ux-map
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I add interactive maps to Symfony with UX Map?
UX Map lets you add interactive maps to Symfony applications using either Leaflet or Google Maps as your renderer. Define your map in PHP, render it in Twig templates, and layer on Stimulus controllers for event handling. UX Map supports markers, polygons, polylines, circles, and popup info windows out of the box.
Can I use Leaflet or Google Maps with UX Map in Symfony?
UX Map supports both Leaflet and Google Maps renderers. You choose and configure which renderer to use based on your project needs. Both options integrate seamlessly with Symfony and Twig, letting you switch between them without rewriting your map definitions.
How do I add markers to a map in UX Map?
UX Map makes adding markers straightforward—define them in your PHP controller with latitude and longitude coordinates, then render them in Twig. You can attach popup info windows to markers and handle click events using custom Stimulus controllers for interactive functionality.
Does UX Map support drawing shapes like polygons and polylines?
Yes, UX Map supports drawing multiple shape types including polygons, polylines, and circles. Define these shapes in PHP with your coordinate data, render them in Twig, and customize their appearance. You can also handle shape interactions through Stimulus event controllers.
Can I build reactive, real-time maps using UX Map?
UX Map integrates with Symfony's LiveComponent to build reactive, real-time maps. This lets you update map content dynamically without full page reloads, making it ideal for store locators, live tracking, and other real-time mapping features.
Why is my map not showing in Symfony, and how do I fix it?
Common map rendering issues in UX Map include zero-height containers and missing API keys. Ensure your map container has explicit height styling, verify your Google Maps API key is configured correctly if using Google Maps, and check browser console for JavaScript errors. UX Map documentation covers troubleshooting these configuration problems.
SKILL.md
Rendered from the published skill. Quoted content, verbatim.
UX Map
Interactive maps in Symfony with Leaflet or Google Maps. Build
(truncated - see the full file via the links below)
File tree — 4 files
skills/ux-map/SKILL.md
skills/ux-map/references/api.md
skills/ux-map/references/gotchas.md
skills/ux-map/references/patterns.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Display interactive maps with markers and shapes in Symfony applications”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
This skill covers the official vis.gl React wrapper for Google Maps, enabling you to embed interactive maps with markers, info windows, and custom controls in React and Next.js projects. It includes hooks for accessing the Maps API, handling draggable markers, and loading optional libraries like Places and Geocoding. Reference guides detail component APIs, common patterns, and geometry implementations.
LiveComponent lets you create interactive UI components in PHP and Twig that automatically re-render when users interact with them, all without writing JavaScript. Each user action triggers a server round-trip that updates the component and morphs the DOM, making it ideal for live search, real-time validation, dynamic filtering, and dependent form fields. Use it when your component's output depends on user input and requires server-side logic.
Symfony UX is a decision guide for selecting the right tool from Symfony's reactive frontend stack. It helps you navigate between Stimulus for DOM behavior, Turbo for page updates, TwigComponent for static UI, LiveComponent for server-driven interactivity, UX Icons for SVG rendering, and UX Map for interactive maps. Use it when you're unsure which package solves your problem or want to combine multiple tools.
Stimulus is a lightweight JavaScript framework that wires controllers to HTML via data attributes, letting you handle clicks, inputs, and DOM changes without rendering markup. Attach behavior to server-rendered elements using `data-controller`, `data-action`, and `data-target` attributes, then compose controllers for toggles, modals, dropdowns, and more. Clean up in `disconnect()` when Turbo navigates between pages.
TwigComponent enables you to compose reusable UI building blocks by pairing PHP classes with Twig templates, rendered server-side with zero JavaScript overhead. Define props, blocks, and computed properties to create everything from simple buttons to complex layout sections. Use class components for logic-heavy elements or anonymous Twig-only components for presentational markup.
Turbo delivers responsive, single-page application feel using only server-side HTML rendering. Drive handles automatic AJAX navigation across all links and forms, Frames scope updates to individual page sections, and Streams push multi-target DOM changes from the server—enabling lazy loading, inline editing, pagination, and real-time updates without client-side logic.