天道酬勤,学无止境

Overlaying a text box on a leaflet.js map

This might seem a very simple question, but I've searched elsewhere for the answer with no luck!

How do I overlay a simple text box on to a Leaflet map that loads when the map loads (not fixed to any point on a map) - for example, to give a title and more information within the actual map object. Nothing fancy.

评论

I know this is old, but here's some sample code, CSS as necessary:

L.Control.textbox = L.Control.extend({
		onAdd: function(map) {
			
		var text = L.DomUtil.create('div');
		text.id = "info_text";
		text.innerHTML = "<strong>text here</strong>"
		return text;
		},

		onRemove: function(map) {
			// Nothing to do here
		}
	});
	L.control.textbox = function(opts) { return new L.Control.textbox(opts);}
	L.control.textbox({ position: 'bottomleft' }).addTo(map);

You have two simple options, extend a new L.Control and place it in one of the four corners of the map window with content created inside the onAdd method, or place a L.DivIcon anywhere on the map alongside a L.Marker, by either geographical coordinates or coordinates based upon the dimensions of the container.Making it "box" like would just include a small bit of CSS as you see fit, like some padding,background-color, etc.

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • Overlaying circles on leaflet with d3 results in not positioned properly
    I want to overlay a leaflet map with circles through d3. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>D3 Test</title> <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"> <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script> <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> </head> <body> <div id="map" style="width:600px; height:600px;"> <script> var map = new L.Map("map", { center: [37.8, -96.9], zoom: 4 }) .addLayer(new L.TileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png")); var
  • 如何在传单地图上添加搜索框(How to add a search box on a leaflet map)
    问题 我想使用传单地图作为页面的背景。 而且这个页面有搜索功能,但是这个搜索框不是用来搜索这个地图的。 所以我的问题是如何在传单地图上添加搜索框? 您有其他解决方案可以使用地图作为背景吗? 喜欢这个页面:http://directory.spatineo.com/ 回答1 有许多解决方案可用于向传单地图添加搜索控件。 其中一些列在“搜索和弹出窗口”下的“传单插件”页面上。 搜索控件需要一些数据来进行搜索,因此您应该可以访问地图上的一些数据。 您可以在地图上托管数据或连接到某些远程数据源。 搜索本地级别的位置: 如果您的搜索条件是检索您在地图上托管的数据,那么我推荐由 Stefano Cudini 维护的 Leaflet Search 插件 请参阅此链接上的工作示例。 阅读更多信息:https://gis.stackexchange.com/questions/130623/adding-a-search-box-to-a-leaflet-js-example 搜索全球级别的位置: 如果您希望搜索条件搜索世界各地的随机地点(即数据库不在您的应用程序中),请使用 ESRI Leaflet 项目等公司提供的自定义解决方案。 请参阅此代码笔页面的工作示例:“带有地点搜索的传单地图”。 <!DOCTYPE html> <html> <head> <title>LeafletJS with
  • 如何使用 QWebEngineView 打开下载文件对话框?(How to open download file dialog with QWebEngineView?)
    问题 我正在构建一个 pyqt5 桌面界面,我在其中使用 QWebEngineView 显示一个 html 文件,其中显示了一个 Leaflet 地图。 这工作正常。 下一步是导出用户添加到地图的所有要素。 当我点击地图上的“导出功能”时,什么也没有发生,但是当我在我的 Chromium 网络浏览器上打开相同的 html 文件时,“导出功能”打开了下载对话框。 PyQt5 脚本: self.MainWindow.webMapViewer = QtWebEngineWidgets.QWebEngineView() self.MainWindow.webPageLayout.addWidget(self.MainWindow.webMapViewer) self.html_path = os.path.split(os.path.abspath(__file__))[0] + r'/html/test.html' self.MainWindow.webMapViewer.load(QtCore.QUrl().fromLocalFile(self.html_path)) HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name='viewport' content='width
  • Leaflet JS (react-leaflet) - 用透明颜色填充的边界框(Leaflet JS (react-leaflet) - Bounds Box Filled With Transparent Color)
    问题 我正在使用 react-leaflet 包,但是,如果您可以在简单的传单中回答这个问题,那也会有所帮助。 我成功地平移到我提供的多边形的边界,如下所示: <Map center={position} zoom={13} bounds={this.state.bounds} className="campaignimagery-map"> <TileLayer url="http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" attribution="" /> 但是,我希望整个多边形边界框为某种透明颜色,以便他们可以准确地看到边界框在地图上的位置。 这可能吗? 回答1 简答 使用边界绘制一个像这样的彩色矩形L.rectangle(bounds, {color: "#ff7800", weight: 1}).addTo(map); . 有关更多信息,请参阅相关文档。 解释 我认为不可能按原样为边界着色,但您可以使用边界来绘制多边形。 然后多边形本身可以根据需要进行着色和管理。
  • How to open download file dialog with QWebEngineView?
    I'm building a pyqt5 desktop interface where I'm using QWebEngineView to show a html file where I show a Leaflet map. This is working fine. The next step is to export all features the user added to the map. When I click on "Export Features" on the map nothing happen, but when I open the same html file on my Chromium web browser, the "Export feature" opens the download dialog fine. PyQt5 script: self.MainWindow.webMapViewer = QtWebEngineWidgets.QWebEngineView() self.MainWindow.webPageLayout.addWidget(self.MainWindow.webMapViewer) self.html_path = os.path.split(os.path.abspath(__file__))[0] + r'
  • Leaflet JS (react-leaflet) - Bounds Box Filled With Transparent Color
    I'm working with react-leaflet package, however, if you can answer the question in plain leaflet that would be helpful as well. I am successfully panning to the bounds of a polygon that I supply like so: <Map center={position} zoom={13} bounds={this.state.bounds} className="campaignimagery-map"> <TileLayer url="http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" attribution="" /> However, I would like the entire polygon boundary box to be some transparent color so they can see exactly where the boundary box lies on the map. Is this possible?
  • Leaflet JS - 实现手势处理以强制执行 2 指滚动(Leaflet JS - Implementing Gesture Handling to enforce 2 fingered scrolling)
    问题 当您使用移动设备并向下滚动带有谷歌地图的网页时,您就知道了。 地图变暗并告诉您“用两个手指移动地图”。 我想在我的传单地图中完全实现这一点。 Leaflet 目前不提供这种开箱即用的功能。 Google 将此功能称为手势处理。 如果您将其设置为“合作”,您将获得我刚刚描述的效果。 https://developers.google.com/maps/documentation/javascript/interaction 检测正在使用的手指数量并显示消息非常容易,如我的代码示例所示。 (您需要在移动设备或模拟器上运行它才能看到它的效果) 如果是 1 根手指,我将取消 touchmove 事件并显示我的警告。 否则我允许事件应用于地图。 但是我需要想办法在我在地图上取消它之后将一个手指触摸事件应用到包含页面。 以便用户滚动页面。 有没有人有任何好主意如何实现这一目标? 我想过使用 dispatchEvent 将接收到的 touchmove 事件对象直接中继到父文档。 例如:document.dispatchEvent(touchmoveevent); 但没有运气。 也许有更好的整体方法。 var myMap = L.map('mapid').setView([51.505, -0.09], 13); L.tileLayer('https://{s}.tile
  • Leaflet JS - Implementing Gesture Handling to enforce 2 fingered scrolling
    You know when you're on a mobile device and you scroll down a web page which has a google map. The map goes dark and tells you "Use two fingers to move the map". I want to implement exactly this in my Leaflet map. Leaflet doesn't currently offer this kind of functionality out the box. Google refers to this functionality as Gesture Handling. If you set it to "Cooperative" you get the effect I just described. https://developers.google.com/maps/documentation/javascript/interaction It's easy enough to detect the number of fingers being used and display the message as shown in my code example. (You
  • React-Leaflet 搜索框实现(React-Leaflet Search Box Implementation)
    问题 是否有任何资源显示带有 react-leaflet 的搜索框实现? 我想让我的地图引脚填充搜索结果,以查询和检索我的现有数据。 IE: const names = [ {name: 'Joe', location: '40.734621, -73.989341 '}, {name: 'Seth', location: '45.77621, -73.789654 '}, ] 然后,在搜索 Joe 或 Seth 之后,地图将填充位置坐标。 我找到了 Leaflet.js 的例子,但找不到任何用 react-leaflet 旋转的例子。 回答1 看一下传单地理搜索 使用npm install --save leaflet-geosearch安装它 然后你只需要用它构建一个组件: import { GeoSearchControl, OpenStreetMapProvider } from 'leaflet-geosearch'; class Search extends MapControl { createLeafletElement() { return GeoSearchControl({ provider: new OpenStreetMapProvider(), style: 'bar', showMarker: true, showPopup: false
  • 在 R 传单地图上叠加图像(Overlay image on R leaflet map)
    问题 我有一个 .PNG 图像,它从根本上表示是光栅,但不是光栅格式。 这些是提供给我的,否则我会自己将它们生成为栅格并避免这个问题。 我想将图像叠加在 R 中的传单底图上。图像叠加只会为用户提供一个参考,以在区域周围绘制边界框,并查询数据库以获取在该区域生成栅格的原始数据。 在 Python 的传单实现中,图像覆盖可以通过这种方式实现 center = [0,0] zoom = 2 m = Map(center=center, zoom=zoom) layer = ImageOverlay(url="filename.png", bounds=(( min_lat, min_lon), (max_lat, max_lon))) m.add_layer(layer) return m 到目前为止,它看起来像是在 R 中执行此操作,我需要一个栅格对象,然后使用addRasterImage() ,它似乎将栅格转换为 RGB 图像,然后将其覆盖在传单地图上。 我最初有一个图像,只想将其添加为图层而不是需要光栅格式。 谢谢你。 回答1 如果您需要附加图像并且之后不更改它(bbox 或源),那么您应该能够使用 htmlwidgets 访问本机 Leaflet.js: htmlwidget::onRender 函数可用于使用本机 Javascript 将自定义行为添加到传单地图。
  • 内网离线地图
    1.第一种瓦片数据源 MapDownloader: 链接:https://pan.baidu.com/s/1Hz__HcA5QhtGmjLNezC_pQ 提取码:6lek GISMysqlToLocalFile: 链接:https://pan.baidu.com/s/1rzVsj_DJxKr6OyvRwve4dg 提取码:pp6f 自测可以使用 教程来自:https://www.cnblogs.com/kanyun/p/8571711.html 使用 Leaflet 加载地图瓦片: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>web 版离线地图测试页面</title> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" /> </head> <body> <div id="map" style="width:90%;height:600px;margin-top:30px;text-align:center;margin:0 auto;"> </div> <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"><
  • 使用 Leaflet.js 和 OSM 时仅显示美国(Show only United States when using Leaflet.js and OSM)
    问题 我正在使用leaflet.js 和OSM 图块来创建地图,但我只希望可以看到美国大陆,而不是整个世界。 那可能吗? 我正在像这样加载地图: var map = L.map('map').setView([39.82, -98.58], 5); L.tileLayer('http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png', { attribution: '...', maxZoom: 18 }).addTo(map); 回答1 这是可能的,而且很容易做到。 首先,您需要美国大陆边界框(最外边缘)的坐标。 你可以用谷歌搜索它们,我在这里找到它们:http://isithackday.com/geoplanet-explorer/index.php?woeid=24865672 你需要西南和东北坐标来创建一个边界对象: var maxBounds = L.latLngBounds( L.latLng(5.499550, -167.276413), //Southwest L.latLng(83.162102, -52.233040) //Northeast ); 或者你可以使用速记版本,一个嵌套数组: var maxBounds = [ [5.499550, -167.276413], //Southwest [83
  • 简单的 Leaflet.js 标记放置(Simple Leaflet.js Marker Placement)
    问题 我正在使用开源 Leaflet.js 库来创建一个简单的地图。 不过,我正在尝试解决一个特定的问题。 标记绑定到地图上的特定纬度/经度,这是有道理的,但我需要能够使标记与另一个标记具有固定的偏移位置,而不会绑定到纬度/经度中心。 例如,地图可能如下所示: 但是当你缩小时,它看起来像这样: 我真正想要的是右侧标记与左侧标记之间的固定偏移量,而不是绑定到 latlng,如下所示: 我试过用 unproject 做实验,但我相信我在如何处理这个问题上走上了错误的道路。 我正在做的事情非常规,但如果有人对我如何做到这一点有任何见解,将不胜感激。 回答1 除了用于计算第二个标记位置的project()和unproject()方法之外,您还可以侦听地图上的缩放事件并更新第二个标记的位置,以保持所需的像素距离。 看看下面的例子。 var marker; var pos = L.latLng(28.478226,-16.313488); var mymap = L.map('mapid').setView(pos, 13); L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk
  • Leaflet JS + Leaflet.Deflate - 将默认标记图标更改为自定义图标(Leaflet JS + Leaflet.Deflate - Changing default marker icon to custom icon)
    问题 在我之前的帖子“Leaflet JS - 在特定缩放级别将 esri 形状更改为标记”中,我能够解决我在使用 Leaflet JS 库时遇到的问题,并在达到某个缩放级别时将多边形形状更改为标记图标。 'Ivan Sanchez' 建议我使用 'Leaflet.Deflate' 插件,这就像一个魅力,所以现在各种形状在某个缩放级别后被转换为标记,但是现在我正在努力更改默认传单标记图标到自定义标记图标,所以我现在的问题是: 是否可以在使用“Leaflet.ShapeFile”和“Leaflet.Deflate”插件时将默认标记图标更改为自定义标记图标,最好的方法是什么? 我想制作一个 JSFiddle,但我没有 JSFiddle 允许我附加包含 shapefile 的 zip 文件,所以我将在这里发布到目前为止我得到的代码,感谢您的帮助、建议和支持: <!doctype html> <html lang="en"> <head> <meta charset='utf-8' /> <title>v4</title> <link rel="stylesheet" type="text/css" href="lib/leaflet/leaflet.css" /> <!--[if lte IE 8]> <link rel="stylesheet" href="http://cdn
  • Leaflet : remove layer if zoom level greater than 9
    I built a heatmap on Leaflet. My first goal is to see the heatmap when you open the map. The second goal is not to view the heatmap if the zoom level is greater than 9. I tried this : if (map.getZoom() >9 { map.removeLayer (heatmapLayer); }; But it did not work. Would you have any suggestions ? Thanks ! Here is the code : <!DOCTYPE html> <html lang="en"> <head> <title>Application - version 1.0</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content=""> <link rel="stylesheet" href="http://cdn.leafletjs.com
  • Leaflet.js常见问题
    Leaflet官方API:https://leafletjs.com/reference-1.3.2.html#map-example 1、Leaflet使用自定义底图 npm install leaflet.chinatmsproviders或者引入静态js包:leaflet.ChineseTmsProviders.js在代码中使用: var map = L.map('map', { center: [31.59, 120.29], zoom: 12 }); L.tileLayer.chinaProvider('TianDiTu.Normal.Map',{maxZoom:18,minZoom:5}).addTo(map); L.tileLayer.chinaProvider('TianDiTu.Normal.Annotion',{maxZoom:18,minZoom:5}).addTo(map); 支持多种底图 插件下载地址:https://github.com/htoooth/Leaflet.ChineseTmsProviders 2、Leaflet标记Marker旋转 npm install leaflet-rotatedmarker或者引入静态js包:leaflet.rotatedMarker.js在代码中使用: L.marker([48.8631169, 2
  • 传单:如果缩放级别大于 9,则删除图层(Leaflet : remove layer if zoom level greater than 9)
    问题 我在 Leaflet 上建立了一个热图。 我的第一个目标是在打开地图时看到热图。 第二个目标是如果缩放级别大于 9,则不查看热图。 我试过这个: if (map.getZoom() >9 { map.removeLayer (heatmapLayer); }; 但它没有用。 你有什么建议吗? 谢谢 ! 这是代码: <!DOCTYPE html> <html lang="en"> <head> <title>Application - version 1.0</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content=""> <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.3/leaflet.css" /> <link rel="stylesheet" href="style_p.css" /> <style type="text/css"> html, body, #map { margin: 0; margin-top: 0%; width: 100%; height
  • Leaflet JS + Leaflet.Deflate - Changing default marker icon to custom icon
    In my previous post 'Leaflet JS - changing esri shape into marker on certain zoom level ' I was able to resolve an issue which i had with the leaflet JS library and changing the polygon shapes to markers icons when hitting a certain zoom level. I was advised by 'Ivan Sanchez' to use the 'Leaflet.Deflate' plugin and this works like a charm, so now the various shapes are being transformed into markers after a certain zoomlevel, however now I'm struggling to change the default leaflet marker icon to a custom marker icon, so my question now is: Is it possible to change the default marker icon to a
  • R在传单中使用热图(R using Heatmaps in Leaflet)
    问题 我有一个运行 Shiny 的 Linux 机器我正在尝试根据此处和此处的演示来运行传单的代码,这些演示看起来很棒 我的代码在下面,取自 rpubs 页面 library(leaflet) library(leaflet.extras) leaflet(quakes) %>% addProviderTiles(providers$CartoDB.DarkMatter) %>% addWebGLHeatmap(lng=~long, lat=~lat, intensity = ~mag, size=60000) 我已经安装了/home/shiny/nodejs/Leaflet.heat-gh-pages 当我运行上面的代码时,我得到了地图。 我的数据很好,因为我可以绘制标记,但是当我添加addWebGLHeatmap部分时似乎没有任何addWebGLHeatmap 。 我是JS的完全新手,但是否需要进行任何其他设置才能使其运行? 回答1 似乎我必须先注册插件才能使其按照此处的 github 页面工作 library(leaflet) library(htmltools) library(htmlwidgets) library(dplyr) heatPlugin <- htmlDependency("Leaflet.heat", "99.99.99", src = c(href =
  • 当中心状态改变时,React 传单中心属性不会改变(React leaflet center attribute does not change when the center state changes)
    问题 应用程序.js import { useState } from 'react'; const App = () => { // This state is used to the center attribute of MapContainer component const [mapCenter, setMapCenter] = useState([34.80746, -40.4796]); // This state is used to the zoom attribute of MapContainer component const [mapZoom, setMapZoom] = useState(3); const onClickHandler = () => { setMapCenter([20, 100]); setMapZoom(5); }; return ( <> <button onClick={onClickHandler}>Change map's center location</button> <Map center={mapCenter} zoom={mapZoom} /> </> ); }; 地图.js import React from 'react'; import './Map.css'; import { MapContainer