OSM map pane

index.html

<div id="mapid"></div>

osm-map-pane.markdown

OSM map pane

A Pen by onezeroonezero on CodePen.

License.

script.js

var map = L.map('mapid').setView([51.505, -0.09], 13);

L.tileLayer('//maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png', {
			attribution: 'Wikimedia maps beta | Map data &copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
		}).addTo(map);

// Создаем новый pane, который не вложен в mapPane => независимый от transform
var pane = map.createPane('fixed', document.getElementById('mapid'));

var marker = L.marker([51.5, -0.09]).addTo(map);
var marker2 = L.marker([51.51, -0.09]).addTo(map);

var popup = L.popup({
  pane: 'fixed', // Указываем нужный pane
  className: 'popup-fixed',
  autoPan: false,
}).setContent('First popup');

var popup2 = L.popup({
  pane: 'fixed', // Указываем нужный pane
  className: 'popup-fixed',
  autoPan: false,
}).setContent('Second popup');

marker.bindPopup(popup);
marker2.bindPopup(popup2);

// Остальное добиваем стилями

scripts

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>

style.scss

html,
body {
  height: 100%;
}

#mapid {
  height: 100%;
}

.popup-fixed {
  position: fixed;
  top: auto;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  transform: none !important;
  margin: 0;
  border-radius: 0;
  
  .leaflet-popup-tip-container {
    display: none;
  }
  
  .leaflet-popup-content-wrapper {
    border-radius: 0;
  }
}

styles

<link href="https://unpkg.com/[email protected]/dist/leaflet.css" rel="stylesheet" />