How to center world map using leaflet

Question

I am trying to display the full map using leaflet. Code Pen

I am trying to achieve the following via leaflet:

I thought using mymap.fitWorld() would achieve the effect but it is not.

You might want to use L.CRS.EPSG4326 as the map's CRS, and then load that blue marble image as a L.ImageOverlay — IvanSanchez
Hi @user3525290. Did you check my answer. Did it solve your issue? — kboul
@kboul sort of. I might go a different routne. n2yo.com Trying to track satellite like this. — user3525290

kboul kboul · Accepted Answer · 2019-04-17T21:16:50

You can provide minZoom and maxZoom levels to be 1 like this:

var map = L.map('map', {
    minZoom: 1,
    maxZoom: 1,
 });

and then define setView as follows:

map.setView([0, 0], 0);

<!DOCTYPE html>
<html>
<head>
	
	<title>Zoom Levels Tutorial - Leaflet</title>

	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	
	<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg==" crossorigin=""></script>


	<style>
		html, body {
			height: 100%;
			margin: 0;
		}
		#map {
			width: 600px;
			height: 400px;
		}
	</style>

	
</head>
<body>

<div id='map'></div>

<script>

	var map = L.map('map', {
		minZoom: 1,
		maxZoom: 1,
	});

	var cartodbAttribution = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>';

	var positron = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', ).addTo(map);


	map.setView([0, 0], 0);
</script>



</body>
</html>

How to center world map using leaflet

1 Answers