Marker context is null when not passed as a direct child of Map #1931

TomD0wning · 2022-07-25T22:00:00Z

TomD0wning
Jul 25, 2022

Feel like i'm missing somthing obvious here, so hopefully someone can point in the right direction.

tldr: What's the expected way to implement map markers in V7

Currently upgrading from V5 to V7 in a NextJS 12, React 17 project and found that the newer Marker component cannot be used unless it's a direct child of the Map component as the map context is null.

Unhandled Runtime Error
TypeError: react__WEBPACK_IMPORTED_MODULE_0__.useContext(...) is null

some code omitted for brevity

Previously used the ReactMapGL component in a generic wrapper in order to pass various props, setting, styles, etc,

     //V5
     import ReactMapGL from 'react-map-gl';
     ...
     ...
      <ReactMapGL
        {...viewport}
        {...mapSettings}
        attributionControl={attributionControl}
        mapStyle={mapStyle}
        onViewportChange={setViewport}
        className={className}
        getCursor={getCursor}
        onMouseMove={onMouseMove}
      >
        {children}
      </ReactMapGL>

Generic marker component:

     //V5
    return (
        <Marker {...coordinates} {...markerOffset} draggable={isDraggable}>
          <div onClick={onClick} data-testid="map-marker" className={className}>
            {children}
          </div>
        </Marker>
    );

Which worked well together, however since upgrading, using the following avoids the null context error but offers less extensibility/abstraction for internal components than previously.

     //V7
      import Map from 'react-map-gl';
      ...
      ...
      <Map
        id={mapId}
        ref={mapRef}
        mapLib={maplibregl}
        {...initalViewport}
        onMove={e => {
          setViewport(e.viewState);
        }}
        onDragEnd={onDragEnd}
        onZoomEnd={onZoomEnd}
        {...mapSettings}
        attributionControl={attributionControl}
        mapStyle={mapStyle}
        onMouseMove={onMouseMove}
      >
         <Marker key={'someKey'} latitude={someLat} longitude={someLon}>
           <MapIcon />
         </Marker>
      </Map>

It's also possible to use the useMap hook, however this returns an empty object despite the parent(s) being wrapped in a <MapProvider> when combined with the generic Marker mentioned above, For example:

  //V7
  const { current: map } = useMap();
  if (map) {
    return (
      <Marker {...coordinates} {...markerOffset} draggable={isDraggable}>
        <div onClick={onClick} data-testid="map-marker" className={className}>
          {children}
        </div>
      </Marker>
    );
  }
  return null;
};