CS

Author: sdebacker

resources/js/public/map-popup.ts

@@ -40,7 +40,10 @@ export default () => {
                     event.stopPropagation();
                 }
             };
-            this.containerDiv.addEventListener('contextmenu', allowAnchorRightClicksHandler);
+            this.containerDiv.addEventListener(
+                'contextmenu',
+                allowAnchorRightClicksHandler,
+            );
         }
 
         /** Called when the popup is added to the map. */
@@ -57,10 +60,15 @@ export default () => {
 
         /** Called each frame when the popup needs to draw itself. */
         draw() {
-            const divPosition = this.getProjection().fromLatLngToDivPixel(this.position)!;
+            const divPosition = this.getProjection().fromLatLngToDivPixel(
+                this.position,
+            )!;
 
             // Hide the popup when it is far out of view.
-            const display = Math.abs(divPosition.x) < 4000 && Math.abs(divPosition.y) < 4000 ? 'block' : 'none';
+            const display =
+                Math.abs(divPosition.x) < 4000 && Math.abs(divPosition.y) < 4000
+                    ? 'block'
+                    : 'none';
 
             if (display === 'block') {
                 this.containerDiv.style.left = divPosition.x + 'px';

resources/js/public/map.ts

@@ -1,7 +1,10 @@
 declare var google: any;
 import styles from './map-styles';
 import getMarkerPopup from './map-popup';
-import { MarkerClusterer, SuperClusterAlgorithm } from '@googlemaps/markerclusterer';
+import {
+    MarkerClusterer,
+    SuperClusterAlgorithm,
+} from '@googlemaps/markerclusterer';
 
 export default async (): Promise<void> => {
     const mapElement = document.getElementById('map') as HTMLElement,
@@ -15,13 +18,16 @@ export default async (): Promise<void> => {
         places: any[] = [],
         markers: google.maps.marker = [];
     const infoWindow = new google.maps.InfoWindow();
-    const map = new google.maps.Map(document.getElementById('map') as HTMLElement, {
-        mapTypeId: 'roadmap',
-        zoom: 12,
-        mapTypeControl: false,
-        streetViewControl: false,
-        styles,
-    });
+    const map = new google.maps.Map(
+        document.getElementById('map') as HTMLElement,
+        {
+            mapTypeId: 'roadmap',
+            zoom: 12,
+            mapTypeControl: false,
+            streetViewControl: false,
+            styles,
+        },
+    );
 
     try {
         const response = await fetch(apiUrl, {
@@ -38,7 +44,11 @@ export default async (): Promise<void> => {
     const buildContent = ({ place }: { place: any }): string => {
         let coords = [];
         let htmlString = '<div class="popup-bubble-content">';
-        htmlString += place.image ? '<img class="popup-bubble-content-image" src="/storage/' + place.image.path + '" height="40" alt="">' : '';
+        htmlString += place.image
+            ? '<img class="popup-bubble-content-image" src="/storage/' +
+              place.image.path +
+              '" height="40" alt="">'
+            : '';
         htmlString += '<h3 class="popup-bubble-content-title">';
         htmlString += place.title[locale];
         htmlString += '</h3>';
@@ -49,7 +59,10 @@ export default async (): Promise<void> => {
         htmlString += coords.join('<br>');
         htmlString += '</div>';
         if (!noButton) {
-            htmlString += '<a class="popup-bubble-content-button" href="' + place.url + '">';
+            htmlString +=
+                '<a class="popup-bubble-content-button" href="' +
+                place.url +
+                '">';
             htmlString += buttonLabel ?? 'More info';
             htmlString += '</a>';
         }