I have recently started using Next.js with Leaflet maps and have encountered a beginner's question. I created a page in Next.js ( /pages/map/[id].jsx ) that utilizes a component ( /component/Map.jsx ).
Within the page ( [id].jsx ), I fetch a JSON file containing various values, including the "Latitude and Longitude". I need to pass these values to the component ( Map.jsx ) to display the map with those coordinates on the page.
Each post on the page ( [id].jsx ) has different values. I am unsure of how to pass these values to the component.
My knowledge of React and Next.js is quite basic, and despite searching online, I have been unable to find a solution. Can anyone provide me with some guidance? Thank you in advance.
Code from file [id].jsx
import Image from "next/image";
import dynamic from "next/dynamic";
export default function soloRefugio({ data }) {
return (
<Layout>
<article>
<Image
priority
src={data[0].Imagen.name}
height={400}
width={400}
alt="imagen"
/>
<h1>{data[0].Nombre}</h1>
<p>P: {data[0].Pro}</p>
<p>A: {data[0].Alt}</p>
<MapBox />
</article>
</Layout>
);
}
function MapBox() {
const Map = dynamic(
() => import('../../components/Map'),
{ ssr: false }
)
return <Map />
}
export async function getStaticPaths() {
try {
const res = await fetch("http://localhost:1337/ref");
const data = await res.json();
const paths = data.map(({ slug }) => ({ params: { id: slug } }));
return {
paths,
fallback: false,
};
} catch (error) {
console.log(error);
}
}
export async function getStaticProps({ params }) {
try {
const res = await fetch("http://localhost:1337/ref?slug=" + params.id);
const data = await res.json();
return {
props: {
data: data,
},
};
} catch (error) {
console.log(error);
}
}
Code from file component Map.jsx
import { MapContainer, Marker, Popup, TileLayer } from 'react-leaflet'
import 'leaflet/dist/leaflet.css'
const Map = () => {
return (
<MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false} style={{height: 400, width: "100%"}}>
<TileLayer
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<Marker position={[51.505, -0.09]}>
<Popup>
A pretty CSS3 popup. <br /> Easily customizable.
</Popup>
</Marker>
</MapContainer>
)
}
export default Map