Merge pull request #32 from koossaayy/feat/html_in_markers

koossaayy · web-flow · commit baa28eeb659f · 2024-09-10T23:07:51.000+01:00
Adding HTML description for markers
diff --git a/README.md b/README.md
@@ -116,7 +116,25 @@ To add markers to your map, you can use the `:markers` attribute, as follows :
 ```
 
 The `:markers` attribute accepts an array of arrays, each array must have at least the `long` and `lat` keys.
-If you want to add a popup description, you may use the `description` key.
+If you want to add a popup description, you may use the `description` key. If you want to enable HTML description, you may add `html` key and set it to true to enable it. However there is a catch, you can't directly pass the HTML string, you should encapsulate it in a PHP variable and pass the variable to the array.
+For example:
+
+```php
+//Somewhere in your code
+$htmlString = '<p>Hello world</p>';
+```
+
+```html
+<x-mapbox
+    id="mapId"
+    :markers="[['lat' => 8, 'long' => 10, 'description' => $htmlString, 'html' => true], ['lat'=> 9, 'long' => 10]]"
+/>
+```
+
+If the array is missing the `html` key, it won't render the passed variable, so make sure to pass it if you want to render an HTML description.
+
+> **Note**
+> Please notice that `description` key accepts HTML, and it will render it, so if you are getting your data from your users, please make sure to sanitize it before using it.
 
 Also you can customize the marker icons, instead of using the default ones provided by Mapbox.
 To do so you can add `icon` key to the array of markers as follows:
diff --git a/resources/views/includes/script.blade.php b/resources/views/includes/script.blade.php
@@ -54,10 +54,15 @@
         markerInLoop{{ $id }}.setLngLat([{{ $marker['long'] }}, {{ $marker['lat'] }}]);
 
         @isset($marker['description'])
-
-            markerInLoop{{ $id }}.setPopup(new mapboxgl.Popup({
-                offset: 25
-            }).setText('{{ $marker['description'] }}'))
+            @if (isset($marker['html']) && $marker['html'])
+                markerInLoop{{ $id }}.setPopup(new mapboxgl.Popup({
+                    offset: 25
+                }).setHTML(`{!! $marker['description'] !!}`))
+            @else
+                markerInLoop{{ $id }}.setPopup(new mapboxgl.Popup({
+                    offset: 25
+                }).setText(`{{ $marker['description'] }}`))
+            @endif
         @endisset
 
         markerInLoop{{ $id }}.addTo(map{{ $id }});
diff --git a/tests/MapboxRenderingTest.php b/tests/MapboxRenderingTest.php
@@ -121,3 +121,17 @@
     $view->assertSee('map4');
     $view->assertSee('map5');
 });
+
+it('can render html description', function () {
+    $html = <<<HTML
+    <div class="card">
+        <p>Hello World</p>
+    </div>
+    HTML;
+
+    $view = $this->component(Mapbox::class, ['id' => 'map', 'markers' => [
+        ['lat' => '1', 'long' => '1', 'icon' => '<img src="https://placekitten.com/g/50/50" style="border-radius: 50%" />', 'html' => true, 'description' => $html],
+    ]]);
+
+    $view->assertSee('Hello World');
+});
