Сделать карту на весь экран

31 марта 2022, 08:40

Цель: Сделать карту на весь экран без дублирования по горизонтали и верхнего "пустого пространства".

Проблема: Вместо дублирования карты появились тайлы "map data no yet available"

Говоря конкретнее, нужно убрать тайлы где написано "map data no yet available". И чтобы при перетаскивании нельзя было тащить дальше карты, т.е. дальше границы карты не перетаскивается

Код на JSFiddle

Answer 1

Возможно вот так Вам подойдет:

var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'; 
       
var osm = new L.TileLayer(osmUrl, { 
    noWrap: true 
}); 
 
var map = new L.Map('map', { 
    center: new L.LatLng(60, 30.3), 
    layers: [osm] 
}); 
 
var rect = new L.LatLngBounds( 
  new L.LatLng(85, -180),   
  new L.LatLng(-85, 180) 
); 
 
map.setMinZoom(map.getBoundsZoom(rect, true)); 
map.fitBounds(rect);  
map.setMaxBounds(rect);

body { 
    margin: 0; 
    overflow: hidden; 
} 
 
#map { 
    position: fixed; 
    width: 100%; 
    height: 100%; 
}

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"/> 
<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script> 
<div id="map"></div>