currently appears with the Leaflet map always the error message: Invalid LatLng object: (undefined, undefined)
This is due to the fact that my variables are not yet available when the map is retrieved.
My code:
import React from "react";
import { TileLayer } from "react-leaflet";
import "leaflet/dist/leaflet.css";
import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css";
import StyledMapContainer from "./styled.js";
import { Marker, Popup } from "react-leaflet";
import MarkerIcon from "../mapmarker/index.jsx";
const Map = ({ data }) => {
console.log(data?.latitude);
const position = [data?.latitude, data?.longitude];
return (
<StyledMapContainer
watch
enableHighAccuracy
zoomControl
center={position}
zoom={[13]}
scrollWheelZoom={true}
>
<TileLayer
url="https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/256/{z}/{x}/{y}@2x?access_token="
zoomControl={true}
/>
<Marker position={position} icon={MarkerIcon}>
<Popup>The Ship is here!</Popup>
</Marker>
</StyledMapContainer>
);
};
export default Map;
Now I want to build something so that first a default value is taken and then, once latitude and longitude are available, they are exchanged
I have tried it with:
if (position === "undefined") {
const positon = [37.84151, -6.041185];
}
Unfortunately, this does not work. Do any of you have an idea? Thanks for help!
position may never be equal to "undefined" as this is s a string.
what you want is,
if (position === undefined) {
const positon = [39.86101, -0.069185];
}
But this is still tricky because position can be null.
so i will do this instead.
if (!position) {
const positon = [39.86101, -0.069185];
}
Read more about falsy values of Javascript here.
But in the context of your case, here is how the full code can look like.
import React from "react";
import { TileLayer } from "react-leaflet";
import "leaflet/dist/leaflet.css";
import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css";
import StyledMapContainer from "./styled.js";
import { Marker, Popup } from "react-leaflet";
import MarkerIcon from "../mapmarker/index.jsx";
const Map = ({ data }) => {
let position = [39.86101, -0.069185];
if (data?.latitude && data?.longitude) {
const lat = parseFloat(data?.latitude);
const lng = parseFloat(data?.longitude);
if (Number.isFinite(lat) && Number.isFinite(lng)) {
position = [lat, lng];
}
}
return (
<StyledMapContainer
watch
enableHighAccuracy
zoomControl
center={position}
zoom={[13]}
scrollWheelZoom={true}
>
<TileLayer
url="https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/256/{z}/{x}/{y}@2x?access_token="
zoomControl={true}
/>
<Marker position={position} icon={MarkerIcon}>
<Popup>The Ship is here!</Popup>
</Marker>
</StyledMapContainer>
);
};
export default Map;