We are wanting to migrate away from Leaflet for one of our projects due to the amount of data we will need to render. I am trying to make DeckGL and MapLibre work with React JS but haven't had any luck so far. The kicker is that the client will be hosting this application internally so an API key is a no go. That eliminates most of the base map services out there from what I can tell. If there is a different stack combo I should be trying I'm all ears.

Some of the code is commented out due to trying different combinations. Any help is appreciated.

import {GeoJsonLayer, LineLayer} from '@deck.gl/layers';
import DeckGL from "@deck.gl/react";
import { MapView } from "@deck.gl/core";
//@ts-ignore
import {BASEMAP} from "@deck.gl/carto"
import Map, {Source, Layer, Marker, NavigationControl} from "react-map-gl";
import "./styles.css"
import 'maplibre-gl/dist/maplibre-gl.css';

   const data = store.geoJSONDNC

      // const data = [
      //   {sourcePosition: [-122.41669, 37.7853], targetPosition: [122.41669, 37.781]}
      // ];

      const deckLayer = new GeoJsonLayer({
            id: "geoJSON-layer",
            data: store.geoJSONDNC,
            pickable: true,
            stroked: false,
            filled: true,
            extruded: true,
            pointType: 'circle',
            lineWidthScale: 20,
            lineWidthMinPixels: 2,
            getFillColor: [160, 160, 180, 200],
            getPointRadius: 100,
            getLineWidth: 1,
            getElevation: 30
          })

          const lineLayer = new LineLayer({
            id: 'line-layer',
            data,
            pickable: true,
            getWidth: 50
          });

          const geojson = {
            type: 'FeatureCollection',
            features: [
              {type: 'Feature', geometry: {type: 'Point', coordinates: [-122.4, 37.8]}}
            ]
          };

          const layerStyle = {
            id: 'point',
            type: 'circle',
            paint: {
              'circle-radius': 10,
              'circle-color': '#007cbf'
            }
          };

          // var map = new maplibregl.Map({
          //   container: 'map',
          //   style: 'https://demotiles.maplibre.org/style.json', // stylesheet location
          //   center: [-74.5, 40], // starting position [lng, lat]
          //   zoom: 9 // starting zoom
          //   });
        
  return <>
       <DeckGL layers={[deckLayer, lineLayer]}>
       <Map
       initialViewState={{
        longitude: -122.4,
        latitude: 37.8,
        zoom: 5
      }}
      mapLib={maplibregl}
      mapStyle="https://wms.wheregroup.com/tileserver/style/osm-bright.json"
    >
      <Layer id="overlay" source="https://stamen-tiles.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg" type="raster" />
        {/* <Marker longitude={-122.4} latitude={37.8} color="red" /> */}
{/* 
        //@ts-ignore */}
        <Source id="my-data" type="geojson" data={geojson}>
{/*
        //@ts-ignore */}
          <Layer {...layerStyle} />
        </Source>
        <NavigationControl />
      </Map>
    
 {/* <MapComponentsProvider>

     <MapLibreMap
    options={{
      zoom: 8,
      center: [
        8.607,
        53.1409349
      ],
      style: 'https://wms.wheregroup.com/tileserver/style/osm-bright.json'
    }}
   />
    <MlComponentTemplate url='https://wms.wheregroup.com/tileserver/style/osm-bright.json' /> 
     <MlNavigationTools />
    <MlOsmLayer
      sourceOptions={{
          tiles: [
            "https://stamen-tiles.a.ssl.fastly.net/terrain/{z}/{x}/{y}.jpg"
          ]
      }}
    />
  
 
       
      </MapComponentsProvider> */}
    </DeckGL>
  </>
};

export default observer(DNCDeckGL);

So far I the only data I can successfully render is a single marker and the navigation controls. The base map acts strangely where it acts like something is there but zoomed in way too far. I have tried numerous URLs but none seem to alleviate the issue. Also, I haven't been able to get the DeckGL component to render over it yet either.

Every so often I'll get an error about Babel transpiling so I've tried some fixes from their docs but still no dice.