React-mapbox-gl: Adding Markers to map

[PawkaHub]

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?

[alex3165]

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 :

        <Layer
          type="symbol"
          layout={{ "icon-image": "harbor-15" }}>
          <Feature
            coordinates={markerCoord}
            onHover={this._onHover}
            onEndHover={this._onEndHover}
            onClick={this._onClickMarker}/>
        </Layer>

You can check the examples for more informations.

[PawkaHub]

Okay gotcha, the difference between the two must have got me confused. Thanks for the help, feel free to close this off!

[alex3165]

Ok no problem ! :)

[gurbraj]

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?

import ReactMapboxGl, { Layer, Feature } from "react-mapbox-gl";
import React from "react";
class CrimeMap extends React.Component {
  render() {
    return (

      <div>
        <ReactMapboxGl
          style="mapbox://styles/mapbox/streets-v8"
          accessToken="my access token goes here"

          containerStyle={{
            height: "80vh",
            width: "100vw"
          }}>
            <Layer
              type="symbol"
              id="marker"
              layout={{ "icon-image": "marker-15" }}>
              <Feature coordinates={[-0.481747846041145, 51.3233379650232]}/>
            </Layer>
        </ReactMapboxGl>
      </div>
    )
  }
}

export default CrimeMap;

[lcsteixeira]

gurbraj, u have no token in code

[sojimon]

I'm trying to mark a circle using react-mapbox-gl.
{ this.props.position.map((point) => { console.log("point"); console.log(point.position); console.log("point"); <Layer type="circle" radius={20} color={ 'red'} fillColor= '#f03' fillOpacity= {0.5} paint={this.getCirclePaint()}> <Feature coordinates={point.position} /> </Layer> }) }
If I used the above code I can not see any circles.But If I hard coded as following I get circle.Why?
<Layer type="circle" radius={20} color={ 'red'} fillColor= '#f03' fillOpacity= {0.5} paint={this.getCirclePaint()}> <Feature coordinates={[-87.61694, 41.86625] } /> </Layer>

[gurbraj]

@sojimon, have you tried using a return-statement in the map(.)? I think a return statement is included only iff the function body is one line.

[nikkiczx]

I'm trying to put a marker down... but there's nothing there...

<Map style="mapbox://styles/mapbox/dark-v9" center={userLngLat} containerStyle={{ height: "100vh" }}> <Layer type="symbol" id="marker" layout={{ "icon-image": "marker-15" }}> <Feature coordinates={userLngLat}/> </Layer> </Map>

What am I missing??

[sojimon]

@gurbraj If I used return statement in map() .But no change.Code is below,

this.props.position.map((point) => { console.log("point"); console.log(point.position); console.log("point"); return ( <Layer type="circle" radius={20} color={ 'red'} fillColor= '#f03' fillOpacity= {0.5} paint= {this.getCirclePaint()}> <Feature coordinates={point.position} /> </Layer> ) })

[sojimon]

@gurbraj Thanks. Now it works.I changed the above code as below.A key is added to the repeating element.
this.props.position.map((point,index) => { console.log("point"); console.log(point.position); console.log("point"); return (<Layer key = {index} type="circle" radius={20} color={ 'red'} fillColor= '#f03' fillOpacity= {0.5} paint={this.getCirclePaint()}> <Feature coordinates={point.position} /> </Layer>) })

[sojimon]

@gurbraj But the same issue exist for drawing line.Can not draw line between circles. The code is
{ this.props.position.map((point,index) => { console.log("point"); console.log(point.position); console.log("point"); return ( <Layer key = {index} type="circle" radius={20} color={ 'red'} fillColor= '#f03' fillOpacity= {0.5} paint={this.getCirclePaint()}> <Feature coordinates={point.position} /> </Layer> ) }) } { this.props.position.map((lineData,lineIndex) => { console.log("lineData"); console.log(lineData.position); console.log("lineData"); return ( <Layer key = {lineIndex} type="line"> <Feature coordinates={lineData.position} /> </Layer> ) }) }

[richessler]

@alex3165 any insight into @gurbraj comment? https://github.com/alex3165/react-mapbox-gl/issues/28#issuecomment-307996565

Every other layout works except marker-11 & marker-15. Seems odd

[katbusch]

For what it's worth, mine didn't show up when I had a custom style but worked I used the mapbox style

[nidhi-anilabsinc]

your mistake is that it doesn't take icon-image layout={{ "icon-image": "marker-15" }}
So use this::=>
type="circle"
id="marker"
paint={{
'circle-color': '#ff5200',
'circle-stroke-width': 1,
'circle-stroke-color': '#fff',
'circle-stroke-opacity': 1,
}}
>
{
position.map((each) => )
}

[nidhi-anilabsinc]

