Update: I couldn't solve the css issue. A friend recommended to me Mapbox and I have subsequently swaped the map. I'm so happy now.
Good evening community, my map appears only a bit. When I move the map by hand everything will be ok afterwards. I followed all instructions form https://react-leaflet.js.org/ and tried several solutions from the net, but can't solve it. Hope someone of you can give me the final hint, why I'm stuck.
// 1. App.js
// 2. Body.js
// App.js
import React, { useState, useEffect } from "react";
import axios from "axios";
import Spinner from "react-bootstrap/Spinner";
import "./normalize.css";
import "./App.css";
import Body from "./components/Body";
import Card from "./components/Card"
function App() {
const [geoPosition, setGeoPosition] = useState(null);
const [extraCountryInfo, setExtraCountryInfo] = useState(null);
const [spinnerEnabled, setSpinnerEnabled] = useState(false);
const [myLocationData, setMyLocationData] = useState(null);
useEffect(() => {
const fetchLocationInfo = async () => {
console.log("test");
let getCurrentCountry = "";
setSpinnerEnabled(true);
try {
const { REACT_APP_API_KEY } = process.env;
const getMyLocation = await axios(
`https://geo.ipify.org/api/v1?apiKey=${REACT_APP_API_KEY}`
);
getCurrentCountry = getMyLocation.data.location.country;
setMyLocationData(getMyLocation);
setGeoPosition(getMyLocation.data.location);
} catch (error) {
console.log(error.message);
}
try {
const getExtraCountryData = await axios(
`https://restcountries.eu/rest/v2/name/${getCurrentCountry}?fullText=true`
);
setExtraCountryInfo(getExtraCountryData);
} catch (error) {
console.log(error.message);
}
setSpinnerEnabled(false);
};
fetchLocationInfo();
}, []);
return (
<div className="App">
<div id="wrapper">
{extraCountryInfo && myLocationData && (
<Card
extraCountryInfo={extraCountryInfo}
myLocationData={myLocationData}
geoPosition={geoPosition}
setGeoPosition={setGeoPosition}
></Card>
)}
{spinnerEnabled && <Spinner animation="border" />}
{geoPosition && <Body geoPosition={geoPosition} />}
</div>
</div>
);
}
export default App;
//Body.js
import React from "react";
import { MapContainer,TileLayer, Marker, Popup } from "react-leaflet";
import './Body.css'
export default function Body(props) {
// console.log(props)
return (
<div id="mapid">
<MapContainer
center={[props.geoPosition.lat, props.geoPosition.lng]}
zoom={13}
scrollWheelZoom={true}
>
{console.log("re render",props.geoPosition.lat, props.geoPosition.lng)}
<TileLayer
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<Marker position={[props.geoPosition.lat, props.geoPosition.lng]}>
<Popup>
Your are here
</Popup>
</Marker>
</MapContainer>
</div>
);
}/* 1. App.css */
/* 2. Body.css */
/* App.css */
ul{
list-style: none;
}
li{line-height: 1.5rem;}
.App {
background-image: url("./assets/XT205511.JPG");
background-position: center;
background-repeat: no-repeat;
background-size:cover;
display: flex;
justify-Content: center;
align-items: center;
align-content: center;
font-family: 'Nunito', sans-serif;
background-color:lightblue;
}
#wrapper {
height: 80%;
}
/* Body.css */
#mapid {
width: 100%;
height: 40%;
/* width: 40rem;
height: 20rem; */
border: 2px rgb(241, 241, 243) solid;
border-radius: 1%;
margin-top: 0.5rem;
}
.leaflet-container {
/* width: 100%; */
height: 100%;
}<!-- index.html -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
