El manejo y uso de las capas em el mapa es muy importante para la coherencia de tu codigo.
codigo de App.js
import './App.css';
import MapView from './componentes/MapView';
function App() {
return (
<div>
<MapView/>
</div>
);
}
export default App;
Codigo de MapView.js
import React,{useState} from 'react';
import { MapContainer, TileLayer, LayersControl, WMSTileLayer } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';
import { arrayGeoserverOverlay } from './geoserverOverlay';
import {Legend} from './leyenda';
const MapView = () => {
const [isActive, setIsActive] = useState(false);
const [object, setObject] = useState(null);
const handleLayerAdd = (iteration) => {
setIsActive(true) // indica si la capa esta visible en el mapa
setObject(iteration) // es para saber que capa esta visible en el mapa
}
const handleLayerRemove = (iteration) => {
setIsActive(false) // ya no esta visible la capa en el mapa
setObject(iteration) // es para saber que capa no esta visible en el mapa
}
return (
<MapContainer center={[19.4326, -99.1332]} zoom={6} style={{ height: '100vh', width: '100%' }}>
<TileLayer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
/>
<LayersControl position="topright">
{arrayGeoserverOverlay?.map((iteration, index) => (
<LayersControl.Overlay
name={iteration?.name}
key={iteration?.key}
>
<WMSTileLayer
key={`layerOver-${+index}`}
layers={iteration?.layers}
url={iteration?.url}
transparent={iteration?.transparent}
format={iteration?.format}
opacity={iteration?.opacity}
checked={iteration?.checked}
maxZoom={iteration?.maxZoom}
minZoom={iteration?.minZoom}
eventHandlers={{
add: () => handleLayerAdd(iteration),
remove: () =>
handleLayerRemove(iteration),
}}
></WMSTileLayer>
</LayersControl.Overlay>
))}
<Legend activa={isActive} objeto={object} />
</LayersControl>
</MapContainer>
);
};
export default MapView;
Codigo leyenda.js
import React from 'react'
export const Legend = ({ activa, objeto }) => {
if (activa){console.log("entra a leyenda",objeto.legends);}
return (
<>
{activa &&
<div id='etiqueta' style={{ position: 'absolute', bottom: '3px', left: '3px', zIndex: 1000, backgroundColor: 'white', padding: '3px', borderRadius: '1px' }}>
<img
src={objeto.legends}
alt={objeto.name}
/>
</div>
}
</>
)
}
Codigo de geoserverOverlay.js
const ResourceNasa = 'https://gibs.earthdata.nasa.gov/wms/epsg4326/best/wms.cgi';
const Resourcelegends ='https://gitc.earthdata.nasa.gov/legends';
const ZoomMaximo=20;
const ZoomMinimo=1;
const Opacity=0.5;
const Transparent=true;
const Format='image/png';
const Checked=false;
export const arrayGeoserverOverlay = [
{
/* BRIGHTNESS TEMPERATURE */
name: 'TEMPERATURA VIIRS NOAA20',
key: 'TEMPERATURA NOCHE',
layers: 'VIIRS_NOAA20_Brightness_Temp_BandI5_Night',
url: ResourceNasa,
transparent: Transparent,
opacity:Opacity,
format: Format,
checked:Checked,
maxZoom: ZoomMaximo,
minZoom: ZoomMinimo,
legends:`${Resourcelegends}/VIIRS_Brightness_Temp_BandI5_H.png`,
},
{
/* BRIGHTNESS TEMPERATURE */
name: 'TEMPERATURA VIIRS SNPP',
key: 'TEMPERATURA NOCHE SNPP',
layers: 'VIIRS_SNPP_Brightness_Temp_BandI5_Night',
url: ResourceNasa,
transparent: Transparent,
opacity:Opacity,
format: Format,
checked:Checked,
maxZoom: ZoomMaximo,
minZoom: ZoomMinimo,
legends:`${Resourcelegends}/VIIRS_Brightness_Temp_BandI5_H.png`,
},
{
/* LAND SURFACE TEMPERATURE */
name: 'TEMPERATURA DE LA SUPERFICIE DEL TERRESTRE NOCHE',
key: 'TEMPERATURA DE LA SUPERFICIE DEL TERRESTRE NOCHE',
layers: 'MODIS_Terra_L3_Land_Surface_Temp_Monthly_Night',
url: ResourceNasa,
transparent: Transparent,
opacity:Opacity,
format: Format,
checked:Checked,
maxZoom: ZoomMaximo,
minZoom: ZoomMinimo,
legends:`${Resourcelegends}/MODIS_Land_Surface_Temp_H.png`,
},
{
/* LAND SURFACE TEMPERATURE */
name: 'TEMPERATURA DE LA SUPERFICIE DEL TERRESTRE DIA',
key: 'TEMPERATURA DE LA SUPERFICIE DEL TERRESTRE DIA',
layers: 'MODIS_Terra_L3_Land_Surface_Temp_Monthly_Day',
url: ResourceNasa,
transparent: Transparent,
opacity:Opacity,
format: Format,
checked:Checked,
maxZoom: ZoomMaximo,
minZoom: ZoomMinimo,
legends:`${Resourcelegends}/MODIS_Land_Surface_Temp_H.png`,
},
{
/* CIRRUS REFLECTANCE */
name: 'CIRRUS SNPP',
key: 'CIRRUS SNPP',
layers: 'VIIRS_SNPP_Apparent_Reflectance_VNP02MOD_M09',
url: ResourceNasa,
transparent: Transparent,
opacity:Opacity,
format: Format,
checked:Checked,
maxZoom: ZoomMaximo,
minZoom: ZoomMinimo,
legends:`${Resourcelegends}/VIIRS_Apparent_Reflectance_H.png`,
},
{
/* CLEAR SKY CONFIDENCE */
name: 'CILEO LIMPIO VIIRS SNPP',
key: 'CILEO LIMPIO VIIRS SNPP',
layers: 'VIIRS_SNPP_Clear_Sky_Confidence_Night',
url: ResourceNasa,
transparent: Transparent,
opacity:Opacity,
format: Format,
checked:Checked,
maxZoom: ZoomMaximo,
minZoom: ZoomMinimo,
legends:`${Resourcelegends}/VIIRS_Clear_Sky_Confidence_H.png`,
},
{
/* CLEAR SKY CONFIDENCE */
name: 'CILEO LIMPIO VIIRS NOAA20',
key: 'CILEO LIMPIO VIIRS NOAA20',
layers: 'VIIRS_NOAA20_Clear_Sky_Confidence_Night',
url: ResourceNasa,
transparent: Transparent,
opacity:Opacity,
format: Format,
checked:Checked,
maxZoom: ZoomMaximo,
minZoom: ZoomMinimo,
legends:`${Resourcelegends}/VIIRS_Clear_Sky_Confidence_H.png`,
},
{
/* CLOUD EFFECTIVE RADIUS */
name: 'NUBE RADIO EFECTIVO VIIRS SNNP',
key: 'NUBE RADIO EFECTIVO VIIRS SNNP',
layers: 'VIIRS_SNPP_Cloud_Effective_Radius',
url: ResourceNasa,
transparent: Transparent,
opacity:Opacity,
format: Format,
checked:Checked,
maxZoom: ZoomMaximo,
minZoom: ZoomMinimo,
legends:`${Resourcelegends}/MODIS_VIIRS_Cloud_Effective_Radius_H.png`,
},
{
name: 'NUBE RADIO EFECTIVO VIIRS NOAA20',
key: 'NUBE RADIO EFECTIVO VIIRS NOAA20',
layers: 'VIIRS_NOAA20_Cloud_Effective_Radius',
url: ResourceNasa,
transparent: Transparent,
opacity:Opacity,
format: Format,
checked:Checked,
maxZoom: ZoomMaximo,
minZoom: ZoomMinimo,
legends:`${Resourcelegends}/MODIS_VIIRS_Cloud_Effective_Radius_H.png`,
},
{
/* CLOUD OPTICAL THICKNESS */
name: 'ESPESOR ÓPTICO DE LA NUBE VIIRS SNPP',
key: 'ESPESOR ÓPTICO DE LA NUBE VIIRS SNPP',
layers: 'VIIRS_SNPP_Cloud_Optical_Thickness',
url: ResourceNasa,
transparent: Transparent,
opacity:Opacity,
format: Format,
checked:Checked,
maxZoom: ZoomMaximo,
minZoom: ZoomMinimo,
legends:`${Resourcelegends}/MODIS_VIIRS_Cloud_Optical_Thickness_H.png`,
},
{
/* CLOUD OPTICAL THICKNESS */
name: 'ESPESOR ÓPTICO DE LA NUBE VIIRS NOAA20',
key: 'ESPESOR ÓPTICO DE LA NUBE VIIRS NOAA20',
layers: 'VIIRS_NOAA20_Cloud_Optical_Thickness',
url: ResourceNasa,
transparent: Transparent,
opacity:Opacity,
format: Format,
checked:Checked,
maxZoom: ZoomMaximo,
minZoom: ZoomMinimo,
legends:`${Resourcelegends}/MODIS_VIIRS_Cloud_Optical_Thickness_H.png`,
},
{
/* DUST */
name: 'POLVO MENSUAL',
key: 'POLVO MENSUAL',
layers: 'MERRA2_Total_Dust_Deposition_Dry_Wet_Monthly',
url: ResourceNasa,
transparent: Transparent,
opacity:Opacity,
format: Format,
checked:Checked,
maxZoom: ZoomMaximo,
minZoom: ZoomMinimo,
legends:`${Resourcelegends}/MERRA2_Total_Dust_Deposition_Dry_Wet_Monthly_H.png`,
},
{
/* EVAPORATION */
name: 'EVAPORACION',
key: 'EVAPORACION',
layers: 'MERRA2_Evaporation_Land_Monthly',
url: ResourceNasa,
transparent: Transparent,
opacity:Opacity,
format: Format,
checked:Checked,
maxZoom: ZoomMaximo,
minZoom: ZoomMinimo,
legends:`${Resourcelegends}/MERRA2_Evaporation_Land_Monthly_H.png`,
},
{
/* GEOSTATIONARY */
name: 'GEOSTACIONARIA ESTE LIMPIO INFRARROJO',
key: 'GEOSTACIONARIA ESTE LIMPIO INFRARROJO',
layers: 'GOES-East_ABI_Band13_Clean_Infrared',
url: ResourceNasa,
transparent: Transparent,
opacity:Opacity,
format: Format,
checked:Checked,
maxZoom: ZoomMaximo,
minZoom: ZoomMinimo,
legends:`${Resourcelegends}/Clean_Longwave_Infrared_Window_Band_H.png`,
},
{
/* GEOSTATIONARY */
name: 'GEOSTACIONARIA ESTE COLOR',
key: 'GEOSTACIONARIA ESTE COLOR',
layers: 'GOES-East_ABI_GeoColor',
url: ResourceNasa,
transparent: Transparent,
opacity:1,
format: Format,
checked:Checked,
maxZoom: ZoomMaximo,
minZoom: ZoomMinimo,
legends:'',
},
{
/* GEOSTATIONARY */
name: 'GEOSTACIONARIA OESTE LIMPIO INFRARROJO',
key: 'GEOSTACIONARIA OESTE LIMPIO INFRARROJO',
layers: 'GOES-West_ABI_Band13_Clean_Infrared',
url: ResourceNasa,
transparent: Transparent,
opacity:Opacity,
format: Format,
checked:Checked,
maxZoom: ZoomMaximo,
minZoom: ZoomMinimo,
legends:`${Resourcelegends}/Clean_Longwave_Infrared_Window_Band_H.png`,
},
{
/* GEOSTATIONARY */
name: 'GEOSTACIONARIA OESTE COLOR',
key: 'GEOSTACIONARIA OESTE COLOR',
layers: 'GOES-West_ABI_GeoColor',
url: ResourceNasa,
transparent: Transparent,
opacity:Opacity,
format: Format,
checked:Checked,
maxZoom: ZoomMaximo,
minZoom: ZoomMinimo,
legends:'',
},
{
/*IMPERVIOUS SURFACE*/
name: 'SUPERFICIE IMPERMEABLE',
key: 'SUPERFICIE IMPERMEABLE',
layers: 'Landsat_Global_Man-made_Impervious_Surface',
url: ResourceNasa,
transparent: Transparent,
opacity:Opacity,
format: Format,
checked:Checked,
maxZoom: ZoomMaximo,
minZoom: ZoomMinimo,
legends:`${Resourcelegends}/Landsat_Global_Man-made_Impervious_Surface_H.png`,
},
{
/* PRESIPITATION RATE */
name: 'PRESIPITACIÓN',
key: 'PRESIPITACIÓN',
layers: 'IMERG_Precipitation_Rate',
url: ResourceNasa,
transparent: Transparent,
opacity:Opacity,
format: Format,
checked:Checked,
maxZoom: ZoomMaximo,
minZoom: ZoomMinimo,
legends:`${Resourcelegends}/GPM_Precipitation_Rate_H.png`,
},
{
/* RELATIVE HUMIDITY */
name: 'HUMEDAD RELATIVA DIA',
key: 'HUMEDAD RELATIVA DIA',
layers: 'AIRS_L3_Surface_Relative_Humidity_Monthly_Day',
url: ResourceNasa,
transparent: Transparent,
opacity:Opacity,
format: Format,
checked:Checked,
maxZoom: ZoomMaximo,
minZoom: ZoomMinimo,
legends:`${Resourcelegends}/AIRS_Surface_Relative_Humidity_Monthly_Day_H.png`,
},
{
/* RELATIVE HUMIDITY */
name: 'HUMEDAD RELATIVA NOCHE',
key: 'HUMEDAD RELATIVA NOCHE',
layers: 'AIRS_L3_Surface_Relative_Humidity_Monthly_Night',
url: ResourceNasa,
transparent: Transparent,
opacity:Opacity,
format: Format,
checked:Checked,
maxZoom: ZoomMaximo,
minZoom: ZoomMinimo,
legends:`${Resourcelegends}/AIRS_Surface_Relative_Humidity_Monthly_Night_H.png`,
},
{
/* WIND SPEED */
name: 'VIENTO',
key: 'VIENTO',
layers: 'MERRA2_Surface_Wind_Speed_Monthly',
url: ResourceNasa,
transparent: Transparent,
opacity:Opacity,
format: Format,
checked:Checked,
maxZoom: ZoomMaximo,
minZoom: ZoomMinimo,
legends:`${Resourcelegends}/MERRA2_Surface_Wind_Speed_Monthly_H.png`,
},
]
Otra forma de usar las capas base
import React, { useState } from 'react';
import { MapContainer, TileLayer, LayersControl } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';
const { BaseLayer, Overlay } = LayersControl;
const MapView = () => {
return (
<MapContainer center={[19.4326, -99.1332]} zoom={6} style={{ height: '100vh', width: '100%' }}>
<TileLayer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
/>
<LayersControl position="topright">
<BaseLayer name="Telcel 5G ">
<TileLayer
url="https://lbsva.telcel.com/tiles/gwc/service/wmts?layer=telcel:cdmx_no_garantizada&style=&tilematrixset=EPSG:900913&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/png&TileMatrix=EPSG:900913:{z}&TileCol={x}&TileRow={y}"
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
opacity={1}
/>
</BaseLayer>
<BaseLayer name="Telcel 5G garantizada">
<TileLayer
url="https://lbsva.telcel.com/tiles/gwc/service/wmts?layer=telcel:cdmx_garantizada&style=&tilematrixset=EPSG:900913&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/png&TileMatrix=EPSG:900913:{z}&TileCol={x}&TileRow={y}"
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
opacity={1}
/>
</BaseLayer>
<BaseLayer name="Telcel 4G">
<TileLayer
url="https://lbsva.telcel.com/tiles/gwc/service/wmts?layer=telcel:lte_no_garantizada&style=&tilematrixset=EPSG:900913&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/png&TileMatrix=EPSG:900913:{z}&TileCol={x}&TileRow={y}"
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
opacity={1}
/>
</BaseLayer>
<BaseLayer name="Telcel 4G garantizada">
<TileLayer
url="https://lbsva.telcel.com/tiles/gwc/service/wmts?layer=telcel:lte_garantizada&style=&tilematrixset=EPSG:900913&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/png&TileMatrix=EPSG:900913:{z}&TileCol={x}&TileRow={y}"
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
opacity={1}
/>
</BaseLayer>
</LayersControl>
</MapContainer>
);
};
export default MapView;
o con un archivo como el ejemplo anterior
const ZoomMaximo=18;
const ZoomMinimo=4;
export const arrayGeoserverBaseLayers = [
{
name:'Transporte thunderforest (*20)',
key: 'Atlas_móvil',
url: 'https://{s}.tile.thunderforest.com/mobile-atlas/{z}/{x}/{y}{r}.png?apikey=7c352c8ff1244dd8b732e349e0b0fe8d',
checked:false,
maxZoom: 20,
minZoom: ZoomMinimo,
},
{
name:'Topografia thunderforest (*20)',
key: 'Topografia',
url: 'https://{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}{r}.png?apikey=7c352c8ff1244dd8b732e349e0b0fe8d',
checked:false,
maxZoom: 20,
minZoom: ZoomMinimo,
},
{
name:'Topografia ESRI (*15)',
key: 'topografia_esri',
url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}',
checked:false,
maxZoom: 15,
minZoom: ZoomMinimo,
},
{
name:'Topografia OpenTopoMap (*15)',
key: 'topografia_OpenTopoMap',
url: 'https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png',
checked:false,
maxZoom: 15,
minZoom: ZoomMinimo,
},
{
name:'Topografia openstreetmap (*15)',
key: 'topografia_openstreetmap',
url: 'https://{s}.tile-cyclosm.openstreetmap.fr/cyclosm/{z}/{x}/{y}.png',
checked:false,
maxZoom: 15,
minZoom: ZoomMinimo,
},
{
name:'Topografia Here Wego Terrain (*20)',
key: 'Here_Wego_Terrain',
url: 'https://1.aerial.maps.ls.hereapi.com/maptile/2.1/maptile/newest/terrain.day/{z}/{x}/{y}/256/png8?app_id=eAdkWGYRoc4RfxVo0Z4B&app_code=TrLJuXVK62IQk0vuXFzaig&lg=eng',
checked:false,
maxZoom: 20,
minZoom: ZoomMinimo,
},
{
name:'Negro (*20)',
key: 'Negro',
url: 'http://a.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
checked:false,
maxZoom:20,
minZoom: ZoomMinimo,
},
{
name:'Blanco fastly (*20)',
key: 'Blanco_fastly',
url: 'https://cartodb-basemaps-a.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png',
checked:true,
maxZoom: 20,
minZoom: ZoomMinimo,
},
{
name:'Google Satelite (*20)',
key: 'Google_Satellite',
url: 'http://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}',
checked:false,
maxZoom: 20,
minZoom: ZoomMinimo,
},
{
name:'ESRI Satelite (*18)',
key: 'ESRI_satellite',
url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
checked:false,
maxZoom: ZoomMaximo,
minZoom: ZoomMinimo,
},
{
name:'Mapbox Satellite (*20)',
key: 'Mapbox_Satellite',
url: 'https://api.mapbox.com/v4/mapbox.satellite/{z}/{x}/{y}.webp?sku=101S0AiAdllT3&access_token=pk.eyJ1Ijoiam9uY2hlbWxhIiwiYSI6IjdXUzRocmsifQ.acEmRifqE4Bh2Xz-IY_4Bw',
checked:false,
maxZoom: 20,
minZoom: ZoomMinimo,
},
{
name:'Here Wego Satellite (*20)',
key: 'Here_Wego_Satellite',
url: 'https://2.aerial.maps.ls.hereapi.com/maptile/2.1/maptile/newest/satellite.day/{z}/{x}/{y}/256/png8?app_id=eAdkWGYRoc4RfxVo0Z4B&app_code=TrLJuXVK62IQk0vuXFzaig&lg=eng',
checked:false,
maxZoom: 20,
minZoom: ZoomMinimo,
},
{
name:'Calle GoogleMap (*20)',
key: 'GoogleMap',
url: 'https://mt1.google.com/vt/lyrs=m&x={x}&y={y}&z={z}',
checked:false,
maxZoom: 20,
minZoom: ZoomMinimo,
},
{
name:'Calle OpenStreetMap (*19)',
key: 'OpenStreetMap',
url: 'http://a.tile.openstreetmap.org/{z}/{x}/{y}.png',
checked:false,
maxZoom: 19,
minZoom: ZoomMinimo,
},
{
name:'Calle OpenStreetMap DE (*20)',
key: 'OpenStreetMapDE',
url: 'https://tile.openstreetmap.de/{z}/{x}/{y}.png',
checked:false,
maxZoom: 20,
minZoom: ZoomMinimo,
},
{
name:'Calle Waze World (*20)',
key: 'waze_world',
url: 'https://worldtiles3.waze.com/tiles/{z}/{x}/{y}.png',
checked:false,
maxZoom: 20,
minZoom: ZoomMinimo,
},
{
name:'Calle Thunderforest (*20)',
key: 'Transporte',
url: 'https://{s}.tile.thunderforest.com/transport/{z}/{x}/{y}{r}.png?apikey=7c352c8ff1244dd8b732e349e0b0fe8d',
checked:false,
maxZoom: 20,
minZoom: ZoomMinimo,
},
{
name:'Calle Thunderforest Atlas (*20)',
key: 'Calle_Thunderforest_Atlas',
url: 'https://{s}.tile.thunderforest.com/atlas/{z}/{x}/{y}{r}.png?apikey=6a53e8b25d114a5e9216df5bf9b5e9c8',
checked:false,
maxZoom: 20,
minZoom: ZoomMinimo,
},
{
name:'Google Traffic (*18)',
key: 'Google_Traffic',
url: 'https://mt1.google.com/vt?lyrs=h@159000000,traffic|seconds_into_week:-1&style=3&x={x}&y={y}&z={z}',
checked:false,
maxZoom: ZoomMaximo,
minZoom: ZoomMinimo,
},
/* {
name:'Calle memomaps',
key: 'memomaps',
url: 'https://tileserver.memomaps.de/tilegen/{z}/{x}/{y}.png',
checked:false,
}, */
]