CODEWITHSUNDEEP
reactjsleaflet
Kokulan
Kokulan

Reputation: 1364

Reactjs Leaflet custom control button

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'

Upvotes: 1

Views: 3649

Answers (1)

Piyush Bhangale
Piyush Bhangale

Reputation: 137

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() {};

Upvotes: 1

Related Questions