Leaflet – How to Remove Link to Leafletjs.com in Attribution Control

leafletoffline

I will use the leaflet for a display showing a historical map of the history museum. It works on a local network that is not connected to the Internet, and visitors can manipulate the map with a stylus to learn about historical matters.

Leaflet will automatically generate a link to leafletjs.com in the attribution.
However, this link does not work because it is on a local network, and if a visitor accidentally touches it with a stylus, an inaccessible error screen will appear, confusing the visitor.

Is it possible to suppress this link to leafletjs.com?

Best Answer

Map object (let's say it's map) has property map.attributionControl which points to default map attribution control, where so called prefix is text Leaflet with a link to the Leaflet home page.

Attribution control prefix can be changed with the .setPrefix method (see https://leafletjs.com/reference.html#control-attribution-option). So to change prefix to text Leaflet without the link, the code could look like this:

map.attributionControl.setPrefix('Leaflet');

Related Solutions

[GIS] Add/Remove legend with Leaflet layers control

You could listen for the "overlayadd" and/or the "overlayremove" events on the map object and have two separate legends (two controls) defined, e.g.:

map.on('overlayadd', function (eventLayer) {
    // Switch to the Population legend...
    if (eventLayer.name === 'Population') {
        this.removeControl(populationChangeLegend);
        populationLegend.addTo(this);
    } else { // Or switch to the Population Change legend...
        this.removeControl(populationLegend);
        populationChangeLegend.addTo(this);
    }
});

EDIT: A more complete example:

var populationLegend = L.control({position: 'bottomright'});
var populationChangeLegend = L.control({position: 'bottomright'});

populationLegend.onAdd = function (map) {
var div = L.DomUtil.create('div', 'info legend');
    div.innerHTML +=
    '<img src="legend.png" alt="legend" width="134" height="147">';
return div;
};

populationChangeLegend.onAdd = function (map) {
var div = L.DomUtil.create('div', 'info legend');
    div.innerHTML +=
    '<img src="change_legend.png" alt="legend" width="134" height="147">';
return div;
};

// Add this one (only) for now, as the Population layer is on by default
populationLegend.addTo(map);

map.on('overlayadd', function (eventLayer) {
    // Switch to the Population legend...
    if (eventLayer.name === 'Population') {
        this.removeControl(populationChangeLegend);
        populationLegend.addTo(this);
    } else { // Or switch to the Population Change legend...
        this.removeControl(populationLegend);
        populationChangeLegend.addTo(this);
    }
});

Note that the this keyword in the event listener is the map object i.e. this is the same as map.

[GIS] Collapsable control in Leaflet

You mean it expands when hovering (not pressed) ...

There is no documentation but you can read the code here: https://github.com/Leaflet/Leaflet/blob/master/src/control/Control.Layers.js

Note in line 70

if (!L.Browser.android) {
                L.DomEvent.on(container, {
                    mouseenter: this._expand,
                    mouseleave: this._collapse
                }, this);
            }

And at the end of the file

_expand: function () {
    L.DomUtil.addClass(this._container, 'leaflet-control-layers-expanded');
},

_collapse: function () {
    L.DomUtil.removeClass(this._container, 'leaflet-control-layers-expanded');
}

Best Answer

Related Solutions

[GIS] Add/Remove legend with Leaflet layers control

[GIS] Collapsable control in Leaflet

Related Question