CODEWITHSUNDEEP
javascriptleaflet
Danielle
Danielle

Reputation: 3839

Circle getBounds() method fails in Leaflet

I have:

const map = L.map("mapid", {preferCanvas: true});
//....    
const circle = L.circle([47.6652642, -122.3161248], {
    color: '#ea647f',
    fillOpacity: 0.4,
    radius: 30
}).addTo(map);

but calling getBounds() on circle fails:

const bounds = circle.getBounds();

It fails inside function getBounds in Circle.js which is Leaflet code,
The Leaflet getBounds method code is:

getBounds: function () {
        var half = [this._radius, this._radiusY || this._radius];

        return new LatLngBounds(
            this._map.layerPointToLatLng(this._point.subtract(half)),
            this._map.layerPointToLatLng(this._point.add(half)));
    }

Trying to access this._map.layerPointToLatLng fails
I get the error that this._map is undefined
Any ideas?

===================================================

Please Note:
I also have a polygon defined, and calling the getBounds() on the polygon passes fine and works correctly, shows correctly on the map.
=> It is only the Circle.getBounds() that fails

Upvotes: 3

Views: 2099

Answers (2)

peeebeee
peeebeee

Reputation: 2618

You need to initialise the map state with setView() or some other mechanism. The layerPointToLatLng calls will fail otherwise.

Upvotes: 0

Falke Design
Falke Design

Reputation: 11348

Add center and zoom to the map.

const map = L.map("map", {center:[47.6652642, -122.3161248], zoom: 16 ,preferCanvas: true});

Upvotes: 2

Related Questions