mirror of
https://github.com/zebrajr/traveltracer.git
synced 2025-12-05 12:20:26 +01:00
updated initial PoC
This commit is contained in:
Carlos Sousa
parent
b91518f6ab
commit
6158636758
|
|
@ -9,5 +9,9 @@ RUN npm run build
|
|||
# Stage 2: Serve the application with Nginx
|
||||
FROM nginx:alpine
|
||||
COPY --from=build /app/build /usr/share/nginx/html
|
||||
|
||||
# Set permissions for the images directory
|
||||
RUN chmod -R 755 /usr/share/nginx/html/images
|
||||
|
||||
EXPOSE 80
|
||||
CMD ["nginx", "-g", "daemon off;"]
|
||||
|
|
|
|||
|
|
@ -14,9 +14,9 @@ services:
|
|||
#stdin_open: true
|
||||
#tty: true
|
||||
|
||||
website:
|
||||
traveltracer:
|
||||
build: .
|
||||
container_name: website
|
||||
container_name: traveltracer
|
||||
restart: unless-stopped
|
||||
# Use WITHOUT Reverse Proxy Setup
|
||||
ports:
|
||||
|
|
|
|||
|
|
@ -1,20 +1,200 @@
|
|||
[
|
||||
{
|
||||
"id": 1,
|
||||
"name": "Eiffel Tower",
|
||||
"description": "A wrought-iron lattice tower on the Champ de Mars in Paris, France.",
|
||||
"thumbnailUrl": "url_to_eiffel_thumbnail.jpg",
|
||||
"imageUrl": "url_to_eiffel_image.jpg",
|
||||
"lat": 48.8584,
|
||||
"lng": 2.2945
|
||||
"name": "Budapest, Hungary",
|
||||
"description": "A wonderful city with amazing views, even if sometimes too much \"touristic friendly\"",
|
||||
"images" : [
|
||||
["url_to_budapest_thumbnail.jpg", "url_to_budapest_image.jpg"]
|
||||
],
|
||||
"lat": 47.497913,
|
||||
"lng": 19.040236
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"name": "Statue of Liberty",
|
||||
"description": "A colossal neoclassical sculpture on Liberty Island in New York Harbor.",
|
||||
"thumbnailUrl": "url_to_liberty_thumbnail.jpg",
|
||||
"imageUrl": "url_to_liberty_image.jpg",
|
||||
"lat": 40.6892,
|
||||
"lng": -74.0445
|
||||
"name": "Bratislava, Slovakia",
|
||||
"description": "What a *wonderful* city, with such history and views and so much culture and food to offer. Can't recommend enough, even if it doesn't require the longest stay.",
|
||||
"images" : [
|
||||
["url_to_budapest_thumbnail.jpg", "url_to_budapest_image.jpg"]
|
||||
],
|
||||
"lat": 48.148598,
|
||||
"lng": 17.107748
|
||||
},
|
||||
{
|
||||
"name": "Vienna, Austria",
|
||||
"description": "If you enjoy castles, palaces and visiting the home of one of the most long lasting and powerful families, dating centuries into the past where they dynasty effects can still be felt in almost the entire Central Europe, Vienna is your place.",
|
||||
"images" : [
|
||||
["url_to_budapest_thumbnail.jpg", "url_to_budapest_image.jpg"]
|
||||
],
|
||||
"lat": 48.2083537,
|
||||
"lng": 16.3725042
|
||||
},
|
||||
{
|
||||
"name": "Florence, Italy",
|
||||
"description": "An *amazing* city, full of culture, views, smells and food. One of my favourite cities, either if I'm talking about Italian ones or all places.",
|
||||
"images" : [
|
||||
["url_to_budapest_thumbnail.jpg", "url_to_budapest_image.jpg"]
|
||||
],
|
||||
"lat": 43.7698712,
|
||||
"lng": 11.2555757
|
||||
},
|
||||
{
|
||||
"name": "Pisa, Italy",
|
||||
"description": "Rather iconic because of *that* monument, but a very lovely city to visit in Italy. Walking near the sea and eating a true gelato is highly recommend.",
|
||||
"images" : [
|
||||
["url_to_budapest_thumbnail.jpg", "url_to_budapest_image.jpg"]
|
||||
],
|
||||
"lat": 43.7159395,
|
||||
"lng": 10.4018624
|
||||
},
|
||||
{
|
||||
"name": "Karlsruhe, Germany",
|
||||
"description": "",
|
||||
"images" : [
|
||||
["url_to_budapest_thumbnail.jpg", "url_to_budapest_image.jpg"]
|
||||
],
|
||||
"lat": 49.0068705,
|
||||
"lng": 8.4034195
|
||||
},
|
||||
{
|
||||
"name": "Ludwigsburg, Germany",
|
||||
"description": "",
|
||||
"images" : [
|
||||
["url_to_budapest_thumbnail.jpg", "url_to_budapest_image.jpg"]
|
||||
],
|
||||
"lat": 48.8953937,
|
||||
"lng": 9.1895147
|
||||
},
|
||||
{
|
||||
"name": "Dortmund, Germany",
|
||||
"description": "",
|
||||
"images" : [
|
||||
["url_to_budapest_thumbnail.jpg", "url_to_budapest_image.jpg"]
|
||||
],
|
||||
"lat": 51.5142273,
|
||||
"lng": 7.4652789
|
||||
},
|
||||
{
|
||||
"name": "Munich, Germany",
|
||||
"description": "",
|
||||
"images" : [
|
||||
["url_to_budapest_thumbnail.jpg", "url_to_budapest_image.jpg"]
|
||||
],
|
||||
"lat": 48.1371079,
|
||||
"lng": 11.5753822
|
||||
},
|
||||
{
|
||||
"name": "Konstanz, Germany",
|
||||
"description": "",
|
||||
"images" : [
|
||||
["url_to_budapest_thumbnail.jpg", "url_to_budapest_image.jpg"]
|
||||
],
|
||||
"lat": 47.659216,
|
||||
"lng": 9.1750718
|
||||
},
|
||||
{
|
||||
"name": "Prague, Czech Republic",
|
||||
"description": "",
|
||||
"images" : [
|
||||
["url_to_budapest_thumbnail.jpg", "url_to_budapest_image.jpg"]
|
||||
],
|
||||
"lat": 50.0874654,
|
||||
"lng": 14.4212535
|
||||
},
|
||||
{
|
||||
"name": "Kraków, Poland",
|
||||
"description": "",
|
||||
"images" : [
|
||||
["url_to_budapest_thumbnail.jpg", "url_to_budapest_image.jpg"]
|
||||
],
|
||||
"lat": 50.0619474,
|
||||
"lng": 19.9368564
|
||||
},
|
||||
{
|
||||
"name": "Auschwitz, Oświęcim, Poland",
|
||||
"description": "",
|
||||
"images" : [
|
||||
["url_to_budapest_thumbnail.jpg", "url_to_budapest_image.jpg"]
|
||||
],
|
||||
"lat": 50.0336707,
|
||||
"lng": 19.2600798
|
||||
},
|
||||
{
|
||||
"name": "Riga, Latvia",
|
||||
"description": "",
|
||||
"images" : [
|
||||
["url_to_budapest_thumbnail.jpg", "url_to_budapest_image.jpg"]
|
||||
],
|
||||
"lat": 56.9493977,
|
||||
"lng": 24.1051846
|
||||
},
|
||||
{
|
||||
"name": "Tallinn, Estonia",
|
||||
"description": "",
|
||||
"images" : [
|
||||
["url_to_budapest_thumbnail.jpg", "url_to_budapest_image.jpg"]
|
||||
],
|
||||
"lat": 59.4372155,
|
||||
"lng": 24.7453688
|
||||
},
|
||||
{
|
||||
"name": "Vilnius, Lithuania",
|
||||
"description": "",
|
||||
"images" : [
|
||||
["url_to_budapest_thumbnail.jpg", "url_to_budapest_image.jpg"]
|
||||
],
|
||||
"lat": 54.6870458,
|
||||
"lng": 25.2829111
|
||||
},
|
||||
{
|
||||
"name": "Porto, Portugal",
|
||||
"description": "",
|
||||
"images" : [
|
||||
["url_to_budapest_thumbnail.jpg", "url_to_budapest_image.jpg"]
|
||||
],
|
||||
"lat": 41.1494512,
|
||||
"lng": -8.6107884
|
||||
},
|
||||
{
|
||||
"name": "Lisbon, Portugal",
|
||||
"description": "",
|
||||
"images" : [
|
||||
["url_to_budapest_thumbnail.jpg", "url_to_budapest_image.jpg"]
|
||||
],
|
||||
"lat": 38.7077507,
|
||||
"lng": -9.1365919
|
||||
},
|
||||
{
|
||||
"name": "Sintra, Portugal",
|
||||
"description": "",
|
||||
"images" : [
|
||||
["url_to_budapest_thumbnail.jpg", "url_to_budapest_image.jpg"]
|
||||
],
|
||||
"lat": 38.79846,
|
||||
"lng": -9.3881
|
||||
},
|
||||
{
|
||||
"name": "Serra da Estrela, Portugal",
|
||||
"description": "",
|
||||
"images" : [
|
||||
["url_to_budapest_thumbnail.jpg", "url_to_budapest_image.jpg"]
|
||||
],
|
||||
"lat": 40.32,
|
||||
"lng": -7.62
|
||||
},
|
||||
{
|
||||
"name": "Athens, Portugal",
|
||||
"description": "",
|
||||
"images" : [
|
||||
["url_to_budapest_thumbnail.jpg", "url_to_budapest_image.jpg"]
|
||||
],
|
||||
"lat": 37.9755648,
|
||||
"lng": 23.7348324
|
||||
},
|
||||
{
|
||||
"name": "Thessaloniki, Portugal",
|
||||
"description": "",
|
||||
"images" : [
|
||||
["url_to_budapest_thumbnail.jpg", "url_to_budapest_image.jpg"]
|
||||
],
|
||||
"lat": 40.6403167,
|
||||
"lng": 22.9352716
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -1,20 +1 @@
|
|||
[
|
||||
{
|
||||
"id": 1,
|
||||
"name": "Eiffel Tower",
|
||||
"lat": 48.8584,
|
||||
"lng": 2.2945
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"name": "Statue of Liberty",
|
||||
"lat": 40.6892,
|
||||
"lng": -74.0445
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"name": "Great Wall of China",
|
||||
"lat": 40.4319,
|
||||
"lng": 116.5704
|
||||
}
|
||||
]
|
||||
[]
|
||||
|
|
@ -1,30 +1,5 @@
|
|||
// import logo from './logo.svg';
|
||||
// import './App.css';
|
||||
|
||||
// function App() {
|
||||
// return (
|
||||
// <div className="App">
|
||||
// <header className="App-header">
|
||||
// <img src={logo} className="App-logo" alt="logo" />
|
||||
// <p>
|
||||
// Edit <code>src/App.js</code> and save to reload.
|
||||
// </p>
|
||||
// <a
|
||||
// className="App-link"
|
||||
// href="https://reactjs.org"
|
||||
// target="_blank"
|
||||
// rel="noopener noreferrer"
|
||||
// >
|
||||
// Learn React
|
||||
// </a>
|
||||
// </header>
|
||||
// </div>
|
||||
// );
|
||||
// }
|
||||
|
||||
// export default App;
|
||||
|
||||
|
||||
import React from 'react';
|
||||
import MapComponent from './components/MapComponent';
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ const MapComponent = () => {
|
|||
|
||||
useEffect(() => {
|
||||
// Fetch GeoJSON data
|
||||
fetch('world.json')
|
||||
fetch('maps/world.json')
|
||||
.then(res => res.json())
|
||||
.then(data => setGeoJson(data));
|
||||
|
||||
|
|
@ -47,35 +47,42 @@ const MapComponent = () => {
|
|||
attribution='Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
|
||||
/>
|
||||
{geoJson && <GeoJSON data={geoJson} />}
|
||||
|
||||
{visitedPois.map(poi => (
|
||||
<Marker key={poi.id} position={[poi.lat, poi.lng]} icon={visitedIcon}>
|
||||
<Marker position={[poi.lat, poi.lng]} icon={visitedIcon}>
|
||||
<Popup>
|
||||
<div>
|
||||
<h2>{poi.name}</h2>
|
||||
<p>{poi.description}</p>
|
||||
<img
|
||||
src={poi.thumbnailUrl}
|
||||
alt={`Thumbnail of ${poi.name}`}
|
||||
style={{ cursor: 'pointer' }}
|
||||
onClick={() => openInNewTab(poi.imageUrl)}
|
||||
/>
|
||||
{poi.images.map(([thumbnailUrl, imageUrl]) => (
|
||||
<img
|
||||
key={thumbnailUrl} // Unique key for React's rendering
|
||||
src={thumbnailUrl}
|
||||
alt={`Thumbnail of ${poi.name}`}
|
||||
style={{ cursor: 'pointer', margin: '5px' }}
|
||||
onClick={() => openInNewTab(imageUrl)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</Popup>
|
||||
</Marker>
|
||||
))}
|
||||
|
||||
{wishlistPois.map(poi => (
|
||||
<Marker key={poi.id} position={[poi.lat, poi.lng]} icon={wishlistIcon}>
|
||||
<Marker position={[poi.lat, poi.lng]} icon={wishlistIcon}>
|
||||
<Popup>
|
||||
<div>
|
||||
<h2>{poi.name}</h2>
|
||||
<p>{poi.description}</p>
|
||||
<img
|
||||
src={poi.thumbnailUrl}
|
||||
alt={`Thumbnail of ${poi.name}`}
|
||||
style={{ cursor: 'pointer' }}
|
||||
onClick={() => openInNewTab(poi.imageUrl)}
|
||||
/>
|
||||
{poi.images.map(([thumbnailUrl, imageUrl]) => (
|
||||
<img
|
||||
key={thumbnailUrl} // Unique key for React's rendering
|
||||
src={thumbnailUrl}
|
||||
alt={`Thumbnail of ${poi.name}`}
|
||||
style={{ cursor: 'pointer', margin: '5px' }}
|
||||
onClick={() => openInNewTab(imageUrl)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</Popup>
|
||||
</Marker>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user