Reactjs Leaflet custom control button

Question

I'm trying to add custom button for zoom to leaflet map in reactjs this is my code

import React, {Component} from 'react';
import { Map, TileLayer, Marker, Popup, ZoomControl } from 'react-leaflet';
import Control from 'react-leaflet-control';
import Button from '@material-ui/core/Button';

class LeafletMapComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            lat: 51.505,
            lng: -0.09,
            zoom: 13
        }
    }

    render() {
        const position = [this.state.lat, this.state.lng];
        return (
            <Map ref={m => { this.leafletMap = m; }} zoomControl={false} center={position} zoom={this.state.zoom}>
                <TileLayer
                    attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                    url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
                />

                <Control position="topleft" >

                </Control>  

            </Map>
        );
    }
}

I'm using react-leaflet-control to create the custom control but it's giving me an error 'Error: createLeafletElement() must be implemented'

I guess you need to have some child element to Control

Shubham Khatri
– Shubham Khatri

2018-06-12 07:23:44 +00:00
Commented Jun 12, 2018 at 7:23 — Shubham Khatri
– Shubham Khatri, Commented Jun 12, 2018 at 7:23

Piyush Bhangale · Accepted Answer · 2018-06-12 07:24:19Z

1

Since the update of Leaflet to v 1.1 a component must contain a createLeafletElement function otherwise MapLayer.js will throw an error.

// eslint-disable-next-line no-unused-vars

MapLayer.prototype.createLeafletElement = function createLeafletElement(props) { throw new Error('createLeafletElement() must be implemented'); };

Implement a createLeafletElement function in the ClusterLayer.js to fix this error.

ClusterLayer.prototype.createLeafletElement = function createLeafletElement() {};

answered Jun 12, 2018 at 7:24

Piyush Bhangale

13713 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kokulan Over a year ago

where can i find the ClusterLayer.js

Collectives™ on Stack Overflow

Reactjs Leaflet custom control button

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related