Use client side data fetching or getStaticProps for Leaflet layer component for SSG map with Next.js?

Question

So, I'm trying to build a Next.js app to make a static site with a Leaflet map on it and I'm struggling conceptually with how to pull my location data into the components that will make up the Map. I'm trying to render some 2000+ point locations, which requires using the Leaflet Canvas Markers library. The data itself is stored in a Postgres database with the PostGIS extension enabled. I've connected the Postgres database to the Next app and I've successfully created an API route that returns the data as correctly formatted GeoJSON at mysite:3000/api/getlocations

I am building the map page by dynamically rendering a map component. The map component is built using the React Leaflet library. For the sake of organization and clarity, I created another component to create the canvas markers. This worked well with randomly generated points, but now I'm just not sure how to get my GeoJSON added to the canvas layer.

I was initially trying to do it with getStaticProps, but I struggled with the syntax and getting errors related to importing and exporting in non-module code. Having dug into the docs a bit more I've read about the client-side data fetching with useEffect, but I'm not sure if this will work with my SSG appoach.

So, what's the right or best way to pull the api data into the component?

Here's my code page:

import Head from 'next/head'
import dynamic from 'next/dynamic';
const mapPage = () =>{
    const MapWithNoSSR = dynamic(() => import("../components/Map"), {
        ssr: false
      });
    
    return (
        <div>
        <Head>
        <title>About</title>
        </Head>
        <h1>Map of Peng spots</h1>
        <p>Map should go here!</p>
        <MapWithNoSSR />
        </div>
    )
}

export default mapPage

Here's my map component

import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet'
import 'leaflet/dist/leaflet.css'
import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css'
import 'leaflet-defaulticon-compatibility';
import LeafletCanvasMarker from './Pengs';

const Map = () => {
  return (
    <MapContainer center={[50.1109, 8.6821]} zoom={14} scrollWheelZoom={false} style={{height: "100vh", width: "100%"}}>
      <TileLayer
    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    attribution="&copy; <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
  />
      <Marker 
      position={[50.1109, 8.682]}
      draggable={true}
      animate={true}
      >
        <Popup>
          Hey ! you found me
        </Popup>
      </Marker>
      <LeafletCanvasMarker />
    </MapContainer>
  )
}

export default Map

And here's the Canvas layer component that I want to pull the data into:

import { useEffect } from "react";
import { useMap } from "react-leaflet";
import "leaflet-canvas-marker";
import L from "leaflet";

export default function LeafletCanvasMarker() {

  const map = useMap();
  useEffect(() => {
    if (!map) return;

    var ciLayer = L.canvasIconLayer({}).addTo(map);

    ciLayer.addOnClickListener(function (e, data) {
      console.log(data);
    });
    ciLayer.addOnHoverListener(function (e, data) {
      console.log(data[0].data._leaflet_id);
    });

    var icon = L.icon({
      iconUrl: "https://unpkg.com/leaflet@1.7.1/dist/images/marker-icon.png",
      iconSize: [20, 18],
      iconAnchor: [10, 9],
    });

    ciLayer.addLayers();
  }, [map]);


  return null;
}

So, I've played with a couple of versions of getStaticProps, but I haven't been successful in getting the GeoJSON as a prop of the canvas layer component.

Answer 1

So, to anyone else bumping into this: I was being dense and had not RTFM. Next is an opionionated framework so the getStaticProps has to be called on your page component. Refactoring the code to the page component should be the solution.

Use client side data fetching or getStaticProps for Leaflet layer component for SSG map with Next.js?

Question

1 answers

solution1
0 2022-08-28 08:21:51

Use client side data fetching or getStaticProps for Leaflet layer component for SSG map with Next.js?

Question

1 answers

solution1 0 2022-08-28 08:21:51

solution1
0 2022-08-28 08:21:51