Skip to content

[Map] Fix Twig Component example #2373

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Nov 14, 2024
Merged

[Map] Fix Twig Component example #2373

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 22 additions & 24 deletions src/Map/doc/index.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,11 +30,11 @@ Configuration
Configuration is done in your ``config/packages/ux_map.yaml`` file:

.. code-block:: yaml

# config/packages/ux_map.yaml
ux_map:
renderer: '%env(resolve:default::UX_MAP_DSN)%'

# Google Maps specific configuration
google_maps:
# Configure the default Map Id (https://developers.google.com/maps/documentation/get-map-id),
Expand All @@ -47,8 +47,8 @@ Map renderers
~~~~~~~~~~~~~

The Symfony UX Map bundle supports multiple renderers. A map renderer is a
service that provides the code and graphic assets required to render and
interact with a map in the browser.
service that provides the code and graphic assets required to render and
interact with a map in the browser.

Available renderers
~~~~~~~~~~~~~~~~~~~
Expand All @@ -75,7 +75,7 @@ Create a map

A map is created by calling ``new Map()``. You can configure the center, zoom, and add markers.
Start by creating a new map instance::

use Symfony\UX\Map\Map;

// Create a new map instance
Expand All @@ -88,12 +88,12 @@ You can set the center and zoom of the map using the ``center()`` and ``zoom()``

use Symfony\UX\Map\Map;
use Symfony\UX\Map\Point;

$myMap
// Explicitly set the center and zoom
->center(new Point(46.903354, 1.888334))
->zoom(6)

// Or automatically fit the bounds to the markers
->fitBoundsToMarkers()
;
Expand All @@ -105,13 +105,13 @@ You can add markers to a map using the ``addMarker()`` method::

$myMap
->addMarker(new Marker(
position: new Point(48.8566, 2.3522),
position: new Point(48.8566, 2.3522),
title: 'Paris'
))

// With an info window associated to the marker:
->addMarker(new Marker(
position: new Point(45.7640, 4.8357),
position: new Point(45.7640, 4.8357),
title: 'Lyon',
infoWindow: new InfoWindow(
headerContent: '<b>Lyon</b>',
Expand Down Expand Up @@ -174,7 +174,7 @@ You can add custom HTML attributes too:
Twig Function ``ux_map()``
~~~~~~~~~~~~~~~~~~~~~~~~~~

The ``ux_map()`` Twig function allows you to create and render a map in your Twig
The ``ux_map()`` Twig function allows you to create and render a map in your Twig
templates. The function accepts the same arguments as the ``Map`` class:

.. code-block:: html+twig
Expand Down Expand Up @@ -216,10 +216,8 @@ Alternatively, you can use the ``<twig:ux:map />`` component.
"infoWindow": {"content": "Welcome to <b>New York</b>"}
}
]'
attributes='{
"class": "foo",
"style": "height: 800px; width: 100%; border: 4px solid red; margin-block: 10vh;"
}'
class="foo"
style="height: 800px; width: 100%; border: 4px solid red; margin-block: 10vh;"
/>

The ``<twig:ux:map />`` component requires the `Twig Component`_ package.
Expand All @@ -236,9 +234,9 @@ Symfony UX Map allows you to extend its default behavior using a custom Stimulus
.. code-block:: javascript

// assets/controllers/mymap_controller.js

import { Controller } from '@hotwired/stimulus';

export default class extends Controller {
connect() {
this.element.addEventListener('ux:map:pre-connect', this._onPreConnect);
Expand All @@ -248,7 +246,7 @@ Symfony UX Map allows you to extend its default behavior using a custom Stimulus
this.element.addEventListener('ux:map:info-window:before-create', this._onInfoWindowBeforeCreate);
this.element.addEventListener('ux:map:info-window:after-create', this._onInfoWindowAfterCreate);
}

disconnect() {
// You should always remove listeners when the controller is disconnected to avoid side effects
this.element.removeEventListener('ux:map:pre-connect', this._onPreConnect);
Expand All @@ -258,41 +256,41 @@ Symfony UX Map allows you to extend its default behavior using a custom Stimulus
this.element.removeEventListener('ux:map:info-window:before-create', this._onInfoWindowBeforeCreate);
this.element.removeEventListener('ux:map:info-window:after-create', this._onInfoWindowAfterCreate);
}

_onPreConnect(event) {
// The map is not created yet
// You can use this event to configure the map before it is created
console.log(event.detail.options);
}

_onConnect(event) {
// The map, markers and infoWindows are created
// The instances depend on the renderer you are using
console.log(event.detail.map);
console.log(event.detail.markers);
console.log(event.detail.infoWindows);
}

_onMarkerBeforeCreate(event) {
// The marker is not created yet
// You can use this event to configure the marker before it is created
console.log(event.detail.definition);
}

_onMarkerAfterCreate(event) {
// The marker is created
// The instance depends on the renderer you are using
console.log(event.detail.marker);
}

_onInfoWindowBeforeCreate(event) {
// The infoWindow is not created yet
// You can use this event to configure the infoWindow before it is created
console.log(event.detail.definition);
// The associated marker instance is also available
console.log(event.detail.marker);
}

_onInfoWindowAfterCreate(event) {
// The infoWindow is created
// The instance depends on the renderer you are using
Expand All @@ -306,7 +304,7 @@ Symfony UX Map allows you to extend its default behavior using a custom Stimulus
Then, you can use this controller in your template:

.. code-block:: twig

{{ ux_map(my_map, { 'data-controller': 'mymap', style: 'height: 300px' }) }}

.. tip::
Expand Down