Я знаю, как назначить слои Leaflet JS и редактировать их ... но я не хочу, чтобы это было go вне границ всей карты (как показано на рисунке ниже):
Я хочу, чтобы изображение оставалось в максимальных пределах, как показано на этом изображении из этой демонстрации Codepen (https://codepen.io/mikila85/pen/dNwpxM?editors=0010):
Я пытался скопировать код из CodePen в Plunkr, но я получаю сообщение об ошибке, показанное ниже: 
Вот мой код Plunkr (https://plnkr.co/edit/HP4C5PAWHX9T5G9j?open=lib%2Fscript.js); Я думаю, что это происходит из исходных файлов (в файле html, а не в файле js), но я не знаю, что я делаю неправильно:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width", initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
<script src="https://npmcdn.com/leaflet.path.drag@0.0.5/src/Path.Drag.js"></script>
<script src='https://leaflet.github.io/Leaflet.Editable/src/Leaflet.Editable.js'></script>
</head>
<body>
<div id="map"></div>
<!-- <script src="lib/script.js"></script> -->
</body>
<script>
var startPoint = [0, 0];
var map = L.map('map', {
editable: true,
maxBounds: [
[-90, -180],
[90, 180]
]
}).setView(startPoint, 0);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
noWrap: true,
bounds: [
[-90, -180],
[90, 180]
]
}).addTo(map);
// create custom vertex marker editor
var vertexMarkerClass = L.Editable.VertexMarker.extend({
onDrag: function(e) {
e.vertex = this;
var iconPos = L.DomUtil.getPosition(this._icon),
latlng = this._map.layerPointToLatLng(iconPos);
// fix out of range vertex
if (latlng.lng < -180) {
e.latlng.lng = latlng.lng = -180;
this.setLatLng(latlng);
}
if (latlng.lng > 180) {
e.latlng.lng = latlng.lng = 180;
this.setLatLng(latlng);
}
this.editor.onVertexMarkerDrag(e);
this.latlng.update(latlng);
this._latlng = this.latlng; // Push back to Leaflet our reference.
this.editor.refresh();
if (this.middleMarker) this.middleMarker.updateLatLng();
var next = this.getNext();
if (next && next.middleMarker) next.middleMarker.updateLatLng();
}
});
// attach custom editor
map.editTools.options.vertexMarkerClass = vertexMarkerClass;
var rec = L.rectangle([
[50, 50],
[-50, -50]
]).addTo(map).enableEdit();
rec.on('dblclick', L.DomEvent.stop).on('dblclick', rec.toggleEdit);
</script>
</html>