How can I introduce a buffer to React-leaflet?

Question

I'm currently using React-leaflet to plot and pinpoint data. However, I have a massive amount of data to display, so I'm trying to introduce a buffer using Lazy, Suspense or Loadable. But when I structure it with React-leaflet in Map.js and then try to import it in App.js, I don't see any response.

Can anyone help me with this issue?

Map.js

import React from 'react';
import Loadable from "react-loadable";
import { Spinner } from 'react-bootstrap';


const SerialMap = Loadable({
    loader : () => import("./map_component/SerialMap"),
    loading : () => <Spinner/>
    })

const NoneSerialMap = Loadable({
    loader : () => import("./map_component/NoneSerialMap"),
    loading : () => <Spinner/>
    })

function Map(props) {
    return (
        <div id='map'>
        {props.isSerial && <SerialMap/>}
        {!props.isSerial && <NoneSerialMap/>}
        </div>
    );
}
export default Map;

Component Map

import React from 'react';
import { MapContainer, WMSTileLayer } from 'react-leaflet';
import { CRS } from 'leaflet';

import './Map.css'

function SerialMap() {
    return (
        <div id='map'>
            <MapContainer
                center={[0, 0]}
                zoom={2}
                scrollWheelZoom={true}
                zoomControl={false}
                style={{ width: "100%", height: "100%" }}
                minZoom={2}
                maxZoom={5}
                doubleClickZoom={false}
                crs={CRS.EPSG4326}
            >
                    <WMSTileLayer
                        layers='test:NE1_50M_SR_W'
                        url="http://localhost:8080/geoserver/test/wms"
                    />
            </MapContainer>
        </div>
    )
}

export default SerialMap;

import React from 'react';
import { MapContainer, WMSTileLayer } from 'react-leaflet';
import { CRS } from 'leaflet';
import './Map.css'

function NoneserialMap() {
    return (
        <div id='map'>
            <MapContainer
                center={[0, 0]}
                zoom={2}
                scrollWheelZoom={true}
                zoomControl={false}
                style={{ width: "100%", height: "100%" }}
                minZoom={2}
                maxZoom={5}
                doubleClickZoom={false}
                crs={CRS.EPSG4326}
                maxBounds={[[-90, -190], [90, 190]]}
            >
                <WMSTileLayer
                    layers='test:NE1_50M_SR_W'
                    url="http://localhost:8080/geoserver/test/wms"
                />
            </MapContainer>
        </div>
    )
}

export default NoneserialMap;

How can I introduce a buffer to React-leaflet?

0 Answers0