-
Notifications
You must be signed in to change notification settings - Fork 534
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Adding Markers to map #28
Comments
Hi @PawkaHub, first you sent a link to mapbox js which display a map using leaflet, react-mapbox-gl is using mapbox-gl-js which is based on webgl to render the map. The equivalent for mapbox-gl-js would be this : https://www.mapbox.com/mapbox-gl-style-spec/#layers-symbol. Which mean if you want to create a marker using react-mapbox-gl, you should do something like this :
You can check the examples for more informations. |
Okay gotcha, the difference between the two must have got me confused. Thanks for the help, feel free to close this off! |
Ok no problem ! :) |
I'm trying the example on https://github.com/alex3165/react-mapbox-gl but the marker does not show for some reason. any idea alex?
|
gurbraj, u have no token in code |
I'm trying to mark a circle using react-mapbox-gl. |
@sojimon, have you tried using a |
I'm trying to put a marker down... but there's nothing there...
What am I missing?? |
@gurbraj If I used
|
@gurbraj Thanks. Now it works.I changed the above code as below.A key is added to the repeating element. |
@gurbraj But the same issue exist for drawing line.Can not draw line between circles. The code is |
@alex3165 any insight into @gurbraj comment? #28 (comment) Every other layout works except |
For what it's worth, mine didn't show up when I had a custom style but worked I used the mapbox style |
your mistake is that it doesn't take icon-image layout={{ "icon-image": "marker-15" }} |
complete example is here::=> const Map = ReactMapboxGl({ handleLayer() { render() { <Map style="mapbox://styles/mapbox/streets-v9" containerStyle={{ height: '100vh', width: '100vw', }} // center={[76.7179, 30.7046]} zoom={[7]} fitBounds={ position.filter((el, i) => i)} > <Layer type="circle" id="marker" paint={{ 'circle-color': '#ff5200', 'circle-stroke-width': 1, 'circle-stroke-color': '#fff', 'circle-stroke-opacity': 1, }} > { position.map((each) => <Feature coordinates={each} onClick={() => this.handleLayer()} />) } { newMouse ? position.map((each) => <Popup coordinates={each} offset={{ 'bottom-left': [12, -38], 'bottom': [0, -38], 'bottom-right': [-12, -38] }}> Popup) : '' } ); } } export default Forms; |
use this one :=> |
hello there, i have hard time to show my markers on the map this is the code `import React from "react"; const casesTypeColors = { export const sortData = (data) =>{ export const prettyPrintStat = (stat) => export const showDataOnMap = (data , casesType = 'cases') =>
)) |
How would I go about adding markers to the map as described here? (https://www.mapbox.com/help/markers/) So far I can only see a way to add symbols, fills, circles, and lines. Is this functionality not included yet or am I just missing something?
The text was updated successfully, but these errors were encountered: