Skip to content

Commit ee9fbc8

Browse files
smnandresmnandre
committed
[Site] UX Map page
(very simple page for now, but i'd like to deploy _a_ page asap... and then we'll have more time for demos, docs...)
1 parent 92ad2de commit ee9fbc8

File tree

21 files changed

+413
-32
lines changed

21 files changed

+413
-32
lines changed

‎ux.symfony.com/.env

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,3 +41,9 @@ DATABASE_URL="sqlite:///%kernel.project_dir%/var/data.db"
4141
###> symfony/mercure-notifier ###
4242
MERCURE_DSN=mercure://default
4343
###< symfony/mercure-notifier ###
44+
45+
###> symfony/ux-leaflet-map ###
46+
# Options available at https://github.com/symfony/symfony-ux/blob/2.x/src/Map/src/Bridge/Leaflet/README.md
47+
#
48+
UX_MAP_DSN=leaflet://default
49+
###< symfony/ux-leaflet-map ###

‎ux.symfony.com/assets/controllers.json

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,12 @@
105105
"enabled": true,
106106
"fetch": "lazy"
107107
}
108+
},
109+
"@symfony/ux-leaflet-map": {
110+
"map": {
111+
"enabled": true,
112+
"fetch": "lazy"
113+
}
108114
}
109115
},
110116
"entrypoints": []

‎ux.symfony.com/assets/images/ux_packages/map-1200x675.png

70.9 KB
Loading

‎ux.symfony.com/assets/images/ux_packages/map.svg

Lines changed: 4 additions & 0 deletions
Loading

‎ux.symfony.com/assets/styles/components/_PackageBox.scss

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -77,10 +77,6 @@
7777
justify-content: center;
7878
flex-shrink: 0;
7979

80-
[data-bs-theme="dark"] & {
81-
background-blend-mode: darken;
82-
}
83-
8480
img {
8581
width: calc(0.4 * var(--logo-size));
8682
height: auto;

‎ux.symfony.com/assets/styles/components/_PackageHeader.scss

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,4 @@
1515
.AppHeader + * & {
1616
padding-top: 3rem;
1717
}
18-
19-
[data-bs-theme="dark"] & {
20-
background-blend-mode: hue !important;
21-
}
2218
}

‎ux.symfony.com/assets/styles/sections/_hero.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,8 @@
1616
}
1717

1818
.hero-sub-text {
19-
width: 35%;
19+
width: 40%;
20+
text-wrap: balance;
2021
}
2122

2223
@media (max-width: 1114px) {

‎ux.symfony.com/composer.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,9 @@
3838
"symfony/ux-dropzone": "2.x-dev",
3939
"symfony/ux-icons": "2.x-dev",
4040
"symfony/ux-lazy-image": "2.x-dev",
41+
"symfony/ux-leaflet-map": "^2.19",
4142
"symfony/ux-live-component": "2.x-dev",
43+
"symfony/ux-map": "^2.19",
4244
"symfony/ux-notify": "2.x-dev",
4345
"symfony/ux-react": "2.x-dev",
4446
"symfony/ux-svelte": "2.x-dev",

‎ux.symfony.com/composer.lock

Lines changed: 149 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎ux.symfony.com/config/bundles.php

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,4 +31,5 @@
3131
Symfony\UX\TogglePassword\TogglePasswordBundle::class => ['all' => true],
3232
Symfonycasts\SassBundle\SymfonycastsSassBundle::class => ['all' => true],
3333
Symfony\UX\Icons\UXIconsBundle::class => ['all' => true],
34+
Symfony\UX\Map\UXMapBundle::class => ['all' => true],
3435
];

‎ux.symfony.com/config/packages/ux_map.yaml

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
ux_map:
2+
# https://symfony.com/bundles/ux-map/current/index.html#available-renderers
3+
renderer: '%env(resolve:default::UX_MAP_DSN)%'

‎ux.symfony.com/importmap.php

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,9 @@
5656
'@symfony/ux-live-component' => [
5757
'path' => './vendor/symfony/ux-live-component/assets/dist/live_controller.js',
5858
],
59+
'@symfony/ux-leaflet-map' => [
60+
'path' => './vendor/symfony/ux-leaflet-map/assets/dist/map_controller.js',
61+
],
5962
'bootstrap' => [
6063
'version' => '5.3.3',
6164
],
@@ -190,4 +193,14 @@
190193
'chart.js' => [
191194
'version' => '4.4.3',
192195
],
196+
'@symfony/ux-map/abstract-map-controller' => [
197+
'path' => './vendor/symfony/ux-map/assets/dist/abstract_map_controller.js',
198+
],
199+
'leaflet' => [
200+
'version' => '1.9.4',
201+
],
202+
'leaflet/dist/leaflet.min.css' => [
203+
'version' => '1.9.4',
204+
'type' => 'css',
205+
],
193206
];

