Adding keyboard controls to a Leaflet js Choropleth map

Question

I have a leaflet.js choropleth map that is almost exactly like the tutorial map

http://leafletjs.com/examples/choropleth.html

I want to be able to tab through the map and have the states info show up.

I have tried faking it with hidden links and triggering on the layers, but haven't had any success.

Any idea what best way to approach this would be?

Answer 1

With this code, I was able to get the mouseover to be simulated as (assuming that the variable 'p' is one of the path elements representing a state) on this page http://leafletjs.com/examples/choropleth-example.html

getScrollOffset = function (element) {
    if (!element.nodeType && element.document) {
        element = element.document;
    }
    if (element.nodeType === 9) {
        var docElement = element.documentElement,
            body = element.body;
        return {
            left: (docElement && docElement.scrollLeft || body && body.scrollLeft || 0),
            top: (docElement && docElement.scrollTop || body && body.scrollTop || 0)
        };
    }
    return {
        left: element.scrollLeft,
        top: element.scrollTop
    };
};

getElementCoordinates = function (element) {
    var doc = element.ownerDocument,
        scrollOffset = getScrollOffset(doc),
        xOffset = scrollOffset.left,
        yOffset = scrollOffset.top,
        coords = element.getBoundingClientRect();
    return {
        top: coords.top + yOffset,
        right: coords.right + xOffset,
        bottom: coords.bottom + yOffset,
        left: coords.left + xOffset,
        width: coords.right - coords.left,
        height: coords.bottom - coords.top
    };
};
var p = document.getElementsByTagName('path')[50];
var coords = getElementCoordinates(p);
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("mouseover", true, true, window,
0, coords.left/* screenX */, coords.top/* screen Y */, 0 /* clientX */, 0/* clientY */, false, false, false, false, 0, document.body);
p.dispatchEvent(evt);

Answer 2

While this is nearly a decade old, I still came across it while searching so I thought it warranted an update. Leaflet has added 'extend' syntax.

In my case, I wanted to add WASD for panning. I duplicated the majority of the source for arrow key handling, stripped it down, and replaced Arrows with WASD respectively. Then renamed 'keyboard' to 'wasdKeyboard' which adds it as an optional flag when creating a new L.Map object.

In your case, you could listen for keydown => 'tab' and reference the internal this._map object to perform on.