Skip to main content
Improved solution.
Source Link
TomazicM
  • 26.3k
  • 23
  • 29
  • 40

As you correctly figured it out, vector layers in Leaflet do not have opacity option to set layer opacity, since opacity is regulated through layer style option. That's the reason why Leaflet.Control.Opacity plugin does not work on these layers.

One possible solution for this is to slightly modify Leaflet.Control.Opacity plugin so that for vector layers function is called which can change vector layer opacity through it's style.

There are only two lines to be added to the plugin internal _addItem method. Below is relevant part of the code where lines have to be inserted:

input.addEventListener('input', (event) => {
  const rgValue = event.target.value;
  const layer = this._getLayer(input.layerId).layer;
  if (this.options.vectorLayerOpacity) {                    // added line
    this.options.vectorLayerOpacity(layer, rgValue / 100);  // added line
  } else if (typeof layer._url === 'undefined') {
  } else {
    layer.setOpacity(Number(rgValue / 100));
  }
});

As a consequence function specified in newly introduced vectorLayerOpacity option will be called at each slider change, with two parameters: layer and opacity.

Below is an example of modified plugin used (only relevant part of code included):

var initLayerOpacity = 0.4;

var initLineOpacity = 1;
var initFillOpacity = 0.7; 

var lineOpacity = initLineOpacity;initLineOpacity * initLayerOpacity;
var fillOpacity = initFillOpacity;initFillOpacity * initLayerOpacity;

function style(feature) {
  return {
    weight: 2,
    opacity: lineOpacity,
    color: 'white',
    dashArray: '3',
    fillOpacity: fillOpacity,
    fillColor: getColor(feature.properties.density)
  };
}

var geojson = L.geoJson(statesData, {
  style: style,
  opacity: 1initLayerOpacity
}).addTo(map);

  var layers = {
   'OSM': osmLayer,
   'GeoJSON': geojson
  }
  
function vectorLayerOpacity(layer, opacity) {
  lineOpacity = opacity * initLineOpacity;
  fillOpacity = opacity * initFillOpacity;
  geojson.setStyle(style);
}

L.control.opacity(layers, {
  label: 'Layers Opacity',
  vectorLayerOpacity: vectorLayerOpacity
}).addTo(map);  

As you correctly figured it out, vector layers in Leaflet do not have opacity option to set layer opacity, since opacity is regulated through layer style option. That's the reason why Leaflet.Control.Opacity plugin does not work on these layers.

One possible solution for this is to slightly modify Leaflet.Control.Opacity plugin so that for vector layers function is called which can change vector layer opacity through it's style.

There are only two lines to be added to the plugin internal _addItem method. Below is relevant part of the code where lines have to be inserted:

input.addEventListener('input', (event) => {
  const rgValue = event.target.value;
  const layer = this._getLayer(input.layerId).layer;
  if (this.options.vectorLayerOpacity) {                    // added line
    this.options.vectorLayerOpacity(layer, rgValue / 100);  // added line
  } else if (typeof layer._url === 'undefined') {
  } else {
    layer.setOpacity(Number(rgValue / 100));
  }
});

As a consequence function specified in newly introduced vectorLayerOpacity option will be called at each slider change, with two parameters: layer and opacity.

Below is an example of modified plugin used (only relevant part of code included):

var initLineOpacity = 1;
var initFillOpacity = 0.7;
var lineOpacity = initLineOpacity;
var fillOpacity = initFillOpacity;

function style(feature) {
  return {
    weight: 2,
    opacity: lineOpacity,
    color: 'white',
    dashArray: '3',
    fillOpacity: fillOpacity,
    fillColor: getColor(feature.properties.density)
  };
}

var geojson = L.geoJson(statesData, {
  style: style,
  opacity: 1
}).addTo(map);

  var layers = {
   'OSM': osmLayer,
   'GeoJSON': geojson
  }
  
function vectorLayerOpacity(layer, opacity) {
  lineOpacity = opacity * initLineOpacity;
  fillOpacity = opacity * initFillOpacity;
  geojson.setStyle(style);
}

L.control.opacity(layers, {
  label: 'Layers Opacity',
  vectorLayerOpacity: vectorLayerOpacity
}).addTo(map);  

