0

I am struggling getting Image from react-map-gl to work with my Next.js application.

To narrow it down, I have tried to port over the example from the official documentation (https://urbica.github.io/react-map-gl/#/Components/Image):

import { useState } from 'react';
import MapGL, { Source, Layer, Image } from 'react-map-gl';
import 'mapbox-gl/dist/mapbox-gl.css';

const MAPBOX_ACCESS_TOKEN = 'redacted';
export default function MapDetails(props) {
    const [viewport, setViewport] = useState({
        latitude: 37.753574,
        longitude: -122.447303,
        zoom: 13
      });
      
      const data = {
        type: 'FeatureCollection',
        features: [
          {
            type: 'Feature',
            properties: {},
            geometry: {
              type: 'Point',
              coordinates: [-122.45, 37.75]
            }
          }
        ]
      };
      
      const imageURL = 'https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Cat_silhouette.svg/400px-Cat_silhouette.svg.png';
    return (
        <MapGL
        style={{ width: '100%', height: '400px' }}
        mapStyle='mapbox://styles/mapbox/light-v9'
        mapboxAccessToken={MAPBOX_ACCESS_TOKEN}
        onViewportChange={setViewport}
        {...viewport}
      >
        <Source id='point' type='geojson' data={data} />
        <Image id='my-image' image={imageURL} />
        <Layer
          id='image-layer'
          type='symbol'
          source='point'
          layout={{
            'icon-image': 'my-image',
            'icon-size': 0.25
          }}
        />
      </MapGL>
    );
}

This is giving me the below error, which was the same I got in my own application:

Unhandled Runtime Error
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `MapDetails`.

Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check your code at map.js:37

Does anyone have any input? If I remove the Image tag, the map loads just fine.

I am pretty new to Next.js, React and the react-map-gl wrapper, so I am hoping that it is something really basic that I am missing.

user5801710
  • 301
  • 1
  • 9
  • Try importing Image from 'react-map-gl' without {} – Mohammad Tbeishat Feb 16 '22 at 12:00
  • Thanks! Interestingly, the error disappear when it is imported that way. However, the images are still not loaded and for some reason it is complaining about no mapbox token being supplied, when the image import is changed and the Image-tags are present. – user5801710 Feb 16 '22 at 12:17
  • Great! You need to register and use your own token.. Please, accept my answer : ) – Mohammad Tbeishat Feb 16 '22 at 13:01
  • Add your token here.. const MAPBOX_ACCESS_TOKEN = 'redacted'; – Mohammad Tbeishat Feb 16 '22 at 13:03
  • Sorry if I was unclear in my response :-) The error went away, but it did not resolve the problem. The images are still not being loaded and the token error occurs, despite a token being defined. – user5801710 Feb 16 '22 at 13:29

2 Answers2

0

Import Image from 'react-map-gl' without {}

import Image from 'react-map-gl';
Mohammad Tbeishat
  • 961
  • 6
  • 15
0

Turns out I somehow managed to mix up react-map-gl and @urbica/react-map-gl. Googling for examples I ended up in the @urbica/react-map-gl docs without noticing it was a different package, and tried to implement their code samples with react-map-gl - and they do not have an export called Image :-)

user5801710
  • 301
  • 1
  • 9