Bug combining Circle + Marker + Popup

[moimael]

Hi,

I am trying to display a marker with a popup inside a Circle. It was working fine in classic leaflet but with react-leaflet, only marker + popup shows. There is no way to display the circle (except when there is no marker in it).

Here is the code :

        <Circle center={this.props.mapState.ui.userPosition} radius={radius} color="#FF4E00">
          <Marker position={this.props.mapState.ui.userPosition}>
            <Popup>
              <span>You are within {radius} meters from this point</span>
            </Popup>
          </Marker>
        </Circle>

[PaulLeCam]

Hi,

A Circle can't contain a Marker, it can only contain a Popup. Depending on what you're trying to achieve, these components should be siblings or you should use a CircleMarker.

[moimael]

Yes that's what the doc said. By moving stuff around I had it working with the same code as above. If the circle is sibling with marker, I get a React error. It seems related to the fact that I have 2 react component (circle + marker) in a ternary expression. It also work if I write twice the same condition :

        {this.props.uiState.hasUserPosition ?
          <Circle center={this.props.uiState.userPosition} radius={radius} color="#FF4E00"></Circle> : null}
        {this.props.uiState.hasUserPosition ?
          <Marker position={this.props.uiState.userPosition} icon={currentPositionMarker}>
            <Popup>
              <span>You are within {radius} meters from this point</span>
            </Popup>
          </Marker> : null}

But not very pretty.

[PaulLeCam]

For this kind of case, I usually do something like this, I find it more readable:

render() {
  let circle = null;
  let marker = null;

  if (this.props.uiState.hasUserPosition) {
    circle = <Circle ... />;
    marker = <Marker ... />;
  }

  return (
    <Map ...>
      ...
      {circle}
      {marker}
    </Map>
  );
}