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:
- Mapa educativo de ESRI y National Geographic, incluído en la librería de ESRI para Leaflet.
- Capa vectorial de países ultraligera y superpuesta en formato GeoJSON, cortesía de world.geo.json
- Selección de países y etiquetado interactivos, siguiendo el tutorial de Leaflet.
- Botón personalizado de reinicio usando el plugin Leaflet.Control.Custom de yigityuce.
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>
