Component-based UI with scoped styling
State management solution
Navigation and routing
User location tracking
This project is a rework of an older version I had previously built. I upgraded the map feature by switching from Leaflet to the more modern Mapbox API. The app includes interactive pins marking the places I've visited, along with photos from each adventure to give a more personal and visual touch.
1
2const Map = () => {
3 return (
4 <div className={styles.mapContainer}>
5 <MapContainer
6 center={mapPosition}
7 // center={[lat, lng]}
8 zoom={3.1}
9 scrollWheelZoom={true}
10 className={styles.map}>
11 <TileLayer
12 attribution='©
13 <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>
14 url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
15 />
16 {cities.map((city) => (
17 <Marker
18 position={[city.position.lat, city.position.lng]}
19 key={city.id}>
20 <Popup>
21 <div>{city.notes}</div>
22 <br />
23 <div>{city.emoji}</div>
24 <div>{city.cityName}</div>
25 </Popup>
26 </Marker>
27 ))}
28
29 <ChangeCenter position={[lat || 36.1699, lng || 2.1398]} />
30 <DetectClick />
31 </MapContainer>
32 </div>
33 );
34}
35
36