Public/traveltracer
1
0
Fork 0
mirror of https://github.com/zebrajr/traveltracer.git synced 2025-12-05 12:20:26 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

update popup to display 2xX images instead of 1xX

Browse Source
This commit is contained in:
Carlos Sousa 2025-06-30 14:47:57 +02:00
parent 5afb9aa05f
commit 2b9bb3db55
1 changed files with 25 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
frontend/src/components/MapComponent.js
View File

@ -34,6 +34,7 @@ const useFetchMultipleData = (urls) => {
return data;
};
const IconMarker = memo(({ poi, icon }) => {
const openInNewTab = useCallback((url) => {
const newWindow = window.open(url, '_blank', 'noopener,noreferrer');
@ -46,21 +47,36 @@ const IconMarker = memo(({ poi, icon }) => {
<div>
<h2>{poi.name}</h2>
<p>{poi.description}</p>
{poi.images.map(([thumbnailUrl, imageUrl]) => (
<img
key={thumbnailUrl}
src={thumbnailUrl}
alt={`Thumbnail of ${poi.name}`}
style={{ cursor: 'pointer', width: '100%', display: 'block', marginBottom: '5px' }}
onClick={() => openInNewTab(imageUrl)}
/>
))}
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '5px' }}>
{poi.images.map(([thumbnailUrl, imageUrl], index) => (
<div
key={thumbnailUrl}
style={{
width: 'calc(50% - 2.5px)',
boxSizing: 'border-box',
marginBottom: index % 2 === 1 ? '5px' : '0'
}}
>
<img
src={thumbnailUrl}
alt={`Thumbnail of ${poi.name}`}
style={{
cursor: 'pointer',
width: '100%',
display: 'block'
}}
onClick={() => openInNewTab(imageUrl)}
/>
</div>
))}
</div>
</div>
</Popup>
</Marker>
);
});
const MapComponent = () => {
const geoJsonUrls = useMemo(() => [
'maps/world_part1.json',