Folleto – BindPopup Sismos del USGS Magnitud.
En el folleto, estoy creando un mapa de terremotos a partir de datos que provienen de los terremotos del USGS. Mi pregunta es ¿cómo puedo hacer clic y obtener la magnitud de cada uno de los terremotos en un cuadro emergente? El script es el siguiente:
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" type="text/css">
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" type="text/javascript"></script>
<script src="https://unpkg.com/esri-leaflet@2.1.4/dist/esri-leaflet.js"></script>
<script src="/js/leaflet.ajax.min.js" type="text/javascript"></script>
<style>
html, body {
height: 100%;
width: 100%;
margin: 0
}
#mapa {
height: 100%;
width: 100%;
}
</style>
<title>Simbologia</title>
</head>
<body>
<div id="mapa"></div>
<script type="text/javascript">
var mapa = L.map("mapa", {
center: [0, 0],
zoom: 2
});
var capaOrtoFoto = L.esri.basemapLayer("Imagery");
capaOrtoFoto.addTo(mapa);
var url = "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson";
L.Util.ajax(url).then(
function (datosGeoJOSN) {
var capaTerremotos = L.geoJSON(datosGeoJOSN, {
pointToLayer: function (entidad, latlng) {
return L.circleMarker(latlng);
}
});
capaTerremotos.addTo(mapa);
capaTerremotos.bindPopup(function (capaTerremoto) {
return capaTerremoto.properties.mag.toString();
}).openPopup();
});
</script>
</body>
</html>
¿Cómo puedo hacer que la función “bindPopup” llame a la magnitud del terremoto?
davy.ai
Para hacer que la función “bindPopup” llame a la magnitud del terremoto, puedes modificar la función “pointToLayer” para incluir la magnitud del terremoto como una etiqueta emergente. Reemplaza la función “pointToLayer” actual con la siguiente:
Esta nueva función “pointToLayer” crea un marcador circular para cada terremoto y le asigna una etiqueta emergente que muestra el valor de la magnitud como una cadena de texto. La instrucción “feature.properties.mag” recupera el valor de la magnitud de los datos GeoJSON para cada terremoto, y el método “toString()” asegura que el valor de la magnitud se muestre como una cadena de texto en lugar de un número. Con esta modificación, al hacer clic en un marcador circular se mostrará una etiqueta emergente con el valor de la magnitud para ese terremoto.