Hey man in react this code is not working please do help please tried so many times

[rohith231]

import React, { Component } from "react";
import { Map, Marker, Popup, FeatureGroup,LayersControl,TileLayer,GeoJSON  } from "react-leaflet";
import ReactLeafletGoogleLayer from "react-leaflet-google-layer";
import { EditControl } from "react-leaflet-draw";

import L from "leaflet";

import './centre.css'

import * as ELG from "esri-leaflet-geocoder";

const { BaseLayer } = LayersControl;

// import marker icons
delete L.Icon.Default.prototype._getIconUrl;

L.Icon.Default.mergeOptions({
  iconRetinaUrl:
    "https://unpkg.com/leaflet@1.4.0/dist/images/marker-icon-2x.png",
  iconUrl: "https://unpkg.com/leaflet@1.4.0/dist/images/marker-icon.png",
  shadowUrl: "https://unpkg.com/leaflet@1.4.0/dist/images/marker-shadow.png"
});

const  dash_straight = {
  color: 'rgb(145, 146, 150)',
  fillColor: 'rgb(145, 146, 150)',
  dashArray: 8,
  opacity: 0.8,
  weight: '1',
  iconTravelLength: 1,
  iconMaxWidth: 50,
  iconMaxHeight: 50,
  fullAnimatedTime: 7000,
  easeOutPiece: 4,
  easeOutTime: 2500,
};

 class Module extends Component {
  constructor(props) {
    super(props);
    this.state = {
      lat: 17.3850 ,
      lng: 78.4867,
      zoom: 13,
      marker: [17.3850 ,78.4867]
    };
  }

  componentDidMount() {
    const map = this.leafletMap.leafletElement;
    const searchControl = new ELG.Geosearch().addTo(map);
    const results = new L.LayerGroup().addTo(map);

    searchControl.on("results", function(data) {
      results.clearLayers();
      for (let i = data.results.length - 1; i >= 0; i--) {
        results.addLayer(L.marker(data.results[i].latlng));
      }
    });

 L.bezier ({
      path: [
          [
              {lat: 7.8731, lng: 80.7718, slide: 'RIGHT_ROUND'},//Sri Lanka
              {lat: -25.2744, lng: 133.7751, slide: 'LEFT_ROUND'},//Australia
              {lat: 36.2048, lng: 138.2529}//Japan
          ],
          [
              {lat: 7.8731, lng: 80.7718, slide: 'RIGHT_ROUND'},//Sri Lanka
              {lat: 3.1390, lng: 101.6869}
          ],
          [
              {lat: 7.8731, lng: 80.7718, slide: 'RIGHT_ROUND',deep:"8"},//Sri Lanka
              {lat: 41.8719, lng: 12.5674}
          ],[
              {lat: -25.2744, lng: 133.7751},//Australia
              {lat: -40.9006, lng: 174.8860}//Japan
          ],
          [
              {lat: 7.8731, lng: 80.7718, slide: 'RIGHT_ROUND'},
              {lat: -18.7669, lng: 46.8691},
          ]
      ],
      icon: {
          path: "plane.png"
      }
  }, dash_straight).addTo(map);

  }

  render() {
    const position = [this.state.lat, this.state.lng];
    const center = [17.3850 ,78.4867];

    return (
     <div>

       <bezier/>
        <pre>{JSON.stringify(this.state)}</pre>
        <button onClick={this.setPos}>remove</button>
        <Map
          center={this.state.marker}
          zoom={this.state.zoom}
          onzoomend={this.handleOnZoomed}
          ref={m => {
            this.leafletMap = m;
          }}
        >
          <Marker
            position={this.state.marker}
            //  defaultMarker={{ defaultMarker: true }}
          >

          </Marker>

          <TileLayer
            attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          />
          <FeatureGroup>
            <EditControl
              ref="edit"
              position="topright"
              onCreated={this.removeEverything}
              draw={{
                rectangle: true
              }}
            />
          </FeatureGroup>

        <div className="pointer" />
        </Map>

        </div>
    );
  }
}

export default Module

[spmsupun]

Hi @ohith231, Did you try the demo ? I haven't testes with React, I will try to reproduce this

[rohith231]

_Please upload this react code by today please trying from months._

[rohith231]

Hey what is the import statement for this plugin is it

import from'./Leaflet.bezier'

or any other thing

[KushnirDV]

Hi. I added import Snap from "snapsvg-cjs"; above import 'leaflet.bezier'; And it works in my case.