‎ux.symfony.com/src/Controller/UxPackage/MapController.php

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<?php
2+
3+
/*
4+
* This file is part of the Symfony package.
5+
*
6+
* (c) Fabien Potencier <[email protected]>
7+
*
8+
* For the full copyright and license information, please view the LICENSE
9+
* file that was distributed with this source code.
10+
*/
11+
12+
namespace App\Controller\UxPackage;
13+
14+
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
15+
use Symfony\Component\HttpFoundation\Response;
16+
use Symfony\Component\Routing\Attribute\Route;
17+
use Symfony\UX\Map\Bridge\Leaflet\LeafletOptions;
18+
use Symfony\UX\Map\Bridge\Leaflet\Option\TileLayer;
19+
use Symfony\UX\Map\InfoWindow;
20+
use Symfony\UX\Map\Map;
21+
use Symfony\UX\Map\Marker;
22+
use Symfony\UX\Map\Point;
23+
24+
class MapController extends AbstractController
25+
{
26+
#[Route('/map', name: 'app_map')]
27+
public function __invoke(): Response
28+
{
29+
$map = (new Map('default'))
30+
->center(new Point(45.7534031, 4.8295061))
31+
->zoom(6)
32+
33+
->addMarker(new Marker(
34+
position: new Point(45.7534031, 4.8295061),
35+
title: 'Lyon',
36+
infoWindow: new InfoWindow(
37+
content: '<p>Thank you <a href="https://github.com/kocal">@kocal</a> for this component!</p>',
38+
)
39+
))
40+
41+
->options((new LeafletOptions())
42+
->tileLayer(new TileLayer(
43+
url: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
44+
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
45+
options: ['maxZoom' => 19]
46+
))
47+
);
48+
49+
return $this->render('ux_packages/map.html.twig', [
50+
'map' => $map,
51+
]);
52+
}
53+
}

‎ux.symfony.com/src/Service/UxPackageRepository.php

Lines changed: 26 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -21,19 +21,6 @@ class UxPackageRepository
2121
public function findAll(?string $query = null): array
2222
{
2323
$packages = [
24-
(new UxPackage(
25-
'turbo',
26-
'Turbo',
27-
'app_turbo',
28-
'#5920A0',
29-
'linear-gradient(95deg, #5920A0 -5%, #844EC9 105%)',
30-
'Single-page Symfony app',
31-
'Integration with Turbo for single-page-app and real-time experience',
32-
'I need to transform my app into an SPA!'
33-
))
34-
->setDocsLink('https://turbo.hotwired.dev/handbook/introduction', 'Documentation specifically for the Turbo JavaScript library.')
35-
->setScreencastLink('https://symfonycasts.com/screencast/turbo', 'Go deep into all 3 parts of Turbo.'),
36-
3724
new UxPackage(
3825
'icons',
3926
'UX Icons',
@@ -46,6 +33,19 @@ public function findAll(?string $query = null): array
4633
'icons.svg',
4734
),
4835

36+
new UxPackage(
37+
'map',
38+
'UX Map',
39+
'app_map',
40+
'#fff',
41+
// 'linear-gradient(to bottom right, #58D984EB, #0083A2D1), #3386dfd4',
42+
'linear-gradient(to bottom right, #1BA980, #209127 75%, #C0CB2A)',
43+
'Interactive Maps',
44+
'Render interactive Maps in PHP with Leaflet or Google Maps.',
45+
'I need to display markers on a Map.',
46+
'map.svg',
47+
),
48+
4949
new UxPackage(
5050
'twig-component',
5151
'Twig Components',
@@ -68,6 +68,19 @@ public function findAll(?string $query = null): array
6868
'I need Twig templates that update in real-time!'
6969
),
7070

71+
(new UxPackage(
72+
'turbo',
73+
'Turbo',
74+
'app_turbo',
75+
'#5920A0',
76+
'linear-gradient(95deg, #5920A0 -5%, #844EC9 105%)',
77+
'Single-page Symfony app',
78+
'Integration with Turbo for single-page-app and real-time experience',
79+
'I need to transform my app into an SPA!'
80+
))
81+
->setDocsLink('https://turbo.hotwired.dev/handbook/introduction', 'Documentation specifically for the Turbo JavaScript library.')
82+
->setScreencastLink('https://symfonycasts.com/screencast/turbo', 'Go deep into all 3 parts of Turbo.'),
83+
7184
new UxPackage(
7285
'autocomplete',
7386
'Autocomplete',

0 commit comments

Comments
 (0)