首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何用folium在html上添加图例?

在html上添加图例可以通过使用Folium库来实现。Folium是一个基于Python的数据可视化库,它可以将地理数据可视化为交互式地图。

要在html上添加图例,首先需要在Python代码中创建一个Folium地图对象。然后,可以通过添加Folium图层并设置其样式来实现图例的添加。

下面是一个示例代码,演示如何使用Folium在html上添加图例:

代码语言:txt
复制
import folium

# 创建地图对象
m = folium.Map(location=[38.907,-77.037], zoom_start=12)

# 创建图例对象
legend_html = '''
     <div style="position: fixed; 
                 bottom: 50px; left: 50px; width: 100px; height: 90px; 
                 border:2px solid grey; z-index:9999; font-size:14px;
                 ">&nbsp; Legend <br>
       &nbsp; Marker 1 &nbsp; <i class="fa fa-map-marker fa-2x"
                     style="color:green"></i><br>
       &nbsp; Marker 2 &nbsp; <i class="fa fa-map-marker fa-2x"
                     style="color:red"></i>
      </div>
     '''

# 添加图例到地图
folium.Marker(
    location=[38.907,-77.037],
    popup='Marker 1',
    icon=folium.Icon(icon='green')
).add_to(m)

folium.Marker(
    location=[38.917,-77.047],
    popup='Marker 2',
    icon=folium.Icon(icon='red')
).add_to(m)

# 保存地图为html文件
m.get_root().html.add_child(folium.Element(legend_html))
m.save('map.html')

在上述代码中,首先创建了一个地图对象m,并设置了地图的中心点和缩放级别。然后创建了一个图例对象legend_html,其中定义了图例的样式和内容。接下来,通过调用folium.Marker方法添加了两个标记点,并设置了不同的图标和弹出框内容。最后,通过m.get_root().html.add_child方法将图例添加到地图上,并保存为html文件。

这样,生成的html文件中就包含了地图以及添加的图例。您可以通过浏览器打开html文件,即可看到地图和图例的效果。

请注意,以上代码中的图例样式和内容仅供参考,您可以根据自己的需求进行修改和扩展。另外,需要确保在运行代码时,已经安装了Folium库和所需的依赖项。

推荐的腾讯云相关产品和产品介绍链接地址:无

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Python地理可视化入门【使用Folium地图上展示数据】

然后,我们使用folium.Marker地图上添加了一个标记点,并指定了该标记点的弹出窗口内容。最后,我们将地图保存为HTML文件。...地图上绘制形状除了添加标记点和展示数据,Folium还支持地图上绘制各种形状,多边形、圆形等。...添加图例地图中添加图例可以帮助观众更好地理解地图上展示的数据或形状的含义。...自定义图层样式:除了默认的地图样式外,Folium还支持添加自定义的图层样式,OpenStreetMap、CartoDB Positron和CartoDB Dark Matter等,以满足不同的需求。...添加图例图例可以帮助观众更好地理解地图上展示的数据或形状的含义。Folium提供了简单的方法来添加图例,使得地图更具可读性和可理解性。

46510

(数据科学学习手札130)利用geopandas快捷绘制在线地图

}/{y}.png的自定义地图服务,注意,当自定义tiles时,必须设置attr参数 attr:str型,用于设置底图对应的attribution信息 highlight:bool型,用于设置是否鼠标悬浮于矢量时展示高亮效果...型,当marker_type='marker'时,用于自定义点图标,详细用法参考:https://python-visualization.github.io/folium/modules.html#folium.map.Icon.../modules.html#folium.features.GeoJsonTooltip popup_kwds:dict型,用于自定义设置popup样式,详细参考:https://python-visualization.github.io.../folium/modules.html#folium.features.GeoJsonPopup legend_kwds:dict型,用于自定义设置图例,主要的参数有: caption:str型...文件: m.save('demo.html')   浏览器中查看已保存的html文件: ----

