Controling an Image Overlay

Map

When using the maps, content is loaded from third-party servers. If you agree to this, a cookie will be set and this notice will be hidden. If not, no maps will be displayed.

Shortcode

[leaflet-map height=500px width=100% fitbounds]
[leaflet-image-overlay src=/extra/wp-content/uploads/sites/20/2024/04/P1000249.jpg bounds="51.322647,13.7189001;51.352139,13.7503571"]images[/leaflet-image-overlay]
[leaflet-marker lat=51.322647 lng=13.7189001]south-west[/leaflet-marker]
[leaflet-marker lat=51.352139 lng=13.7189001]north-west[/leaflet-marker]
[leaflet-marker lat=51.352139 lng=13.7503571]north-east[/leaflet-marker]
[leaflet-marker lat=51.322647 lng=13.7503571]south-east[/leaflet-marker]
[image_overlay-control]
[zoomhomemap]

Code

Use e.g. WPCode and configure this as a PHP snippet in Frontend only.

<?php
function leafext_image_overlay_script(){
	$text = '
<script>
window.WPLeafletMapPlugin = window.WPLeafletMapPlugin || [];
window.WPLeafletMapPlugin.push(function () {
  let map = window.WPLeafletMapPlugin.getCurrentMap();
  let overlays = window.WPLeafletMapPlugin.overlays;
  let images = [];
  let opacity = [];
  Object.entries( overlays).forEach(
    ([key, value]) =>
    {
      let name = value._url.replace(/.*\//, "");
      images[name] = value;
      opacity[name] = value;
    }
  );
  L.control.layers(null, images, {
    collapsed:false
  }).addTo(map);
  L.control.opacity(opacity,{
    collapsed:false
  }).addTo(map);
});
</script>';
	return "\n".$text."\n";
}
function leafext_image_overlay_function( ){
	leafext_enqueue_opacity();
	return leafext_image_overlay_script();
}
add_shortcode('image_overlay-control','leafext_image_overlay_function');
Nofollow!