Add content and latlng set able while initializing

Leaflet · mourner · Aug 28, 2022 · Nov 14, 2021 · Dec 11, 2021 · Apr 21, 2022
commit 409c35aee933f6038870e0c20ead05e79bc895dc
diff --git a/spec/suites/layer/PopupSpec.js b/spec/suites/layer/PopupSpec.js
@@ -347,6 +347,26 @@ describe('Popup', function () {
 			});
 		});
 	});
+
+	it("opens popup with passed latlng position while initializing", function () {
+		var popup = new L.Popup(center)
+			.openOn(map);
+		expect(map.hasLayer(popup)).to.be(true);
+	});
+
+	it("opens popup with passed latlng and options position while initializing", function () {
+		var popup = new L.Popup(center, {className: 'testClass'})
+			.addTo(map);
+		expect(map.hasLayer(popup)).to.be(true);
+		expect(L.DomUtil.hasClass(popup.getElement(), 'testClass')).to.be(true);
+	});
+
+	it("adds popup with passed content in options while initializing", function () {
+		var popup = new L.Popup(center, {content: 'Test'})
+			.addTo(map);
+		expect(map.hasLayer(popup)).to.be(true);
+		expect(popup.getContent()).to.be('Test');
+	});
 });
 
 describe("L.Map#openPopup", function () {

diff --git a/spec/suites/layer/TooltipSpec.js b/spec/suites/layer/TooltipSpec.js
@@ -303,4 +303,24 @@ describe('Tooltip', function () {
 		layer.bindTooltip('Tooltip', {interactive: true});
 		layer.closeTooltip();
 	});
+
+	it("opens tooltip with passed latlng position while initializing", function () {
+		var tooltip = new L.Tooltip(center)
+			.addTo(map);
+		expect(map.hasLayer(tooltip)).to.be(true);
+	});
+
+	it("opens tooltip with passed latlng and options position while initializing", function () {
+		var tooltip = new L.Tooltip(center, {className: 'testClass'})
+			.addTo(map);
+		expect(map.hasLayer(tooltip)).to.be(true);
+		expect(L.DomUtil.hasClass(tooltip.getElement(), 'testClass')).to.be(true);
+	});
+
+	it("adds tooltip with passed content in options while initializing", function () {
+		var tooltip = new L.Tooltip(center, {content: 'Test'})
+			.addTo(map);
+		expect(map.hasLayer(tooltip)).to.be(true);
+		expect(tooltip.getContent()).to.be('Test');
+	});
 });
diff --git a/src/layer/DivOverlay.js b/src/layer/DivOverlay.js
@@ -29,13 +29,25 @@ export var DivOverlay = Layer.extend({
 
 		// @option pane: String = 'popupPane'
 		// `Map pane` where the popup will be added.
-		pane: 'popupPane'
+		pane: 'popupPane',
+
+		// @option content: String|HTMLElement|Function = ''
+		// Sets the HTML content of the overlay while initializing. If a function is passed the source layer will be
+		// passed to the function. The function should return a `String` or `HTMLElement` to be used in the overlay.
+		content: ''
 	},
 
 	initialize: function (options, source) {
-		Util.setOptions(this, options);
-
-		this._source = source;
+		if (options && (options instanceof L.LatLng || Util.isArray(options))) {
+			this._latlng = toLatLng(options);
+			Util.setOptions(this, source);
+		} else {
+			Util.setOptions(this, options);
+			this._source = source;
+		}
+		if (this.options.content) {
+			this._content = this.options.content;
+		}
 	},
 
 	onAdd: function (map) {

diff --git a/src/layer/Popup.js b/src/layer/Popup.js
@@ -23,14 +23,20 @@ import {Path} from './vector/Path';
  * marker.bindPopup(popupContent).openPopup();
  * ```
  * Path overlays like polylines also have a `bindPopup` method.
- * Here's a more complicated way to open a popup on a map:
+ *
+ * A popup can be also standalone:
  *
  * ```js
  * var popup = L.popup()
  * 	.setLatLng(latlng)
  * 	.setContent('<p>Hello world!<br />This is a nice popup.</p>')
  * 	.openOn(map);
  * ```
+ * or
+ * ```js
+ * var popup = L.popup(latlng, {content: '<p>Hello world!<br />This is a nice popup.</p>')
+ * 	.openOn(map);
+ * ```
  */
 
 
@@ -287,6 +293,9 @@ export var Popup = DivOverlay.extend({
 // @namespace Popup
 // @factory L.popup(options?: Popup options, source?: Layer)
 // Instantiates a `Popup` object given an optional `options` object that describes its appearance and location and an optional `source` object that is used to tag the popup with a reference to the Layer to which it refers.
+// @alternative
+// @factory L.popup(latlng: LatLng, options?: Popup options)
+// Instantiates a `Popup` object given `latlng` where the popup will open and an optional `options` object that describes its appearance and location.
 export var popup = function (options, source) {
 	return new Popup(options, source);
 };

diff --git a/src/layer/Tooltip.js b/src/layer/Tooltip.js
@@ -12,10 +12,28 @@ import * as DomUtil from '../dom/DomUtil';
  * Used to display small texts on top of map layers.
  *
  * @example
+ * If you want to just bind a tooltip to marker:
  *
  * ```js
  * marker.bindTooltip("my tooltip text").openTooltip();
  * ```
+ * Path overlays like polylines also have a `bindTooltip` method.
+ *
+ * A tooltip can be also standalone:
+ *
+ * ```js
+ * var tooltip = L.tooltip()
+ * 	.setLatLng(latlng)
+ * 	.setContent('Hello world!<br />This is a nice tooltip.')
+ * 	.addTo(map);
+ * ```
+ * or
+ * ```js
+ * var tooltip = L.tooltip(latlng, {content: 'Hello world!<br />This is a nice tooltip.'})
+ * 	.addTo(map);
+ * ```
+ *
+ *
  * Note about tooltip offset. Leaflet takes two options in consideration
  * for computing tooltip offsetting:
  * - the `offset` Tooltip option: it defaults to [0, 0], and it's specific to one tooltip.
@@ -216,7 +234,10 @@ export var Tooltip = DivOverlay.extend({
 
 // @namespace Tooltip
 // @factory L.tooltip(options?: Tooltip options, source?: Layer)
-// Instantiates a Tooltip object given an optional `options` object that describes its appearance and location and an optional `source` object that is used to tag the tooltip with a reference to the Layer to which it refers.
+// Instantiates a `Tooltip` object given an optional `options` object that describes its appearance and location and an optional `source` object that is used to tag the tooltip with a reference to the Layer to which it refers.
+// @alternative
+// @factory L.tooltip(latlng: LatLng, options?: Tooltip options)
+// Instantiates a `Tooltip` object given `latlng` where the tooltip will open and an optional `options` object that describes its appearance and location.
 export var tooltip = function (options, source) {
 	return new Tooltip(options, source);
 };