Skip to content

Commit

Permalink
CS
Browse files Browse the repository at this point in the history
  • Loading branch information
sdebacker committed Jul 15, 2023
1 parent b982ece commit 90bd437
Show file tree
Hide file tree
Showing 2 changed files with 34 additions and 13 deletions.
14 changes: 11 additions & 3 deletions resources/js/public/map-popup.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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. */
Expand All @@ -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';
Expand Down
33 changes: 23 additions & 10 deletions resources/js/public/map.ts
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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, {
Expand All @@ -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>';
Expand All @@ -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>';
}
Expand Down

0 comments on commit 90bd437

Please sign in to comment.