CODEWITHSUNDEEP
javascriptleaflethookhandlerreact-leaflet
munkaboo
munkaboo

Reputation: 65

Leaflet Map Cursor Configuration not Updating

I have a leaflet map with a cursor displaying the lat lang coordinate of the cursor.

L.CursorHandler = L.Handler.extend({

    addHooks: function () {
        this._popup = new L.Popup();
        this._map.on('mouseover', this._open, this);
        this._map.on('mousemove', this._update, this);
        this._map.on('mouseout', this._close, this);
    },

    removeHooks: function () {
        this._map.off('mouseover', this._open, this);
        this._map.off('mousemove', this._update, this);
        this._map.off('mouseout', this._close, this);
    },
    
    _open: function (e) {
        this._update(e);
        this._popup.openOn(this._map);
    },

    _close: function () {
        this._map.closePopup(this._popup);
    },

    _update: function (e) {
        this._popup.setLatLng(e.latlng)
            .setContent(e.latlng.toString());
    }
});

L.Map.addInitHook('addHandler', 'cursor', L.CursorHandler);

The original code formatted the lat-lon as "LatLng(12.25232563, 43.52432453)" for example. I edited the format in order to display to two decimal places without the LatLng or parentheses - eg: 12.25,43.52.

However, at some point, the configuration became fixed, and now only displays in this later 2-decimal places format:

enter image description here

This behaviour is bizarre, since even when I change the code to something like

_update: function (e) {
        this._popup.setLatLng(e.latlng)
            .setContent("Hello");
    }

the map popup format does not change, still displaying the decimal lat-lon from earlier. I am not sure why this is occuring, and why changes to the code do not reflect on the map. Even more strangely, I am not sure where the map draws the logic from, as it stubbornly continues to display the lat-long even when the entire method is deleted. The behaviour does not change upon stopping the React (npm) server / reloading the web-browser.

This is probably due to some internal state of the map which needs to be deleted/updated on page load. I would appreciate any advice!

Upvotes: 0

Views: 315

Answers (1)

munkaboo
munkaboo

Reputation: 65

It would seem that cursor settings for leaflet are global, and results set in a separate directory were affecting the cursor on all maps in the project.

Upvotes: 0

Related Questions