cleanup logic

debug/map/popup.html

@@ -16,14 +16,6 @@
 
   <div id="map"></div>
 
-  <button id="open">Open</button>
-  <button id="openMarker">Open Marker</button>
-  <button id="openLine">Open Line</button>
-  <button id="openPoly">Open Polygon</button>
-  <button id="close">Close</button>
-  <button id="toggle">Toggle Marker</button>
-  <button id="change">Change content</button>
-
   <script type="text/javascript">
 
     var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
@@ -34,27 +26,28 @@
         .setView([50.5, 30.51], 15)
         .addLayer(osm);
 
-    var features = new L.FeatureGroup();
+    var features = new L.FeatureGroup([
-
+      L.marker(getRandomLatLng(map)),
-    var marker = L.marker(getRandomLatLng(map)).addTo(features);
+      L.polyline([
-
-    var line = L.polyline([
         getRandomLatLng(map),
         getRandomLatLng(map),
         getRandomLatLng(map)
-      ]).addTo(features);
+      ]),
-
+      L.polygon([
-    var poly = L.polygon([
+        getRandomLatLng(map),
-      getRandomLatLng(map),
+        getRandomLatLng(map),
-      getRandomLatLng(map),
+        getRandomLatLng(map),
-      getRandomLatLng(map),
+        getRandomLatLng(map)
-      getRandomLatLng(map)
+      ])
-    ]).addTo(features);
+    ]);
 
     features.bindPopup(function(layer){
       return 'Leaflet ID is ' + layer._leaflet_id;
     }).addTo(map);
 
+    var content = L.DomUtil.create('p', 'custom-popup');
+    content.innerText = 'I\'m a red polygon';
+
     var polygon = L.polygon([
       getRandomLatLng(map),
       getRandomLatLng(map),
@@ -62,7 +55,7 @@
       getRandomLatLng(map)
     ], {
       color: 'red'
-    }).bindPopup('I\'m a red polygon').addTo(map);
+    }).bindPopup(content).addTo(map);
 
     var polyline = L.polyline([
       getRandomLatLng(map),
@@ -75,34 +68,6 @@
     var marker = L.circleMarker(getRandomLatLng(map), {
       color: 'red'
     }).bindPopup('I\'m a red circle').addTo(map);
-
-    L.DomUtil.get('change').onclick = function(){
-      features.setPopupContent('Foo');
-    };
-
-    L.DomUtil.get('open').onclick = function(){
-      features.openPopup();
-    };
-
-    L.DomUtil.get('openMarker').onclick = function(){
-      features.openPopup(marker);
-    };
-
-    L.DomUtil.get('openLine').onclick = function(){
-      features.openPopup(line);
-    };
-
-    L.DomUtil.get('openPoly').onclick = function(){
-      features.openPopup(poly);
-    };
-
-    L.DomUtil.get('close').onclick = function(){
-      features.closePopup();
-    };
-
-    L.DomUtil.get('toggle').onclick = function(){
-      features.togglePopup(marker);
-    };
   </script>
 </body>
 </html>

src/layer/Layer.Popup.js

@@ -42,35 +42,24 @@ L.Layer.include({
 	},
 
 	openPopup: function (target) {
-		var layer;
+		var layer = this;
 		var latlng;
 
-		// handles figuring out `layer` and `latlng` from `target`
-		// assumes target will be one of
-		// * undefined
-		// * Layer
-		// * [lat,lng]
-		// * LatLng
-
 		if (!target) {
 			for (var id in this._layers) {
 				layer = this._layers[id];
 				break;
 			}
-			layer = layer || this;
-			latlng = layer._latlng || layer.getCenter();
-		} else if (target instanceof L.Layer) {
-			layer = target;
-			latlng = layer._latlng || layer.getCenter();
-		} else {
-			layer = this;
-			latlng = target;
 		}
 
+		if (target instanceof L.Layer) {
+			layer = target;
+		}
+
+		latlng = layer._latlng || layer.getCenter();
+
 		if (this._popup && this._map) {
-			this._popup.options.offset = this._popupAnchor(layer); // update the popup offset based on our layer
+			this._setupPopup(layer);
-			this._popup._source = layer; // update popup source
-			this._popup.update(); // update the popup (will update content if popup uses a function)
 			this._map.openPopup(this._popup, latlng);
 		}
 
@@ -110,16 +99,20 @@ L.Layer.include({
 		if (this._popup && this._map && this._map.hasLayer(this._popup) && this._popup._source === e.layer) {
 			this.closePopup();
 		} else {
-			var popupTarget = e.layer || e.target;
+			var layer = e.layer || e.target;
-			this._popup.options.offset = this._popupAnchor(popupTarget);
+			this._setupPopup(layer);
-			this._popup._source = popupTarget;
-			if (typeof this._popup._content === 'function') {
-				this._popup.update();
-			}
 			this._map.openPopup(this._popup, e.latlng);
 		}
 	},
 
+	_setupPopup: function (layer) {
+		this._popup.options.offset = this._popupAnchor(layer);
+		if (typeof this._popup._content === 'function') {
+			this._popup._source = layer;
+			this._popup.update();
+		}
+	},
+
 	_popupAnchor: function(layer){
 		var anchor = (layer._getPopupAnchor) ? layer._getPopupAnchor() : [0,0];
 		return L.point(anchor).add(L.Popup.prototype.options.offset);