question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Feature icon does not show up.

See original GitHub issue

The marker-15 feature icon is not showing up.

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>
					</Map>
				</div>
			</div>
		);
	}
}
Screen Shot 2019-06-03 at 2 59 34 PM

This is the only potentially relevant warning: Line 72: Style prop value must be an object react/style-prop-object

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:12

github_iconTop GitHub Comments

2reactions
ajthinkingcommented, Nov 29, 2020

Im using almost the exact example in the readme and the feature is not showing. Tried a few styles mentioned to no effect. Any known combination that will work? Or where can I see a reference of compatible styles?

import React from 'react';
import ReactMapboxGl, { Layer, Feature } from 'react-mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
import * as mapboxgl from 'mapbox-gl'
import { inject, observer } from "mobx-react"
import 'mapbox-gl/dist/mapbox-gl.css';


const MapboxMap = ReactMapboxGl({
    accessToken:
      '.....'
  });

class Map extends React.Component {

    render() {
        return (
            <MapboxMap
                style="mapbox://styles/mapbox/streets-v9"
                containerStyle={{
                    height: '100vh',
                    width: '100vw'
                }}
                >
                <Layer type="symbol" id="marker" layout={{ 'icon-image': 'light-v9' }}>
                    <Feature coordinates={[0, 0]} />
                </Layer>
            </MapboxMap>
        )
    }
}

export default inject('store')(observer(Map));
2reactions
KOSSOKOcommented, Dec 8, 2019

So for mapbox://styles/mapbox/streets-v11 for example, what is the correct name of marker-15 ? I’m facing the same issue.

Read more comments on GitHub >

github_iconTop Results From Across the Web

7 Quick Ways to Fix Desktop Icons not Showing on Windows 10
3. Make sure the Show Desktop icons feature is enabled · Right-click on the empty area on your desktop. · Choose View >...
Read more >
How to Fix the Desktop Icons Disappeared on Windows 10
Solution 1: Turn on the visibility of desktop icons · Right-click on an empty space on your desktop. · Click on the “View”...
Read more >
Windows 10: Fix Desktop Icons Are Missing! [Not Showing]
Windows 10: Fix Desktop Icons Are Missing! [ Not Showing ] ; 0:00 What This video is about ; 0:22 Solution 1: Allow...
Read more >
Desktop Icons Missing – How to Fix Windows 10 PC Icons that ...
Right-click on an empty portion on your desktop. Hover on "View", then make sure the "Show desktop icons" option is checked.
Read more >
Icons not showing in Windows Search Box on Windows 11/10
The last command will reboot your computer. After it boots back up, check if your issue is now fixed. You could also manually...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found