1.6K20
  • geopandas轻松绘制交互式在线地图

    {x}/{y}.png的自定义地图服务,注意,当自定义tiles时,必须设置attr参数 attr:str型,用于设置底图对应的attribution信息 highlight:bool型,用于设置是否鼠标悬浮于矢量时展示高亮效果...型,当marker_type='marker'时,用于自定义点图标,详细用法参考:https://python-visualization.github.io/folium/modules.html#folium.map.Icon.../modules.html#folium.features.GeoJsonTooltip popup_kwds:dict型,用于自定义设置popup样式,详细参考:https://python-visualization.github.io.../folium/modules.html#folium.features.GeoJsonPopup legend_kwds:dict型,用于自定义设置图例,主要的参数有: caption:str型,自定义图例标题...文件: m.save('demo.html') 浏览器中查看已保存的html文件:

    1.8K41

    最近给公司撸了一个可视化大屏。

    但是,通过folium模块,我了解到生成的地图是可以生成图片或者 html文件 的,而我也了解到帆软是有网页框插件可以内置html文件的,这也为后来的效果埋下了伏笔。...想了解folium包可以去folium官网:http://python-visualization.github.io/folium/ 观看文档来具体了解详情。...showlegend=False是不需要显示图例,因为帆软网页框中展示图例,地图会被图例占据50%的版本 fig.update_layout 参数center是用来显示地图的中心位置,比如上图以印度洋的某点为中心...,而实际,bug仍然没有显现。...在上述网页框 位置,输入以下html路径 http://localhost:8075/webroot/your_file_name.html 我们发现帆软report已经可以读到你的html文件了,文章一开始的动图

    2K40

    介绍如何用 Python 来绘制高清的交互式地图,建议收藏

    地图上标注出重要的建筑物 01 安装模块 pip install folium 02 画一张最简单的地图 我们先来绘制一张简单的地图,以上海为例,上海的经纬度(31.2304, 121.4737)为例...,当然我们也可以双击地图进一步放大 当然我们也可以保存成html的格式 shanghai.save("test.html") 当然我们也可以设置地图的纹理样式,上述中的代码,地图的纹理样式默认的是“...OpenStreetMap”,在这基础之上,我们也可以将其他几种纹理样式给添加上去,“Stamen Terrain”样式、“Stamen Toner”样式以及“Mapbox Bright”样式等等,代码如下...shanghai) shanghai 出来的结果如下图所示 当然我们还可以地图上画圈圈,例如圈出上海市中心相对繁华的地方, shanghai = folium.Map(location=[...31.2297, 121.4762], radius = 900, color = "purple").add_to(shanghai)shanghai 我们也可以把圈出来的区域填充颜色

    1K21

    Python绘制地图神器folium介绍及安装使用教程

    一、folium简介和安装 folium 建立 Python 生态系统的数据应用能力和 Leaflet.js 库的映射能力之上,Python中操作数据,然后通过 folium Leaflet 地图中可视化...tuple 格式,顺序为 latitude, longitude zoom_start:缩放值,默认为 10,值越大比例尺越小,地图放大级别越大 control_scale:Bool型,控制是否地图上添加比例尺...地图上标记 普通标记 添加普通标记用 Marker,可以选择标记的图案。...='info-sign') # 标记颜色 图标 ).add_to(bj_map) bj_map.save('test_04.html') 结果如下: 圆形标记 添加圆形标记用 Circle.../quickstart.html[2] 三、实战案例 以将停车场地理位置数据可视化地图上示例,熟悉 folium 地图可视化的使用。

    7.9K40

    (数据科学学习手札41)folium基础内容介绍

    一、简介   folium是js著名的地理信息可视化库leaflet.js为Python提供的接口,通过它,我们可以通过Python端编写代码操纵数据,来调用leaflet的相关功能,基于内建的osm...而在Map对象的生成形式,可以定义所有的图层内容之后,将其保存为html文件浏览器中独立显示,也可以基于jupyter notebook一个ipynb文件内部嵌入对应的交互地图,本文即采用后者对应的方法...29.488869,106.571034], zoom_start=15, tiles='Stamen Toner') '''显示m''' m 三、图层添加各种内建的部件...15) '''为m添加标记部件,并将部件的图形设置为云朵''' folium.Marker([29.488869,106.571034], popup='Mt....Location', icon=folium.Icon(color='red', icon='info-sign') ).add_to(m) '''显示m''' m 3.2 地图上添加圆圈

    5.8K92

    8000 字 Python 数据可视化实操指南

    另外,我添加了一个分类变量(1和0)来演示带有分类变量的图表的功能。 mapa.csv文件包含按国家/地区分隔的受欢迎程度数据。最后的可视化地图时,我们会用到它。...我们将通过添加图例和标题来改进图表。...文本中,我们甚至可以按照TeX语言添加特殊字符。 我们还可以添加指向图形特定点的标记。...我们可以将它们导出到HTML文档中,并与具有Web浏览器的任何人共享。 当我们有兴趣图形中查找事物并且希望能够放大并在图形中移动时,它是一个非常有用的库。...我们可以地图上添加标记: m2 = folium.Map(location=[41.38, 2.17], tiles='openstreetmap', zoom_start=16) folium.Marker

    1.4K20
    领券