index.js (1613B)
1 import L from 'leaflet'; 2 3 import './style.css'; 4 import {onElementResize} from '~/lib/anyElementResizeEvent'; 5 6 const MapWithSidebars = L.Map.extend({ 7 initialize: function (id, options) { 8 this._sidebarsContainer = L.DomUtil.get(id); 9 this.setupSidebarsLayout(this._sidebarsContainer); 10 L.Map.prototype.initialize.call(this, this._mapContainer, options); 11 onElementResize(this._mapContainer, L.Util.requestAnimFrame.bind(null, this.invalidateSize.bind(this))); 12 }, 13 14 setupSidebarsLayout: function (container) { 15 this._sidebarContainers = {}; 16 const sidebars = this._sidebarContainers; 17 L.DomUtil.addClass(container, 'leaflet-map-sidebars-container'); 18 sidebars['left'] = L.DomUtil.create('div', 'leaflet-map-sidebar-left', this._sidebarsContainer); 19 const midColumn = L.DomUtil.create('div', 'leaflet-map-sidebar-mid-column', this._sidebarsContainer); 20 sidebars['right'] = L.DomUtil.create('div', 'leaflet-map-sidebar-right', this._sidebarsContainer); 21 sidebars['top'] = L.DomUtil.create('div', 'leaflet-map-sidebar-top', midColumn); 22 this._mapContainer = L.DomUtil.create('div', 'leaflet-map-container-with-sidebars', midColumn); 23 sidebars['bottom'] = L.DomUtil.create('div', 'leaflet-map-sidebar-bottom', midColumn); 24 }, 25 26 addElementToSidebar: function (barName, element) { 27 this._sidebarContainers[barName].appendChild(element); 28 }, 29 30 removeElementFromSidebar: function (barName, element) { 31 this._sidebarContainers[barName].removeChild(element); 32 }, 33 }); 34 35 export {MapWithSidebars};