javascript - Is it possible to add custom HTML to leaflet Layer Groups and Layers Control - Stack Overflow

admin管理员组

文章数量:1318570

Is there any way to inject custom HTML into the layer group and layers control?

In our application we've implemented sliders (input:range) to adjust opacity settings and it's being obvious that a dedicated slider for the base layer inside of its control container makes sense. There is no option or parameter to modify this control:

Ideally we want to create a custom slider inside this group and layer control (obviously our 'base layer' control group is limited to a single set of layer options):

Thank you for any Help!

Is there any way to inject custom HTML into the layer group and layers control?

In our application we've implemented sliders (input:range) to adjust opacity settings and it's being obvious that a dedicated slider for the base layer inside of its control container makes sense. There is no option or parameter to modify this control:

Ideally we want to create a custom slider inside this group and layer control (obviously our 'base layer' control group is limited to a single set of layer options):

Thank you for any Help!

• javascript
• leaflet

Share Improve this question Follow edited Aug 19, 2020 at 8:55 ghybs 53.4k66 gold badges8686 silver badges114114 bronze badges asked Dec 1, 2016 at 8:48 Greg RowlesGreg Rowles 34133 silver badges1313 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Not with the default code.

You can, however, extend the layers control and create a subclass, adding a bit of extra functionality, e.g.:

L.Control.Layers.WithSomethingExtra = L.Control.Layers.extend({
  _initLayout: function() {
    L.Control.Layers.prototype._initLayout.call(this);
    L.DomUtil.create('div', 'leaflet-control-layers-separator', this._form);
    var myThing = L.DomUtil.create('div', 'some-extra-thing', this._form);
    myThing.innerHTML = 'My custom thing inside the layers control!!';
  }
});

See this a a working demo here.

If this is confusing, read the source code for src/control/Control.Layers.js, and the Leaflet tutorials on creating plugins.

While it might not be very elegant simply creating a unique className for your empty div and appending HTML objects with document.createElement('input') will work, as per this example:

https://playground-leaflet.rhcloud./mogo/1/edit?html,console,output

If you don't want to mess around with extending leaflet classes (I tried the suggestion from IvanSanches and it didn't work for me) there is another possible solution although I don't know if it is exactly what you hoped for but it works well for me when I want to create "custom containers" for leaflet layers. it will require a small amount of CSS to remove/replace the leaflet styles of the layer control

1. Create your L.Control.Layers as you already have
2. Create a basic L.Control layer "parent" to act as a container for your slider and layer control
3. Add your slider (and any other custom elements) as child elements within the parent container
4. Add your layer control as another child within this container
5. Disable click propagation on the parent Layer (otherwise when you click your slider it will go through to the map below)
6. Use CSS to remove the leaflet styles from the layer control

// FIRST DEFINE YOUR "layerControl" AND ADD IT TO THE MAP
// of course this assumes you already created the "baseMaps" object
// and in your case are not adding overlayLayers to this control
// so you can set that argument to "undefined"
let layerControl = L.control.layers(baseMaps, undefined, {
  collapsed: false // you won't want this layer to be collapsed
}).addTo(map);

// ******** !! MOST IMPORTANT PART 1.1 !! ********
// GRAB A REFERENCE TO THE DIV THAT CONTAINS THE "layerControl"
let layerControlDiv = layerControl.getContainer();

// you can set an id for it if you want to use it to override the CSS later
layerControlDiv.setAttribute("id", "layer-control-id");

// CREATE A BASIC CONTROL LAYER THAT YOU WILL USE AS A PARENT/CONTAINER FOR THE "layerControl"
// Set its position to where you want it to appear on the map
let layerControlParentLayer = L.control({
  position: "topright"
});

// DEFINE THE PARENT LAYER'S ".onAdd" FUNCTION AND APPEND THE "layerControl" SOMEWHERE WITHIN IT
// This is where the magic happens. Provides similar functionality to IvanSanches's solution
layerControlParentLayer.onAdd = function(map){
  // Create the main div that will hold all your elements
  let parentDiv = L.DomUtil.create("div");
  // let parentDiv = L.DomUtil.create("div", "layer-control-parent-class"); //use this create method if you want to give it a class

  // you can set an id for it if you want to use it for CSS
  parentDiv.setAttribute("id", "layer-control-parent-id");

  // TEMPORARILY: set the background color to be white so the boundaries of the parentDiv are visible
  // you'll actually want to style the whole thing in your CSS code and remove this line
  parentDiv.setAttribute("style", "background-color: white;");
  
  // create another div to hold your slider and append it to your parentDiv
  let sliderDiv = L.DomUtil.create('div', 'slider-div-class', parentDiv);

  // set the innerHTML to be the HTML for your slider
  sliderDiv.innerHTML = '<input type="range" min="0" max="100" value="0" id="slider-id" class="slider-class" >';

  // OPTIONAL: create a separator if you want and append it to the your parentDiv
  L.DomUtil.create('div', 'leaflet-control-layers-separator', parentDiv);
  
  // ******** !! MOST IMPORTANT PART 1.2 !! ********
  // now you can append the overlayControlDiv that holds your overlay layer controls
  parentDiv.appendChild(layerControlDiv);

  // ...
  // add more stuff after the layerControlDiv if you want
  // ...

  // ******** !! MOST IMPORTANT PART 2 !! ********
  // we don't want clicks on this layer/div to propagate to the layers below,
  // otherwise our custom slider will be hard to interact with
  L.DomEvent.disableClickPropagation(parentDiv);

  // return the parentDiv to be used as the div for your layerControlParent Layer
  return parentDiv;
};

// add the Layer to the map
layerControlParentLayer.addTo(map);

REQUIRES MESSING AROUND WITH CSS TO GET IT TO LOOK RIGHT
Of course this will look pretty odd because the "layerControl" has its own styles that are set from leaflet's own css. You'll need to tweak the styles in your own CSS to account for this.

Mostly just remove the leaflet container styles

#layer-control-id{
  margin: 0px;
  padding: 0px;
  border: 0px;
  background: none;
  box-shadow: none;
}

Hopefully this is helpful and solves your problem.

本文标签： javascriptIs it possible to add custom HTML to leaflet Layer Groups and Layers ControlStack Overflow