#shorts - utworzenie dodatkowych miejsc w kontrolce sterującej

W leaflet domyślnie mamy dostępne cztery miejsca (cztery rogi mapy) w które możemy wstawić własne elementy lub zmienić pozycję już istniejących elementów np. zoom in/out.
Te miejsca to oczywiście [topleft, topright, bottomleft, bottomright], a co jeżeli chcemy stawić dodatkowy element ale na górze strony i na środku.

Oczywiście możemy to zrobić na wiele sposobów, np. dodając div do strony i przez position abolute i z-index wyśrodkować dany element. Wstrzyknąć element do leaflet-control-container.

Innym sposobem jest stworzenie dodatkowych miejsc.
Poniżej funkcja która tworzy dodatkowe miejsca i dodaje je to leaflet-control-container

(function addControlPlaceholders(map) {
  let corners = map._controlCorners;
  let l = "leaflet-";
  let container = map._controlContainer;

  function createCorner(vSide, hSide) {
    let className = l + vSide + " " + l + hSide;
    corners[vSide + hSide] = L.DomUtil.create("div", className, container);
  }

  createCorner("top", "center");
  createCorner("bottom", "center");
  // możesz tworzyć elementy jakie chcesz i ile chcesz
})(map);

Powiedzmy że chcę stawić legendę na dole mapy oraz na środku więc dodaję bottomcenter

L.Control.Legend = L.Control.extend({
  options: {
    position: "bottomcenter",
  },
  onAdd: function () {
    const container = L.DomUtil.create("div", "description");

    L.DomEvent.disableClickPropagation(container);

    container.insertAdjacentHTML(
      "beforeend",
      "Możliwość dodania dodatkowych miejsc w <strong>leaflet-control-container</strong>"
    );
    return container;
  },
});

new L.Control.Legend().addTo(map);

Poniższy działający przykład który zawiera autocomplete na górze oraz tekst na dole mapy.

See the Pen
create additional Control placeholders - leaflet.js by Greg (@Tomik23)
on CodePen.

Należy pamiętam że funkcja addControlPlaceholders musi zostać wywołana przed elementami dodawanymi do miejsca tworzonego przez tą funkcję 😉