reactjs - Adding method pulling data from a geojson from postgres / node to display on my react leaflet map

Question

I am trying to set up a map component displaying markers with geo coordinates I have stored on my postgres / node backend. I can insert geojson's into my postgres / postgis database as i have a CRUD methods set-up on the backend that work correctly but i don't know what code to add to the map component to load the geojson file when go to the component tab.

How would i go about adding a method to go into my map component to pull a geojson from my db? i think i have my action and services files set-up correctly and i think the pullScubaSchools class in my action file should imported into the map container.

map.component.js

import React, { Component, useState } from 'react';
import { MapContainer, TileLayer, Layer, Marker, Popup, useMapEvents, Map, GeoJSON } from 'react-leaflet';
import "leaflet/dist/leaflet.css";
//import mapData from "../test/mapData.json";
import { pullScubaSchools } from '../actions/scubaSchool.action'


//Layer.geoJSON(pullScubaSchools).addTo(ScubaDivingMap);


export class ScubaDivingMap extends Component {

    //componentDidMount() {
    //    console.log(mapData);
    //}

    render() {

        return(

            <div>
                <MapContainer
                    center={{ lat: 41.505, lng: -0.09 }}
                    zoom={3}
                    scrollWheelZoom={false}>
                    <GeoJSON
                        //style={this.countryStyle}
                        data={pullScubaSchools.diveSchoolGeo}
                        //onEachFeature={this.onEachCountry}
                    />
                    <TileLayer
                        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                    />
                    <Marker position={[pullScubaSchools]}>
                    <Popup>
                        A pretty CSS3 popup. <br /> Easily customizable.
                    </Popup>
                </Marker>
                </MapContainer>
            </div>
        );
    }
}

export default ScubaDivingMap;

diveschool.service

import axios from 'axios';

const API_URL = "http://localhost:5002/api/diveschool/";

// posts register details to backend
class diveSchoolService {

    scubaSchoolLocations = (diveSchoolName, diveSchoolLocation, diveCertificatesOfferedID, diveSchoolGeo) => {
        return axios.get(API_URL + "diveschoollist", {
            diveSchoolName,
            diveSchoolLocation,
            diveCertificatesOfferedID,
            diveSchoolGeo
        });
    };

export default new diveSchoolService();

scubaSchool.action.js

import { diveSchoolService } from "../services/diveSchool.service";
import { failed_data_load, set_message, data_load_successful } from "./types.action";

export const pullScubaSchools = (dispatch) => {
    return diveSchoolService.scubaSchoolLocations.then(
        (data) => {
            dispatch({
                type: data_load_successful,
                payload: { scubaSchools: data },
            });

            return Promise.resolve();
        },
        (error) => {
            const message =
                (error.response &&
                    error.response.data &&
                    error.response.data.message) ||
                error.message ||
                error.toString();

            dispatch({
                type: failed_data_load,
            });

            dispatch({
                type: set_message,
                payload: message,
            });

            return Promise.reject();
        }
    );
};

My error output is as below:

TypeError: latlng is null
project
C:/Users/James Greene/WebstormProjects/softwaredevproject/SustainableScuba/WebApp/src/geo/projection/Projection.SphericalMercator.js:22

  19 | MAX_LATITUDE: 85.0511287798,
  20 | 
  21 | project: function (latlng) {
> 22 |  var d = Math.PI / 180,
     | ^  23 |      max = this.MAX_LATITUDE,
  24 |      lat = Math.max(Math.min(max, latlng.lat), -max),
  25 |      sin = Math.sin(lat * d);

question from:https://stackoverflow.com/questions/65890548/adding-method-pulling-data-from-a-geojson-from-postgres-node-to-display-on-my

Answer 1

Waitting for answers