Leaflet set default value position

Question

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!

Answer 1

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;