Doesn't work with react-leaflet v2

[jayenashar]

Seems context has changed quite a bit.

[jayenashar]

Managed to use this (no idea why i need the setTimeout):

import {MapControl, withLeaflet} from 'react-leaflet';

class LocateControlImpl extends MapControl {
    createLeafletElement(props) {
        const {options, startDirectly} = props;
        const {map} = props.leaflet;
        const lc = L.control.locate(options).addTo(map);

        if (startDirectly)
            setTimeout(() => {
                lc.start()
            }, 0);
        return lc;
    }
}

const LocateControl = withLeaflet(LocateControlImpl);

[chuikoffru]

I also have this error...

TypeError: Cannot read property 'addLayer' of undefined

[cyrildurand]

I had the same issue and fix it like this :

import L from 'leaflet';
import { withLeaflet, MapControl } from 'react-leaflet';
import 'leaflet.locatecontrol';

class LocateControl extends MapControl {
  createLeafletElement(props) {
    const {
      leaflet: { map },
      ...options
    } = props;

    const lc = L.control.locate(options).addTo(map);
    return lc;
  }
}
export default withLeaflet(LocateControl);

I also extend it for my purpose

import L from 'leaflet';
import { withLeaflet, MapControl } from 'react-leaflet';
import 'leaflet.locatecontrol';
import ReactDOMServer from 'react-dom/server';

class LocateControl extends MapControl {
  createLeafletElement(props) {
    const {
      leaflet: { map },
      ...options
    } = props;

    if (this.props.children !== undefined && options.createButtonCallback === undefined) {
      options.createButtonCallback = (container, options) => {
        let link = L.DomUtil.create('a', 'leaflet-bar-part leaflet-bar-part-single', container);
        link.role = 'button';
        link.href = '#';
        link.title = options.strings.title;
        link.innerHTML = ReactDOMServer.renderToString(this.props.children);

        return { link, icon: link.firstChild };
      };
    }

    const lc = L.control.locate(options).addTo(map);
    return lc;
  }
}

export default withLeaflet(LocateControl);

which allow me to put my own svg icon

          <LocateControl flyTo>
            <Icon color="#000" icon={ICONS.LOCATE_ME} />
          </LocateControl>

Not sure how to check for v2 of leaflet but let me know if you want me to create a pull request

[MudassarAther]

@cyrildurand It doesn't work for current version of react-leaflet. Could you let me know which version you used?

[cyrildurand]

It works with react-leaflet v2.2.0, leaflet v1.4.0 and leaflet.locatecontrol v0.66.0.

Do you have any error message ?

[MudassarAther]

Now, I see it works. Seems like the reason was at other codes. Thanks for your support.

[fgrs]

https://react-leaflet.js.org/docs/en/plugins.html still says not supported in v2 leaflet