CODEWITHSUNDEEP
typescriptleafletangular5
Blackboy
Blackboy

Reputation: 192

Leaflet cant display div when mouseover marker

I would like to do a method that will display me in the bottom right corner of the div with information about the marker when I hover over the marker with the mouse

All in typescript.

It is detected to move the mouse over the marker (the console correctly prints the message) but the info item does not create.

error :

core.js:1440 ERROR TypeError: Cannot read property '_controlCorners' of undefined
    at NewClass.addTo (leaflet-src.js:4620)
    at NewClass.eval (osm-generator.component.ts:73)
    at NewClass.fire (leaflet-src.js:588)
    at NewClass._fireDOMEvent (leaflet-src.js:4272)
    at NewClass._handleDOMEvent (leaflet-src.js:4229)
    at HTMLDivElement.handler (leaflet-src.js:2231)
    at ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:4724)
    at ZoneDelegate.invokeTask (zone.js:420)
    at Zone.runTask (zone.js:188)

code:

let info = L.control.attribution({position: "bottomright"});

          info.onAdd = function () {
            let div = L.DomUtil.create('div', 'info'),
              labels = [];

            labels.push('<div class="information-section">Informations</div>');

            div.innerHTML = labels.join('<br>');

            return div;
          };

          marker.on('mouseover', function (e) {
            marker.openPopup();

            info.addTo(this.map);

          });
          marker.on('mouseout', function () {
            marker.closePopup();
          });

Upvotes: 0

Views: 585

Answers (2)

Blackboy
Blackboy

Reputation: 192

working version ,('this') after function resolve it.

let info = L.control.attribution({position: "bottomright"});

          info.onAdd = function () {
            let div = L.DomUtil.create('div', 'info'),
              labels = [];

            labels.push('<div class="information-section">Informations</div>');

            div.innerHTML = labels.join('<br>');

            return div;
          };

          marker.on('mouseover', function (e) {
            marker.openPopup();

            info.addTo(this.map);

          });
          marker.on('mouseout', function () {
            marker.closePopup();
          }, this );

Upvotes: 0

IvanSanchez
IvanSanchez

Reputation: 19089

Doing a quick search in Leaflet's source code will show that the only place that _controlCorners is accessed is at this line of code:

// @method addTo(map: Map): this
// Adds the control to the given map.
addTo: function (map) {
    // [stuff]
    var corner = map._controlCorners[pos];
    // [stuff]
},

It seems that you're adding a control to a non-initialized map, or otherwise the parameter to the addTo() call is not a map. I suggest you start by console.log()ing the value of map in your calls to addTo(map).

Upvotes: 0

Related Questions