import React, { Component } from 'react';
import ReactMapboxGl, { Layer, Feature, Marker } from "react-mapbox-gl";

import '../stylesheets/StoryList.css'

const Map = ReactMapboxGl({
  accessToken: "helloaccesstoken"
});


class StoryList extends Component {

	render() {

		return (
			<div className='StoryList' >
				<div className='story-list-map' >
					<Map							
						style="mapbox://styles/mapbox/streets-v9"
						containerStyle={{
							height: `100%`,
							width: `100%`
						}}>
						<Layer
							type="symbol"
							id="marker"
							layout={{ "icon-image": "marker-15" }}>
							<Feature coordinates={[51.511459, -0.245408]} />
						</Layer>
						<Marker latitude={-0.481} longitude={51.3} offsetLeft={-20} offsetTop={-10}>
							<div>You are here</div>
						</Marker>
					</Map>
				</div>
			</div>
		);
	}
}

export default StoryList;

Warnings:
Line 72:  Style prop value must be an object          
react/style-prop-object

Uncaught Error: `LngLatLike` argument must be specified as a LngLat instance, an object {lng: <lng>, lat: <lat>}, an object {lon: <lng>, lat: <lat>}, or an array of [<lng>, <lat>]

The above error occurred in the <ProjectedLayer> component:
    in ProjectedLayer (created by Context.Consumer)
    in MappedComponent (created by Marker)
    in Marker (at StoryList.jsx:85)
    in div (created by ReactMapboxGl)
    in ReactMapboxGl (at StoryList.jsx:71)
    in div (at StoryList.jsx:68)
    in div (at StoryList.jsx:62)
    in StoryList (at App.js:9)
    in div (at App.js:8)
    in App (at src/index.js:7)

Uncaught Error: `LngLatLike` argument must be specified as a LngLat instance, an object {lng: <lng>, lat: <lat>}, an object {lon: <lng>, lat: <lat>}, or an array of [<lng>, <lat>]