Skip to content

Commit

Permalink
[Map] Change LatLng to Point
Browse files Browse the repository at this point in the history
  • Loading branch information
@Kocal
Kocal committed Jul 31, 2024
1 parent 600b8a6 commit 9b78085
Show file tree
Hide file tree
Showing 21 changed files with 477 additions and 321 deletions.
121 changes: 74 additions & 47 deletions src/Map/assets/dist/abstract_map_controller.d.ts
View file
Original file line number Diff line number Diff line change
@@ -1,55 +1,82 @@
import { Controller } from '@hotwired/stimulus';
export type LatLng = {
lat: number;
lng: number;
import { Controller } from "@hotwired/stimulus";
export type Point = {
lat: number;
lng: number;
};
export type MapView<Options, MarkerOptions, InfoWindowOptions> = {
center: LatLng;
zoom: number;
fitBoundsToMarkers: boolean;
markers: Array<MarkerDefinition<MarkerOptions, InfoWindowOptions>>;
options: Options;
center: Point;
zoom: number;
fitBoundsToMarkers: boolean;
markers: Array<MarkerDefinition<MarkerOptions, InfoWindowOptions>>;
options: Options;
};
export type MarkerDefinition<MarkerOptions, InfoWindowOptions> = {
position: LatLng;
title: string | null;
infoWindow?: Omit<InfoWindowDefinition<InfoWindowOptions>, 'position'>;
rawOptions?: MarkerOptions;
position: Point;
title: string | null;
infoWindow?: Omit<InfoWindowDefinition<InfoWindowOptions>, "position">;
rawOptions?: MarkerOptions;
};
export type InfoWindowDefinition<InfoWindowOptions> = {
headerContent: string | null;
content: string | null;
position: LatLng;
opened: boolean;
autoClose: boolean;
rawOptions?: InfoWindowOptions;
headerContent: string | null;
content: string | null;
position: Point;
opened: boolean;
autoClose: boolean;
rawOptions?: InfoWindowOptions;
};
export default abstract class<MapOptions, Map, MarkerOptions, Marker, InfoWindowOptions, InfoWindow> extends Controller<HTMLElement> {
static values: {
providerOptions: ObjectConstructor;
view: ObjectConstructor;
};
viewValue: MapView<MapOptions, MarkerOptions, InfoWindowOptions>;
protected map: Map;
protected markers: Array<Marker>;
protected infoWindows: Array<InfoWindow>;
initialize(): void;
connect(): void;
protected abstract doCreateMap({ center, zoom, options, }: {
center: LatLng;
zoom: number;
options: MapOptions;
}): Map;
createMarker(definition: MarkerDefinition<MarkerOptions, InfoWindowOptions>): Marker;
protected abstract doCreateMarker(definition: MarkerDefinition<MarkerOptions, InfoWindowOptions>): Marker;
protected createInfoWindow({ definition, marker, }: {
definition: MarkerDefinition<MarkerOptions, InfoWindowOptions>['infoWindow'];
marker: Marker;
}): InfoWindow;
protected abstract doCreateInfoWindow({ definition, marker, }: {
definition: MarkerDefinition<MarkerOptions, InfoWindowOptions>['infoWindow'];
marker: Marker;
}): InfoWindow;
protected abstract doFitBoundsToMarkers(): void;
private dispatchEvent;
export default abstract class<
MapOptions,
Map,
MarkerOptions,
Marker,
InfoWindowOptions,
InfoWindow,
> extends Controller<HTMLElement> {
static values: {
providerOptions: ObjectConstructor;
view: ObjectConstructor;
};
viewValue: MapView<MapOptions, MarkerOptions, InfoWindowOptions>;
protected map: Map;
protected markers: Array<Marker>;
protected infoWindows: Array<InfoWindow>;
initialize(): void;
connect(): void;
protected abstract doCreateMap({
center,
zoom,
options,
}: {
center: Point;
zoom: number;
options: MapOptions;
}): Map;
createMarker(
definition: MarkerDefinition<MarkerOptions, InfoWindowOptions>,
): Marker;
protected abstract doCreateMarker(
definition: MarkerDefinition<MarkerOptions, InfoWindowOptions>,
): Marker;
protected createInfoWindow({
definition,
marker,
}: {
definition: MarkerDefinition<
MarkerOptions,
InfoWindowOptions
>["infoWindow"];
marker: Marker;
}): InfoWindow;
protected abstract doCreateInfoWindow({
definition,
marker,
}: {
definition: MarkerDefinition<
MarkerOptions,
InfoWindowOptions
>["infoWindow"];
marker: Marker;
}): InfoWindow;
protected abstract doFitBoundsToMarkers(): void;
private dispatchEvent;
}
10 changes: 5 additions & 5 deletions src/Map/assets/src/abstract_map_controller.ts
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
import { Controller } from '@hotwired/stimulus';

export type LatLng = { lat: number; lng: number };
export type Point = { lat: number; lng: number };

export type MapView<Options, MarkerOptions, InfoWindowOptions> = {
center: LatLng;
center: Point;
zoom: number;
fitBoundsToMarkers: boolean;
markers: Array<MarkerDefinition<MarkerOptions, InfoWindowOptions>>;
options: Options;
};

export type MarkerDefinition<MarkerOptions, InfoWindowOptions> = {
position: LatLng;
position: Point;
title: string | null;
infoWindow?: Omit<InfoWindowDefinition<InfoWindowOptions>, 'position'>;
rawOptions?: MarkerOptions;
Expand All @@ -20,7 +20,7 @@ export type MarkerDefinition<MarkerOptions, InfoWindowOptions> = {
export type InfoWindowDefinition<InfoWindowOptions> = {
headerContent: string | null;
content: string | null;
position: LatLng;
position: Point;
opened: boolean;
autoClose: boolean;
rawOptions?: InfoWindowOptions;
Expand Down Expand Up @@ -72,7 +72,7 @@ export default abstract class<
zoom,
options,
}: {
center: LatLng;
center: Point;
zoom: number;
options: MapOptions;
}): Map;
Expand Down
42 changes: 21 additions & 21 deletions src/Map/doc/index.rst
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ Configuration
Configuration is done in your ``config/packages/ux_map.yaml`` file:

.. code-block:: yaml
# config/packages/ux_map.yaml
ux_map:
renderer: '%env(UX_MAP_DSN)%'
Expand All @@ -60,44 +60,44 @@ Creating and rendering
~~~~~~~~~~~~~~~~~~~~~~

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

Check failure on line 62 in src/Map/doc/index.rst

View workflow job for this annotation

GitHub Actions / DOCtor-RST 

Please reorder the use statements alphabetically

namespace App\Controller;

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\LatLng;
use Symfony\UX\Map\Point;
use Symfony\UX\Map\Map;
use Symfony\UX\Map\Marker;

final class HomeController extends AbstractController
{
#[Route('/')]
public function __invoke(): Response
{
// 1. Create a new map instance
$myMap = (new Map());
->center(new LatLng(46.903354, 1.888334))
->center(new Point(46.903354, 1.888334))
->zoom(6)
;

// 2. You can add markers, with an optional info window
$myMap
->addMarker(new Marker(
position: new LatLng(48.8566, 2.3522),
position: new Point(48.8566, 2.3522),
title: 'Paris'
))
->addMarker(new Marker(
position: new LatLng(45.7640, 4.8357),
position: new Point(45.7640, 4.8357),
title: 'Lyon',
// With an info window
infoWindow: new InfoWindow(
headerContent: '<b>Lyon</b>',
content: 'The French town in the historic Rhône-Alpes region, located at the junction of the Rhône and Saône rivers.'
)
));

// 3. And inject the map in your template to render it
return $this->render('contact/index.html.twig', [
'my_map' => $myMap,
Expand All @@ -110,7 +110,7 @@ To render a map in your Twig template, use the ``render_map`` Twig function, e.g
.. code-block:: twig
{{ render_map(my_map) }}
{# or with custom attributes #}
{{ render_map(my_map, { style: 'height: 300px' }) }}
Expand All @@ -122,9 +122,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 @@ -134,7 +134,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._onInfoWindowBeforeConnect);
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 @@ -144,41 +144,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._onInfoWindowBeforeConnect);
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);
}
_onMarkerBeforeConnect(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);
}
_onInfoWindowBeforeConnect(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 @@ -191,7 +191,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
{{ render_map(my_map, { 'data-controller': 'mymap', style: 'height: 300px' }) }}
Backward Compatibility promise
Expand Down
Loading

0 comments on commit 9b78085

Please sign in to comment.