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
Install
smnandre/symfony-ux-skills/ux-map
git clone https://github.com/smnandre/symfony-ux-skills
cp -r symfony-ux-skills/skills/ux-map ~/.claude/skills/ux-mapFrequently 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)
Read as markdown · JSON record · Browse the source repository
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