Skip to content

Commit ec1df8c

Browse files
sdebackersdebacker
committed
Better map code
1 parent 758fac7 commit ec1df8c

File tree

1 file changed

+53
-67
lines changed

1 file changed

+53
-67
lines changed

‎resources/js/public/map.ts‎

Lines changed: 53 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,48 @@
1-
declare var google: any;
21
import styles from './map-styles';
32
import getMarkerPopup from './map-popup';
4-
import {
5-
MarkerClusterer,
6-
SuperClusterAlgorithm,
7-
} from '@googlemaps/markerclusterer';
3+
import { MarkerClusterer, SuperClusterAlgorithm } from '@googlemaps/markerclusterer';
84

95
export default async (): Promise<void> => {
10-
const mapElement = document.getElementById('map') as HTMLElement,
11-
apiUrl: any = mapElement.dataset.url,
12-
noButton: any = mapElement.dataset.noButton,
13-
locale: any = document.documentElement.getAttribute('lang'),
14-
buttonLabel: any = mapElement.dataset.buttonLabel,
15-
popupContent = document.createElement('div'),
16-
shouldUseCustomPopup: boolean = true;
17-
let bounds = new google.maps.LatLngBounds(),
18-
places: any[] = [],
19-
markers: google.maps.marker = [];
20-
const infoWindow = new google.maps.InfoWindow();
21-
const map = new google.maps.Map(
22-
document.getElementById('map') as HTMLElement,
23-
{
6+
const mapElement: HTMLDivElement = document.getElementById('map') as HTMLDivElement,
7+
apiUrl: string = mapElement.dataset.url as string,
8+
noButton: string = mapElement.dataset.noButton as string,
9+
locale: string = document.documentElement.getAttribute('lang') as string,
10+
buttonLabel: string = mapElement.dataset.buttonLabel as string,
11+
popupContent: HTMLDivElement = document.createElement('div') as HTMLDivElement,
12+
useCustomPopup: boolean = true,
13+
infoWindow: google.maps.InfoWindow = new google.maps.InfoWindow(),
14+
map: google.maps.Map = new google.maps.Map(mapElement, {
2415
mapTypeId: 'roadmap',
2516
zoom: 12,
2617
mapTypeControl: false,
2718
streetViewControl: false,
2819
styles,
29-
},
30-
);
20+
});
21+
let bounds: google.maps.LatLngBounds = new google.maps.LatLngBounds(),
22+
places: object[] = [],
23+
markers: google.maps.Marker[] = [],
24+
markerClusterer: MarkerClusterer = new MarkerClusterer({
25+
map,
26+
algorithm: new SuperClusterAlgorithm({ radius: 30 }),
27+
renderer: {
28+
render: ({ count, position }) => {
29+
return new google.maps.Marker({
30+
position,
31+
icon: {
32+
anchor: new google.maps.Point(15, 15),
33+
url: '/img/marker-cluster.svg',
34+
},
35+
label: {
36+
text: String(count),
37+
color: 'rgba(255,255,255,1)',
38+
fontSize: '12px',
39+
fontWeight: '700',
40+
},
41+
zIndex: Number(google.maps.Marker.MAX_ZINDEX) + count,
42+
});
43+
},
44+
},
45+
});
3146

3247
try {
3348
const response = await fetch(apiUrl, {
@@ -42,13 +57,9 @@ export default async (): Promise<void> => {
4257
}
4358

4459
const buildContent = ({ place }: { place: any }): string => {
45-
let coords = [];
46-
let htmlString = '<div class="popup-bubble-content">';
47-
htmlString += place.image
48-
? '<img class="popup-bubble-content-image" src="/storage/' +
49-
place.image.path +
50-
'" height="40" alt="">'
51-
: '';
60+
let coords: string[] = [];
61+
let htmlString: string = '<div class="popup-bubble-content">';
62+
htmlString += place.image ? '<img class="popup-bubble-content-image" src="/storage/' + place.image.path + '" height="40" alt="">' : '';
5263
htmlString += '<h3 class="popup-bubble-content-title">';
5364
htmlString += place.title[locale];
5465
htmlString += '</h3>';
@@ -59,10 +70,7 @@ export default async (): Promise<void> => {
5970
htmlString += coords.join('<br>');
6071
htmlString += '</div>';
6172
if (!noButton) {
62-
htmlString +=
63-
'<a class="popup-bubble-content-button" href="' +
64-
place.url +
65-
'">';
73+
htmlString += '<a class="popup-bubble-content-button" href="' + place.url + '">';
6674
htmlString += buttonLabel ?? 'More info';
6775
htmlString += '</a>';
6876
}
@@ -72,23 +80,23 @@ export default async (): Promise<void> => {
7280
};
7381

7482
places.forEach((place: any) => {
75-
const marker = new google.maps.Marker({
76-
position: new google.maps.LatLng(place.latitude, place.longitude),
77-
map: map,
78-
icon: place.id === 1 ? '/img/marker-1.svg' : '/img/marker-2.svg',
79-
title: place['title'][locale],
80-
optimized: false,
81-
});
82-
bounds.extend(marker.position);
83-
marker.addListener('click', () => {
83+
const position: google.maps.LatLng = new google.maps.LatLng(place.latitude, place.longitude),
84+
marker: google.maps.Marker = new google.maps.Marker({
85+
position,
86+
icon: place.id === 1 ? '/img/marker-1.svg' : '/img/marker-2.svg',
87+
title: place['title'][locale],
88+
optimized: false,
89+
});
90+
bounds.extend(position);
91+
marker.addListener('click', (): void => {
8492
popupContent.innerHTML = buildContent({ place });
85-
if (shouldUseCustomPopup) {
93+
if (useCustomPopup) {
8694
// Custom Popup
8795
const MarkerPopup = getMarkerPopup();
88-
const popup = new MarkerPopup(marker.position, popupContent);
96+
const popup = new MarkerPopup(position, popupContent);
8997
popup.setMap(map);
9098
setTimeout(() => {
91-
map.panTo(marker.position);
99+
map.panTo(position);
92100
map.panBy(0, -50);
93101
}, 300);
94102
} else {
@@ -99,31 +107,9 @@ export default async (): Promise<void> => {
99107
}
100108
});
101109
markers.push(marker);
110+
markerClusterer.addMarker(marker);
102111
});
103112

104-
new MarkerClusterer({
105-
map,
106-
markers,
107-
algorithm: new SuperClusterAlgorithm({ radius: 30 }),
108-
renderer: {
109-
render: ({ count, position }) => {
110-
return new google.maps.Marker({
111-
position,
112-
icon: {
113-
anchor: new google.maps.Point(15, 15),
114-
url: '/img/marker-cluster.svg',
115-
},
116-
label: {
117-
text: String(count),
118-
color: 'rgba(255,255,255,1)',
119-
fontSize: '12px',
120-
fontWeight: '700',
121-
},
122-
zIndex: Number(google.maps.Marker.MAX_ZINDEX) + count,
123-
});
124-
},
125-
},
126-
});
127113
if (markers.length === 1) {
128114
google.maps.event.trigger(markers[0], 'click');
129115
} else {

0 commit comments

Comments
 (0)