React-leaflet: Vectors not displaying. Markers are working fine.

[swennemans]

I'm trying to display polylines, circles etc. However, these are never displayed. Markers are working fine. And the map is displayed properly.

My render method

render() {
    const center = [51.505, -0.09];

    const polyline = [
      [51.505, -0.09],
      [51.51, -0.1],
      [51.51, -0.12]
    ];

    const polygon = [
      [51.515, -0.09],
      [51.52, -0.1],
      [51.52, -0.12]
    ];

    return (
        <Map center={center} zoom={13}>
          <TileLayer
              attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
              url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
              />
          <Circle center={center} fillColor='blue' radius={200}/> // not displayed
          <Polygon color='purple' positions={polygon}/> // not displayed
         <Marker position={center} /> // is displayed
        </Map>
    );
  }

I'm using version 0.7.0 and leaflet 0.7.5. I've tried requesting the leaflet css in my HTML headers or copying the CSS.

No errors are thrown, just nothing is displaying. I'm a little bit lost where to find the problem. Any pointers or ideas?

[swennemans]

On further investigation it seems to be a problem with Webpack.

Using ExtractTextPlugin for stylesheets is working fine. When using style-loader it goes bad.

[swennemans]

This can be closed. I can't pinpoint exactly what the problem is with webpack. But different webpack configs result in different outcomes.

[jgoux]

@swennemans Did you find the origine of this issue ? I can't see my vectors too, I'm also using webpack.

EDIT : I also tried with ExtractTextPlugin without success.

EDIT2 : No more issue, it wasn't about the CSS, but I used GeoJson coordinates for a Polygon, and the [lat, lng] are inverted in geojson, so I couldn't see it ! :+1:

[willkan]

I found that in my case, vector layer not display, not matter wheter use ExtractTextPlugin.

But when I set the svg style svg {height: auto, width: auto}, it goes to display well.

[ferdyh]

I'm running into the same issue. Any suggestion on where to set this style?

[thomasr96]

@ferdyh , ran into this same problem and it seems that you have to add svg {height: auto; width: auto} directly to App.css in the React project src directory.