onezeroonezero · August 21, 2018 08:38 · Aug 21, 2018
diff --git a/index.html b/index.html
@@ -0,0 +1 @@
+<div id="mapid"></div>
diff --git a/osm-map-pane.markdown b/osm-map-pane.markdown
@@ -0,0 +1,7 @@
+OSM map pane
+------------
+
+
+A [Pen](https://codepen.io/onezeroonezero/pen/JajzKg) by [onezeroonezero](https://codepen.io/onezeroonezero) on [CodePen](https://codepen.io).
+
+[License](https://codepen.io/onezeroonezero/pen/JajzKg/license).
diff --git a/script.js b/script.js
@@ -0,0 +1,29 @@
+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);
+
+// Остальное добиваем стилями
+
diff --git a/scripts b/scripts
@@ -0,0 +1 @@
+<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
diff --git a/style.scss b/style.scss
@@ -0,0 +1,27 @@
+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;
+  }
+}
diff --git a/styles b/styles
@@ -0,0 +1 @@
+<link href="https://unpkg.com/[email protected]/dist/leaflet.css" rel="stylesheet" />
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<link href="https://unpkg.com/[email protected]/dist/leaflet.css" rel="stylesheet" />