CODEWITHSUNDEEP
javascriptreactjsreact-leaflet
Laurence Fass
Laurence Fass

Reputation: 1942

React Leaflet question: how to correctly configure ReactLeaflet vector shape pathOptions?

Im introducing vectors shapes into my React Leaflet project and I cant get pathOptions to apply. Pathoptions dont appear to work on vector shapes.

Im trying to copy the documentation examples which work fine... https://react-leaflet.js.org/docs/example-panes/

...but applying exact same code structure to sandbox is not working: https://codesandbox.io/s/react-leaflet-pathoptions-not-working-n3env?file=/src/index.js

code extract

  render() {
    return (
      <div>
        <Map center={this.state.center} zoom={this.state.zoom}>
          <TileLayer
            attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.osm.org/{z}/{x}/{y}.png"
          />
          <Pane name="orange-circle" style={{ zIndex: 500 }}>
            {/* note that pathoptions are being ignored */}
            <Circle
              center={this.state.center}
              radius={1000}
              pathOptions={{fillOpacity: 1, color: "orange"}}
            />
          </Pane>
        </Map>
      </div>
    );
  }
}

result: the pathOptions are not being applied.

Any help or advice on something I might be missing, or a working sandbox are both very much appreciated.

Upvotes: 0

Views: 1088

Answers (1)

pilchard
pilchard

Reputation: 12919

pathOptions are implemented in react-leaflet 3 within the new MapContainer component.

react-leaflet 3.1 - pathOptions w/ MapContainer note the dependency change for react-leaflet 3.1.0

A work-around using react-leaflet 2.8 is to declare the options as an object and then spread it in the component to pass each option as its own prop.

react-leaflet 2.8 - pathOptions work-around

const { Map, TileLayer, Pane, Path, Circle } = window.ReactLeaflet;

class App extends React.Component {
  state = {
    center: [51.505, -0.091],
    zoom: 13
  };
  

  render() {
  
  const pathOptions= {fillOpacity: 1, color: "orange"};
  
    return (
      <div>
        <Map center={this.state.center} zoom={this.state.zoom}>
          <TileLayer
            attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.osm.org/{z}/{x}/{y}.png"
          />
          <Pane name="orange-circle" style={{ zIndex: 500 }}>
            {/* note that pathoptions are being ignored */}
            <Circle
              center={this.state.center}
              radius={1000}
             {...pathOptions}
            />
          </Pane>
        </Map>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));
.leaflet-container {
  height: 100vh;
  width: 100vw;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script> <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/> <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-leaflet/2.8.0/react-leaflet.min.js"></script>


<div id="root"></div>

Upvotes: 1

Related Questions