How to stretch the map under the visible area?

Question

In this example, the map is stretched in height with minimal zoom.
Еxample: https://conan-exiles.net/map/#3/-3052.00/1819.00

I tried to figure out the example code, but it is complicated.
MyMap:

<div id="map" style="width: 100%; height: 100%; background: #000000; margin: 0;"></div>
<script type="text/javascript">
    var mapSW = [0, 32768],
        mapNE = [32768, 0];
    var map = L.map('map', {    
        attributionControl:false,
        zoomControl: false,
        maxBoundsViscosity: 1.0,
        }).setView([0, 0], 2);
    var Main_Map = L.tileLayer('map_png/{z}/{x}/{y}.png',{  
        minZoom: 1,
        maxZoom: 7,
        maxNativeZoom: 4,
        continuousWorld: false,
        noWrap: true,
        crs: L.CRS.Simple,
        }).addTo(map);
    map.setMaxBounds(new L.LatLngBounds(    
        map.unproject(mapSW, map.getMaxZoom()),
        map.unproject(mapNE, map.getMaxZoom())
        )); 
    </script>

The answer is hidden in this Example, but how to apply it to my map?:

        var mapExtent = [0.00000000, -4000.00000000, 4000.00000000, 0.00000000];
        var mapMinZoom = 2;
        var mapMaxZoom = 5;
        var mapMaxResolution = 0.25000000;
        var mapMinResolution = Math.pow(2, mapMaxZoom) * mapMaxResolution;
        var tileExtent = [0.00000000, -4000.00000000, 4000.00000000, 0.00000000];
        var maxBounds = [[0,0], [-4000,4000]];
        var crs = L.CRS.Simple;
            crs.transformation = new L.Transformation(1, -tileExtent[0], -1, tileExtent[3]);
            crs.scale = function(zoom) {
                return Math.pow(2, zoom) / mapMinResolution;
            };
            crs.zoom = function(scale) {
                return Math.log(scale * mapMinResolution) / Math.LN2;
            };

        var map = new L.Map('map', {
            renderer: L.canvas,
            maxZoom: mapMaxZoom,
            minZoom: mapMinZoom,
            layers: overlays,
            crs: crs,
            maxBounds: maxBounds,
            maxBoundsViscosity: 1,
            attributionControl:false,
            zoomControl:false

        });

            layer = L.tileLayer('map_png/{z}/{x}/{y}.png', {
            minZoom: mapMinZoom, maxZoom: mapMaxZoom,
            bounds: [[0,0], [-4000,4000]],
            tms: false          
        }).addTo(map);

        map.fitBounds([
        crs.unproject(L.point(mapExtent[2], mapExtent[3])),
        crs.unproject(L.point(mapExtent[0], mapExtent[1]))
        ]);

Possible duplicate of [Can I prevent panning Leaflet map out of the world's edge?](https://stackoverflow.com/questions/22155017/can-i-prevent-panning-leaflet-map-out-of-the-worlds-edge) — Grzegorz T., Oct 09 '19 at 09:06
Sorry, but this did not solve my problem. The map does not stretch in the height of the visible area. — Katamanga, Oct 09 '19 at 11:35
And I reproduced the example you pointed out ... and, it does not work. http://breamap.hostronavt.ru/index_test_Bouncy.html But! I used the "maxBoundsViscosity" parameter from there to prevent panning out of the world edge. http://breamap.hostronavt.ru — Katamanga, Oct 09 '19 at 11:45
I am not sure if I understand what are you trying to achieve. Are you trying to set min/max zoom? — Kajbo, Oct 09 '19 at 14:06
Not really :) With minZoom = 1, the map is much smaller than the div area, with minZoom = 2, the map is larger than the div, vertically. I would like to set minZoom = 2, and stretch the map to the height of the div. Like here: https://conan-exiles.net/map/#2/-2116.0/2002.0 — Katamanga, Oct 09 '19 at 15:03

Grzegorz T. · Accepted Answer · 2019-10-10T10:47:17.133

I hope you found this solution useful.

let mapExtent = [0.00000000, -4100.00000000, 4100.00000000, 0.00000000];
let minZoom = 0;
let maxZoom = 6;
let maxBounds = [
  [0, 0],
  [-4100, 4100]
];
let mapMaxResolution = 0.2500000;
let mapMinResolution = Math.pow(2, maxZoom) * mapMaxResolution;

let crs = L.CRS.Simple;

crs.scale = function(zoom) {
  console.log(zoom);
  return Math.pow(2, zoom) / mapMinResolution;
};
crs.zoom = function(scale) {
  return Math.log(scale * mapMinResolution) / Math.LN2;
};

let map = L.map('map', {
  crs,
  minZoom,
  maxZoom,
  maxBounds,
  zoomSnap: 0, // important
  maxBoundsViscosity: 1.0,
  attributionControl: false,
  zoomControl: true
});

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors',
  maxNativeZoom: 4,
  noWrap: true,
  minZoom,
  maxZoom
}).addTo(map);

map.fitBounds([
  crs.unproject(L.point(mapExtent[2], mapExtent[3])),
  crs.unproject(L.point(mapExtent[0], mapExtent[1]))
]);

map.on('zoomend', function() {
  document.querySelector('.zoom').innerText = map.getZoom();
});

html,
body {
  height: 100%;
  margin: 0;
}

#map {
  width: 100%;
  height: 100%;
}

.zoom {
  font-size: 4rem;
  font-weight: 700;
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 999;
  color: #fff;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.js"></script>
<div class="zoom"></div>
<div id='map'></div>

And with your map jsfiddle.net

Grzegorz T., thanks again. About your example on jsfiddle.net ... with zoom = 2 around the map we see a gray field. This is what I want to prevent - stretch the map in heigh, at any screen size: breamap.hostronavt.ru/Untitled-1.jpg — Katamanga, Oct 10 '19 at 08:50
I don't know if the map can be expanded this way. In this example you gave conan-exiles.net/map/#2/-2116.0/2002.0 the map is also not at 100% of the page height. She also has the same margin. — Grzegorz T., Oct 10 '19 at 09:24
@Katamanga I did a post update and see [jsfiddle.net](https://jsfiddle.net/tomik23/th13fvx2/) — Grzegorz T., Oct 10 '19 at 10:48

How to stretch the map under the visible area?

1 Answers1

Linked