1

I am trying to develop a leaflet function but I am getting this error which I am having trouble understanding. This is my plugin code thus far:

L.Spotlight = L.Class.extend({

    options: {
        width: 1,
        height: 1
    },

    initialize: function(name, options) {
        this.name = name;
        L.setOptions(this, options);
    }

});

And this is the code that calls it:

var mySpotlight = L.Spotlight("aaa", {
    width: 1,
    height: 1
});

I get this error when trying to initialize mySpotlight:

this.callInitHooks is not a function

I'm having a hard time understanding this because it seems like other plugin source code that I look at behaves the same way, for example, this one:

L.Ellipse = L.Path.extend({

    options: {
        fill: true,
        startAngle: 0,
        endAngle: 359.9
    },

    initialize: function (latlng, radii, tilt, options) {

        L.setOptions(this, options);
        this._latlng = L.latLng(latlng);

        if (tilt) {
            this._tiltDeg = tilt;
        } else {
            this._tiltDeg = 0;
        }

        if (radii) {
            this._mRadiusX = radii[0];
            this._mRadiusY = radii[1];
        }
    },

    ...

});
  • I have rolled back the second question that you added. If an answer provides a solution to a question and you then want to ask another simply accept the answer and ask a new separate question. – PolyGeo Mar 11 at 22:13
  • Why did you roll it back? I didn't ask a second question, I provided more info than what the answer provided which was related to the first. – wfgeo Mar 11 at 22:23
  • In that case you should provide it as a self-answer. I mis-identified it as a new question but I think rolling back remains appropriate. – PolyGeo Mar 11 at 22:26
2

L.Spotlight is object, so you have to create new instance:

var mySpotlight = new L.Spotlight("aaa", {
    width: 1,
    height: 1
});
  • Thank you for the clear answer. Using this I was able to figure out more about how Leaflet uses factory functions and I will add this to my original post. – wfgeo Mar 11 at 19:23
1

@TomazicM answered the initial question but with that knowledge I took it a bit further.

I wanted to be able to call a function to return my extended object, the same way one calls any standard object (e.g. var map = L.map(...), var myGeoJSON = L.geoJSON(...), etc.).

The way to do this is by also declaring a factory function like so:

L.Spotlight = L.Class.extend({

    options: {
        highlightStyle: 1,
        spotlightShape: 1,
        spotlightStyle: 1,
        targetLayer: 1
    },

    initialize: function(name, options) {
        this.name = name;
        L.setOptions(this, options);
    }

});

L.spotlight = function(name, options) {
    return new L.Spotlight(name, options);
};

(as per the docs - scroll down to "Factories"). Now I can initialize a Spotlight object two different ways:

var mySpotlight = new L.Spotlight("aaa", {
    highlightStyle: 1,
    spotlightShape: 2,
    spotlightStyle: 3,
    targetLayer: 4
});

var mySpotlight2 = L.spotlight("aaa", {
    highlightStyle: 1,
    spotlightShape: 2,
    spotlightStyle: 3,
    targetLayer: 4
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.