I created this web map: https://etomanon.github.io/ but whenever I add more than 1 image overlay it starts freezing. It happens on Github and local hosting too. Is my notebook that bad or does it lag for you too? Sometimes Chrome crash totally – out of memory. The largest image has only 2,1 MB. Any idea how to solve it? I do not see any errors in console. Can Leaflet handle more image overlays?
[GIS] Leaflet – out of memory
javascriptleaflet
Related Solutions
This is by design, or rather said, by default. The devs (me included) thought "well, users already have minZoom to prevent this kind of thing", so the focus was on making sure that the maxBounds were always visible when zoomed out.
As a workaround, you might want to run something like:
map.setMinZoom( map.getBoundsZoom( map.options.maxBounds ) );
Be aware that this might change if the map container is resized.
You should change the L.Control.Sidebar.css (so you should make the lib local) multiple times, cause sidebar's size depends on the window size. I will show you an option of making the sidebar twice larger, you could change values to your purpose. I am adding the whole .css file with comments where there are changes.
.leaflet-sidebar {
position: absolute;
height: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 10px;
z-index: 2000; }
.leaflet-sidebar.left {
left: -1000px; /*has to be larger than any @media widths*/
transition: left 0.5s, width 0.5s;
padding-right: 0; }
.leaflet-sidebar.left.visible {
left: 0; }
.leaflet-sidebar.right {
right: -1000px; /*has to be larger than any @media widths*/
transition: right 0.5s, width 0.5s;
padding-left: 0; }
.leaflet-sidebar.right.visible {
right: 0; }
.leaflet-sidebar > .leaflet-control {
height: 100%;
width: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 8px 24px;
font-size: 1.1em;
background: white; background: rgba(255,255,255,0.75);
box-shadow: 0 1px 7px rgba(0, 0, 0, 0.65);
-webkit-border-radius: 4px;
border-radius: 4px; }
.leaflet-touch .leaflet-sidebar > .leaflet-control {
box-shadow: none;
border: 2px solid rgba(0, 0, 0, 0.2);
background-clip: padding-box; }
@media (max-width: 767px) {
.leaflet-sidebar {
width: 100%;
padding: 0; }
.leaflet-sidebar.left.visible ~ .leaflet-left {
left: 100%; }
.leaflet-sidebar.right.visible ~ .leaflet-right {
right: 100%; }
.leaflet-sidebar.left {
left: -100%; }
.leaflet-sidebar.left.visible {
left: 0; }
.leaflet-sidebar.right {
right: -100%; }
.leaflet-sidebar.right.visible {
right: 0; }
.leaflet-sidebar > .leaflet-control {
box-shadow: none;
-webkit-border-radius: 0;
border-radius: 0; }
.leaflet-touch .leaflet-sidebar > .leaflet-control {
border: 0; } }
@media (min-width: 768px) and (max-width: 991px) {
.leaflet-sidebar {
width: 600px; } /*make bigger here*/
.leaflet-sidebar.left.visible ~ .leaflet-left {
left: 600px; } /*make bigger here (move original map control)*/
.leaflet-sidebar.right.visible ~ .leaflet-right {
right: 600px; } } /*make bigger here*/
@media (min-width: 992px) and (max-width: 1199px) {
.leaflet-sidebar {
width: 800px; } /*make bigger here*/
.leaflet-sidebar.left.visible ~ .leaflet-left {
left: 800px; } /*make bigger here (move original map control)*/
.leaflet-sidebar.right.visible ~ .leaflet-right {
right: 800px; } } /*make bigger here*/
@media (min-width: 1200px) {
.leaflet-sidebar {
width: 920px; } /*make bigger here*/
.leaflet-sidebar.left.visible ~ .leaflet-left {
left: 920px; } /*make bigger here (move original map control)*/
.leaflet-sidebar.right.visible ~ .leaflet-right {
right: 920px; } } /*make bigger here*/
.leaflet-sidebar .close {
position: absolute;
right: 20px;
top: 20px;
width: 31px;
height: 31px;
color: #333;
font-size: 25px;
line-height: 1em;
text-align: center;
-webkit-border-radius: 16px;
border-radius: 16px;
cursor: pointer;
z-index: 8; }
.leaflet-left {
transition: left 0.5s; }
.leaflet-right {
transition: right 0.5s; }
Here is my result: 
Best Answer
Displaying large images is a memory-heavy operation for web browsers (they are not designed for that, and they choke when applying CSS styling to those images). Specially when the images are several times larger than the screen, and when there are several.
You are making Leaflet load several 7000px x 11000px images. Cut down the size (there are lots of blank areas in those land cover images), or slice them in tiles (to show them as
L.TileLayers).