[GIS] How to specify (cross-browser) mouse pointer sets on leaflet control

cssleafletstyle

Leaflet custom controls might be interactive, when the user can use the mouse on them to perform an action, or non-interactive, when they are used only to show information. This should affect the mouse pointer used for elements of the control (and possibly sub-elements of it for partly interactive controls).

What is the correct way to set those pointers for the control container and its sub-elements, if any (e.g. well defined css classes or else)?

Best Answer

Building on the answer by IvanSanchez, you can add a class to a layer:

var layer = L.featureGroup([]);
layer.style({'className': 'mask'})

then in CSS

path.leaflet-interactive.mask {cursor: crosshair}

Related Solutions

[GIS] In leaflet does the addControl automatically handle events via the leaflet API

Your two problems seem like they might be unrelated. A 403 response is usually a permissions problem. Either the web server process doesn't have permissions access the resource, or the you are not providing the correct credentials upon request. Can you give details about your WMS server?

The addControl() method simply extends the L.Control class which only inherits a few positional methods and attributes. The rest is really up to you. You have to provide the controls, both graphically and programmatically, and script the listeners. Any event resulting from a user action needs to be handles by you whether that is calling a new layer or simply navigating to a new page.

The L.Control.Layer class provides a basic, but full handling of events. You simply need to give it an dictionary object with the layers that you want to present user controls and it will handle providing the controls and listening for user actions. Layer Example/Tutorial

I have noticed you can been struggling with this custom module for a while? Do you know why it was custom built? What are your goals? Could it not be easier to just start from scratch than fighting with a 'black-box' for hours?

Any any case if you think you need to use this custom module see this question about possible getting the module in human-readable format. https://stackoverflow.com/questions/822119/online-tool-to-unminify-decompress-javascript

[GIS] Custom Leaflet Controls

Got it.

For a demo look at the CodePen Demo: http://codepen.io/DrYSG/pen/zJsiG

Here are the JS and the CSS snippets that do the relevant work:

L.Control.Command = L.Control.extend({
    options: {
        position: 'topleft',
    },

    onAdd: function (map) {
        var controlDiv = L.DomUtil.create('div', 'leaflet-control-command');
        L.DomEvent
            .addListener(controlDiv, 'click', L.DomEvent.stopPropagation)
            .addListener(controlDiv, 'click', L.DomEvent.preventDefault)
        .addListener(controlDiv, 'click', function () { MapShowCommand(); });

        var controlUI = L.DomUtil.create('div', 'leaflet-control-command-interior', controlDiv);
        controlUI.title = 'Map Commands';
        return controlDiv;
    }
});

L.control.command = function (options) {
    return new L.Control.Command(options);
};

and the CSS:

.leaflet-control-command-interior
{
    background-image: url(images/command.png);
    width: 20px;
    height: 20px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    display: block;
    padding: 3px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    box-shadow: 0 1px 7px rgba(0, 0, 0, 0.65);
    cursor: auto;
    text-align: center;
    background-color: #FFFFFF;
}

.leaflet-control-command-interior:hover
{
    background-color: #F4F4F4;
}

Best Answer

Related Solutions

[GIS] In leaflet does the addControl automatically handle events via the leaflet API

[GIS] Custom Leaflet Controls

Related Question