complete example is here::=>
/* eslint class-methods-use-this: ["error", {
"exceptMethods": ["render", "componentDidMount", "printPDF", "handlePrint", "footer"]
}] */
import React, { Component } from 'react';
import ReactMapboxGl, { Layer, Feature, Popup } from 'react-mapbox-gl';
import { Col } from 'reactstrap';
import StickyBox from 'react-sticky-box';
// import Play from '../../../images/mapicon.png';

const Map = ReactMapboxGl({
accessToken:
'pk.eyJ1IjoibmlkaGl0YW52aXIiLCJhIjoiY2thNHpwNjA4MDRtcjNmb2RpMGJidXlhbyJ9.v78ppEe30Pv2MhRO53koTw',
});
/* eslint-disable */
class Forms extends Component {
constructor(props) {
super(props);
this.state = {
newMouse: false,
};
}

handleLayer() {
this.setState({ newMouse: true });
console.log('CLICK layer');
}

render() {
const { newMouse } = this.state;
const position = [
[-121.51948618896917, 38.492760481480694],
[-119.297305, 36.330954],
[-120.68795832899104, 35.626457450000004],
[-118.83069895417268, 34.165537439763625],
[-118.1444779, 34.1476452],
[-121.855426, 39.752564],
[-120.84761779591837, 37.49354869387755],
[-122.70897938416091, 38.441560581054524],
[-117.2691316, 32.9905597],
];
return (

style="mapbox://styles/mapbox/streets-v9"
containerStyle={{
height: '100vh',
width: '100vw',
}}
// center={[76.7179, 30.7046]}
zoom={[7]}
fitBounds={ position.filter((el, i) => i)}
>
type="circle"
id="marker"
paint={{
'circle-color': '#ff5200',
'circle-stroke-width': 1,
'circle-stroke-color': '#fff',
'circle-stroke-opacity': 1,
}}
>
{
position.map((each) => )
}

{
newMouse
? position.map((each) => coordinates={each}
offset={{
'bottom-left': [12, -38], 'bottom': [0, -38], 'bottom-right': [-12, -38]
}}>

Popup

)
: ''
}

);
}
}
export default Forms;

[nidhi-anilabsinc]

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?

import ReactMapboxGl, { Layer, Feature } from "react-mapbox-gl";
import React from "react";
class CrimeMap extends React.Component {
  render() {
    return (

      <div>
        <ReactMapboxGl
          style="mapbox://styles/mapbox/streets-v8"
          accessToken="my access token goes here"

          containerStyle={{
            height: "80vh",
            width: "100vw"
          }}>
            <Layer
              type="symbol"
              id="marker"
              layout={{ "icon-image": "marker-15" }}>
              <Feature coordinates={[-0.481747846041145, 51.3233379650232]}/>
            </Layer>
        </ReactMapboxGl>
      </div>
    )
  }
}

export default CrimeMap;

use this one :=>
type="circle"
id="marker"
paint={{
'circle-color': '#ff5200',
'circle-stroke-width': 1,
'circle-stroke-color': '#fff',
'circle-stroke-opacity': 1,
}}
>

[adifsgaid]

hello there, i have hard time to show my markers on the map this is the code

`import React from "react";
import numeral from "numeral";
import {Popup, Layer, Feature} from 'react-mapbox-gl';

const casesTypeColors = {
cases: {
hex: "#CC1034",
multiplier: 800,
},
recovered: {
hex: "#7dd71d",
multiplier: 1200,
},
deaths: {
hex: "#fb4443",
multiplier: 2000,
},
};

export const sortData = (data) =>{
const sortedData = [...data];
return sortedData.sort((a,b)=> ((a.cases > b.cases) ? - 1 : 1))}

export const prettyPrintStat = (stat) =>
stat ? +${numeral(stat).format("0.0a")} : "+0";

export const showDataOnMap = (data , casesType = 'cases') =>
data.map((country) => (

  <Layer
  id="marker"
  type="circle"
  paint={{ 
     'circle-stroke-width':  Math.sqrt(country[casesType]) * casesTypeColors[casesType].multiplier,
      'circle-color': casesTypeColors[casesType].hex,
      'circle-opacity': 0.4
  }}
  {...console.log(Math.sqrt(country[casesType]) * casesTypeColors[casesType].multiplier)}
  >  

  <Feature coordinates={[country.countryInfo.long, country.countryInfo.lat]}/>

  <Popup>
    <div className='info-container'>
      <div
        className='info-flag'
        style={{ backgroundImage: `url(${country.countryInfo.flag})` }}
      ></div>
      <div className='info-name'>{country.country}</div>
      <div className='info-confirmed'>
        Cases: {numeral(country.cases).format('0,0')}
      </div>
      <div className='info-recovered'>
        Recovered: {numeral(country.recovered).format('0,0')}
      </div>
      <div className='info-deaths'>
        Deaths: {numeral(country.deaths).format('0,0')}
      </div>
    </div>
  </Popup>
</Layer>

))
`