React-leaflet: Popups not working with CircleMarker

[adamabernathy]

Before opening an issue, make sure to read the contributing guide and understand this is a bug tracker, not a support platform.

Please make sure to check the following boxes before submitting an issue.
Issues opened without using this template will be closed unless they have a good reason not to follow this template.

• [X] All peer dependencies are installed: React, ReactDOM and Leaflet.
• [X] Using a supported version of React and ReactDOM (v15.x or v16.x).
• [X] Using the supported version of Leaflet (v1.2.x) and its corresponding CSS file is loaded.
• [X] Using the latest stable version of React-Leaflet.
• [X] The issue has not already been reported.
• [X] Make sure you have followed the quick start guide for Leaflet.
• [X] Make sure you have fully read the documentation and that you understand the technical considerations.

Expected behavior

Popup should work with CircleMarker

Actual behavior

Popup not working with CircleMarker

Steps to reproduce

In plain old JS (this works)

stationLocations.map((k, i) => {
  L.circleMarker([k.LATITUDE, k.LONGITUDE])
    .bindPopup(`<span>${k.STID}</span>`)
    .addTo(stationsLayer)
});

Works with Marker (per docs)

return (
  <Map center={this.state.mapCenter} zoom={this.state.zoomLevel}>
    <TileLayer attribution={timeAttrib} url={tiles} />
    {this.state.stations.map((k, i) => {
      return (
        <Marker key={i} position={[Number(k.LATITUDE), Number(k.LONGITUDE)]}>
          <Popup><span>k.STID</span></Popup>
        </Marker>
      )
    })}
  </Map>
);

Does not work with CircleMarker

return (
  <Map center={this.state.mapCenter} zoom={this.state.zoomLevel}>
    <TileLayer attribution={timeAttrib} url={tiles} />
    {this.state.stations.map((k, i) => {
      return (
        <CircleMarker key={i} center={[Number(k.LATITUDE), Number(k.LONGITUDE)]}>
          <Popup><span>k.STID</span></Popup>
        </CircleMarker>
      )
    })}
  </Map>
);

[PaulLeCam]

Thanks for reporting this, it should be fixed in v1.7.6, please try it out.

[adamabernathy]

@PaulLeCam still unable to get it to work. Updated to 1.7.6 today. Any insight?

[PaulLeCam]

You can check this example that works as expected. If it doesn't for you it's most likely an issue with your environment.

[adamabernathy]

Even after modling my code after yours, no luck. I'm using create-react-app v1.4.3 right out of the box.

return (
  <Map center={this.state.mapCenter} zoom={this.state.zoomLevel}>
    <TileLayer attribution={attrib} url={tiles} />
      <CircleMarker center={[40.65, -111.5]} color="darkblue" weight={4} radius={20}>
      <Popup>
        <span>Popup in CircleMarker</span>
      </Popup>
    </CircleMarker>
  </Map>
)

[PaulLeCam]

Sorry but this is not helpful, please provide a WebpackBin or similar.

[adamabernathy]

https://www.webpackbin.com/bins/-Kzk2qfnjLlk8qOu4uIp

[PaulLeCam]

I don't know why your example doesn't work but this one does so I suggest you start from there to see what fails with your setup.

[adamabernathy]

Figured it out. Changed the CDN on the CSS and it worked. Thanks for your help Paul.