problem using in React applicaton

[rowheat02]

Don't know how to import L.WMS in React. I am new to this React and leaflet.

Here is the code:

import 'leaflet/dist/leaflet.css';
import L from 'leaflet.wms/lib/leaflet';
import 'leaflet.wms/dist/leaflet.wms';
import 'leaflet.wms/lib/require';

class App extends Component {
  componentDidMount() {   
   var map1 = L.map("map").setView([27.664198, 85.361624], 5);
    var BaseOsm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',
      {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      }).addTo(map1);
    map1.setView([-29.764377375163114, 147.3486328125
    ]);

    // var stComerciaisLayer= L.tileLayer.wms("http://localhost:8080/geoserver/nyc/wms", {
    //     layers: 'nyc:wind_direction',
    //     format: 'image/png',
    //     transparent: true,
    //     attribution: "Algum texto de teste"
    //   }).addTo(map1);

    var source = L.WMS.source("http://localhost:8080/geoserver/nyc/wms", {
      'transparent': true
    });


    source.getLayer('nyc:wind_direction').addTo(map1);

  }

  render() {
    return (
      <div style={{ width: 600, height: 600 }} id="map">

      </div>
    );
  }
}
export default App; ```

The way we did this in our react application is by doing npm install of the library and importing it as such:

import LeafletWms from "leaflet.wms";

Now we can use it by doing

const layerSource = LeafletWms.source(
    "URL",
    {}
  );

layerSource.getLayer("LAYER_NAME").addTo(map)

[saedrna]

The way we did this in our react application is by doing npm install of the library and importing it as such:

import LeafletWms from "leaflet.wms";

Now we can use it by doing

const layerSource = LeafletWms.source(
    "URL",
    {}
  );

layerSource.getLayer("LAYER_NAME").addTo(map)

The above also works for vue.