0

I am using React-Map-GL but it's not appearing and I'm not sure why.

Here is the component I am trying to render:

import ReactMapGL, {Marker} from 'react-map-gl';
import React, {Component} from 'react';
import {apikey} from '../api/api';
class LocateUsers extends Component {
    render() {
        return(
            <ReactMapGL mapboxApiAccessToken={apikey}
            latitude={37.78} longitude={-122.41} zoom={8}>
                <Marker latitude={37.78} longitude={-122.41} offsetLeft={-20} offsetTop={-10}>
                  <div>You are here</div>
                </Marker>
              </ReactMapGL>
        );
    }
}

export default LocateUsers;

Does anyone know why it's not showing? Nothing appears at all.

Last_Node_Standing
  • 399
  • 1
  • 20
  • The parent element needs to be the full browser size. If it just renders the map as its only child, it'll be 0 height / width and you wont see it. inspect on the browser and look at the elements and sizes .. etc. – John Ruddell Jun 22 '19 at 06:52

1 Answers1

1

Excluding width and height properties from the ReactMapGL opening tag will cause it to not show up. Reference the react-map-gl examples on github. They have great info for getting the maps working.

things4fun
  • 41
  • 5