Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

236
Vistas
¿Cómo mostrar información emergente en la esquina superior derecha?

Pude mostrar un marcador para cada parte de la geografía para los datos de EE. UU. (Usando los datos de EE. UU. como ejemplo, ya que no puedo mostrar los resultados de los datos de trabajo) usando lo siguiente:

 import dload from shapely.geometry import shape import geopandas as gpd import pandas as pd import folium json_string = 'https://raw.githubusercontent.com/datasets/geo-admin1-us/master/data/admin1-us.geojson' j = dload.json(json_string) gdf_usa = gpd.GeoDataFrame.from_features(j["features"]) gdf_usa.head() gdf_usa_new = gpd.GeoDataFrame(gdf_usa, crs="EPSG:4326", geometry='geometry') usa_map = gdf_usa_new.explore(tiles='CartoDB positron') usa_map gdf_usa_new["long"] = gdf_usa_new.to_crs(epsg='4326').centroid.map(lambda p: px) gdf_usa_new["lat"] = gdf_usa_new.to_crs(epsg='4326').centroid.map(lambda p: py) for i in range(0,len(gdf_usa_new)): folium.Marker( location=[gdf_usa_new.iloc[i]['lat'], gdf_usa_new.iloc[i]['long']], popup=gdf_usa_new.iloc[i]['name'], icon=folium.DivIcon(html=f"""<div style="font-family: courier new; color: white">{gdf_usa_new.iloc[i]['name']}</div>""") ).add_to(usa_map) usa_map

Como se puede ver en el mapa a continuación, la ventana emergente aparece justo donde paso el mouse:

ingrese la descripción de la imagen aquí

¿Cómo puedo modificar el código para que cuando pase el cursor sobre el área deseada, la información se muestre en la esquina superior derecha como se muestra a continuación?

ingrese la descripción de la imagen aquí

Captura de pantalla anterior tomada de:

https://leafletjs.com/examples/coropletas/

Entonces, agregué el código a continuación. Sin embargo, no proporciona la actualización deseada.

 my_js = ''' var info = L.control({position: 'topright'}); info.onAdd = function (usa_map) { this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info" this.update(); return this._div; }; // method that we will use to update the control based on feature properties passed info.update = function (props) { this._div.innerHTML = '<h4>US Population Density</h4>' + (gdf_usa_new ? '<b>' + gdf_usa_new + '</b><br />' : 'Hover over a state'); };''' usa_map.get_root().script.add_child(Element(my_js))

¡Gracias!

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Resuelto. Siga el enlace ( https://leafletjs.com/examples/choropleth/ ). Copie a continuación en el código html (arrastre el html al Bloc de notas++). Actualice "mapa" a "mapa_...", simplemente busque "mapa_" en el archivo de texto que se abrió.

 var info = L.control(); info.onAdd = function (map) { this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info" this.update(); return this._div; }; // method that we will use to update the control based on feature properties passed info.update = function (props) { this._div.innerHTML = '<h4>US Population Density</h4>' + (props ? '<b>' + props.name + '</b><br />' + props.density + ' people / mi<sup>2</sup>' : 'Hover over a state'); }; info.addTo(map);

A continuación, busque "resaltar" en el archivo txt de su html. Agregue debajo a la derecha debajo de la función resaltador (característica) o como se llame en su archivo:

 info.update(layer.feature.properties);

Guarde el bloc de notas ++, abra su archivo html, ¡y debería funcionar!

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda