Aquí iré volcando algunos ejemplos molones que se pueden conseguir con Leaflet JS.

1. Encabezado bloqueado del mundo en escala de grises.

Características:

  • Mapa de ESRI-OSM gratuito en escala de grises.
  • Nivel de zoom a escala global: L.map zoom level definido en 0.
  • Deshabilitados controles de usuario, creando una vista bloqueada.
  • Altura fija definida en el estilo del elemento.
  • Texto de atribuciones personalizado y con hipervínculo.

El código fuente detallado a continuación:

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
  integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
  crossorigin=""/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
  integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
  crossorigin=""></script>

</head>

<style>

</style>

<body>
	<div id="mapid2" style="height:100px;"></div> <! fixed height set as a style property >
</body>

<script>

//leaflet map object
var map = L.map('mapid2',{
	zoomControl:false,//disabling interaction
	dragging:false,//disabling interaction
	maxZoom:0,//disabling interaction
	minZoom:0,//disabling interaction
	doubleClickZoom:false,//disabling interaction
}).setView([20, -40], 0);//initial zoom level to 0

//tiled basemap object
var googleMaps = L.tileLayer("https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Dark_Gray_Base/MapServer/tile/{z}/{y}/{x}", {
	attribution: 'Sample <b>worldwide locked demo</b> by <a href="https://theroamingworkshop.cloud">The Roaming Workshop</a>. Uses ESRI tiles.',
}).addTo(map); //custom attribution text with hyperlink

</script>
</html>

2. Identificador de paises interactivo con ESRI+National Geographic.


Características:

El código fuente detallado a continuación:

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
  integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
  crossorigin=""/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
  integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
  crossorigin=""></script>

<!-- Load Esri Leaflet from CDN -->
<script src="https://unpkg.com/esri-leaflet/dist/esri-leaflet.js"></script>
<script src="https://theroamingworkshop.cloud/b/wp-content/uploads/2021/08/countries.txt"></script>

<!-- Load Lealeft Control Custom by yigityuce -->
<script src="https://theroamingworkshop.cloud/b/wp-content/uploads/2021/08/Leaflet-Control-Custom.txt"></script>

<!-- FONT AWESOME CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

</head>

<style>

</style>

<body>
	<div id="mapid3" style="height:600px;"></div> <! fixed size set as a style property >
</body>

<script>

//leaflet map object
var map = L.map('mapid3',{
	zoomControl:false,
	maxBounds:[[-90,-180],[90,180]],
});
map.setView([30, 0], 3);

//Define ESRI maps
var natgeomap = L.esri.basemapLayer("NationalGeographic");
var graymap = L.esri.basemapLayer("Terrain");

//Add unlabeled layer to map
graymap.addTo(map);


//Set map style
var layerstyle = {
	weight: 0.5,
	color: "grey",
	dashArray: "5",
	fillOpacity: 0,
	};


function mouseOver(feature, layer, e){
	layer.on({
		mouseover: highlight,
		mouseout: restore,
		click: focus,
	});
} 

function highlight(e){
	var layer = e.target;

	layer.setStyle({
	color:"red",
	weight: 2,
	});

	coords=layer.getBounds().getCenter();
	country=e.target.feature.properties.name;
	
	//fix known issues with browsers
    	
	if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
		layer.bringToFront();
    	}
}

function restore(e){
	var layer = e.target;

	layer.setStyle(layerstyle);
	
	//fix known issues with browsers
    	
	if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
		layer.bringToFront();
    	}
}

//instantiate label object
var label;

function focus(e){
	label = L.tooltip().setContent(country+" !!").setLatLng(coords);
	label.addTo(map);
	map.fitBounds(e.target.getBounds());
//	graymap.remove;
	map.removeLayer(graymap);
	natgeomap.addTo(map);
}

//Add home (reset) button

L.control.custom({
	position: 'topleft',
	content: '<button type="button" class="btn btn-default">'+
		'	<i class="fa fa-home"></i>'+
		'</button>',
	style:{
		
		},
	events:{
		click: function(){
			map.setView([30, 0], 3);
			map.removeLayer(natgeomap);
			graymap.addTo(map);
			map.removeLayer(label);
			}
		},
	}).addTo(map);

L.control.zoom().addTo(map);

//Add geoJson layer
L.geoJson(countries, {
	style: layerstyle,
	onEachFeature: mouseOver,
	}).addTo(map);

</script>
</html>