As you correctly figured it out, vector layers in Leaflet do not have opacity option to set layer opacity, since opacity is regulated through layer style option. That's the reason why Leaflet.Control.Opacity plugin does not work on these layers.

One possible solution for this is to slightly modify Leaflet.Control.Opacity plugin so that for vector layers function is called which can change vector layer opacity through it's style.

There are only two lines to be added to the plugin internal _addItem method. Below is relevant part of the code where lines have to be inserted:

input.addEventListener('input', (event) => {
  const rgValue = event.target.value;
  const layer = this._getLayer(input.layerId).layer;
  if (this.options.vectorLayerOpacity) {                    // added line
    this.options.vectorLayerOpacity(layer, rgValue / 100);  // added line
  } else if (typeof layer._url === 'undefined') {
  } else {
    layer.setOpacity(Number(rgValue / 100));
  }
});

As a consequence function specified in newly introduced vectorLayerOpacity option will be called at each slider change, with two parameters: layer and opacity.

Below is an example of modified plugin used (only relevant part of code included):

var initLayerOpacity = 0.4;

var initLineOpacity = 1;
var initFillOpacity = 0.7; 

var lineOpacity = initLineOpacity * initLayerOpacity;
var fillOpacity = initFillOpacity * initLayerOpacity;

function style(feature) {
  return {
    weight: 2,
    opacity: lineOpacity,
    color: 'white',
    dashArray: '3',
    fillOpacity: fillOpacity,
    fillColor: getColor(feature.properties.density)
  };
}

var geojson = L.geoJson(statesData, {
  style: style,
  opacity: initLayerOpacity
}).addTo(map);

  var layers = {
   'OSM': osmLayer,
   'GeoJSON': geojson
  }
  
function vectorLayerOpacity(layer, opacity) {
  lineOpacity = opacity * initLineOpacity;
  fillOpacity = opacity * initFillOpacity;
  geojson.setStyle(style);
}

L.control.opacity(layers, {
  label: 'Layers Opacity',
  vectorLayerOpacity: vectorLayerOpacity
}).addTo(map);  
Source Link
TomazicM
  • 26.3k
  • 23
  • 29
  • 40

As you correctly figured it out, vector layers in Leaflet do not have opacity option to set layer opacity, since opacity is regulated through layer style option. That's the reason why Leaflet.Control.Opacity plugin does not work on these layers.

One possible solution for this is to slightly modify Leaflet.Control.Opacity plugin so that for vector layers function is called which can change vector layer opacity through it's style.

There are only two lines to be added to the plugin internal _addItem method. Below is relevant part of the code where lines have to be inserted:

input.addEventListener('input', (event) => {
  const rgValue = event.target.value;
  const layer = this._getLayer(input.layerId).layer;
  if (this.options.vectorLayerOpacity) {                    // added line
    this.options.vectorLayerOpacity(layer, rgValue / 100);  // added line
  } else if (typeof layer._url === 'undefined') {
  } else {
    layer.setOpacity(Number(rgValue / 100));
  }
});

As a consequence function specified in newly introduced vectorLayerOpacity option will be called at each slider change, with two parameters: layer and opacity.

Below is an example of modified plugin used (only relevant part of code included):

var initLineOpacity = 1;
var initFillOpacity = 0.7;
var lineOpacity = initLineOpacity;
var fillOpacity = initFillOpacity;

function style(feature) {
  return {
    weight: 2,
    opacity: lineOpacity,
    color: 'white',
    dashArray: '3',
    fillOpacity: fillOpacity,
    fillColor: getColor(feature.properties.density)
  };
}

var geojson = L.geoJson(statesData, {
  style: style,
  opacity: 1
}).addTo(map);

  var layers = {
   'OSM': osmLayer,
   'GeoJSON': geojson
  }
  
function vectorLayerOpacity(layer, opacity) {
  lineOpacity = opacity * initLineOpacity;
  fillOpacity = opacity * initFillOpacity;
  geojson.setStyle(style);
}

L.control.opacity(layers, {
  label: 'Layers Opacity',
  vectorLayerOpacity: vectorLayerOpacity
}).addTo(map);