mapboxgl-ctrl-bottom-right div not displaying correctly #2246

YoItsYong · 2023-07-31T21:31:14Z

YoItsYong
Jul 31, 2023

Hello all,

I've been running into issues with trying to get a map to display correctly. I've followed a couple different YouTube tutorials and followed instructions from the docs, but have been running into the same problems with the mapboxgl-ctrl-bottom-right not displaying how I think it should.

It seems like these links and the controls should display as an overlay on the map. However, these items are being displayed as separate blocks, so that the links and background are all pushed below the map.

Am I implementing something incorrectly here? Or could it be something with the default styling from Vite? Please let me know if you need more information!

Thanks!

import ReactMapGL, { Marker, NavigationControl } from 'react-map-gl';

const MapBox = () => {
  return (
    <>
      <ReactMapGL
        mapboxAccessToken='pk.eyJ1IjoieW9uZ29mdG9kYXkiLCJhIjoiY2w4ejAzNnI4MGs0OTNuazRyYmh0dDR3NCJ9.mz-oisEfVIZhTLNtJmR8ng'
        initialViewState={{
          longitude: -79.95,
          latitude: 39.631,
          zoom: 11,
        }}
        style={{ width: '100%', height: 400 }}
        mapStyle='mapbox://styles/mapbox/streets-v9'
      >
        marker will go here!
      </ReactMapGL>
    </>
  );
};

export default MapBox;