cartodb/Leaflet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

popup improvements for FeatureGroup

Browse Source
This commit is contained in:
Patrick Arlt 2014-12-29 12:14:33 -08:00
parent dfbd0fa309
commit ff470d5861
5 changed files with 147 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
debug/map/popup.html Normal file
View File

@ -0,0 +1,101 @@
<!DOCTYPE html>
<html>
<head>
<title>Leaflet debug page</title>
<link rel="stylesheet" href="../../dist/leaflet.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/screen.css" />
<script type="text/javascript" src="../../build/deps.js"></script>
<script src="../leaflet-include.js"></script>
</head>
<body>
<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</button>
<button id="change">Change content</button>
<script type="text/javascript">
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});
var map = L.map('map')
.setView([50.5, 30.51], 15)
.addLayer(osm);
var features = new L.FeatureGroup();
for (var i = 0; i < 100; i++) {
var marker = L.marker(getRandomLatLng(map)).addTo(features);
}
var line = L.polyline([
getRandomLatLng(map),
getRandomLatLng(map),
getRandomLatLng(map)
]).addTo(features);
var poly = L.polygon([
getRandomLatLng(map),
getRandomLatLng(map),
getRandomLatLng(map),
getRandomLatLng(map)
]).addTo(features);
// features.bindPopup("<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p><p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque.</p>").addTo(map);
features.bindPopup(function(layer){
return layer._leaflet_id + '';
}).addTo(map);
function logEvent(e) { console.log(e.type); }
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(features.getLayerId(marker));
};
L.DomUtil.get('openLine').onclick = function(){
features.openPopup(features.getLayerId(line));
};
L.DomUtil.get('openPoly').onclick = function(){
features.openPopup(features.getLayerId(poly));
};
L.DomUtil.get('close').onclick = function(){
features.closePopup();
};
L.DomUtil.get('toggle').onclick = function(){
features.togglePopup();
};
// map.on('click', logEvent);
// map.on('movestart', logEvent);
// map.on('move', logEvent);
// map.on('moveend', logEvent);
// map.on('zoomstart', logEvent);
// map.on('zoomend', logEvent);
</script>
</body>
</html>

43
src/layer/FeatureGroup.js
View File

@ -14,10 +14,6 @@ L.FeatureGroup = L.LayerGroup.extend({
L.LayerGroup.prototype.addLayer.call(this, layer); L.LayerGroup.prototype.addLayer.call(this, layer);
if (this._popupContent && layer.bindPopup) {
layer.bindPopup(this._popupContent, this._popupOptions);
}
return this.fire('layeradd', {layer: layer}); return this.fire('layeradd', {layer: layer});
}, },
@ -33,24 +29,37 @@ L.FeatureGroup = L.LayerGroup.extend({
L.LayerGroup.prototype.removeLayer.call(this, layer); L.LayerGroup.prototype.removeLayer.call(this, layer);
if (this._popupContent) {
this.invoke('unbindPopup');
}
return this.fire('layerremove', {layer: layer}); return this.fire('layerremove', {layer: layer});
}, },
bindPopup: function (content, options) { openPopup: function (layerid) {
this._popupContent = content; if(layerid){
this._popupOptions = options; layer = this.getLayer(layerid);
return this.invoke('bindPopup', content, options); } else {
// open popup on the first layer
for (var id in this._layers) {
layer = this._layers[id];
break;
}
}
if (this._popup && this._map) {
this._popup.options.offset = this._popupAnchor(layer);
this._popup._source = layer;
this._popup.update();
this._map.openPopup(this._popup, layer._latlng || layer.getCenter());
}
return this;
}, },
openPopup: function (latlng) { togglePopup: function(layerid){
// open popup on the first layer if (this._popup) {
for (var id in this._layers) { if (this._popup._map) {
this._layers[id].openPopup(latlng); this.closePopup();
break; } else {
this.openPopup(layerid);
}
} }
return this; return this;
}, },

15
src/layer/Layer.Popup.js
View File

@ -43,7 +43,8 @@ L.Layer.include({
openPopup: function (latlng) { openPopup: function (latlng) {
if (this._popup && this._map) { if (this._popup && this._map) {
this._map.openPopup(this._popup, latlng || this._latlng || this.getCenter()); this._popup.options.offset = this._popupAnchor(this);
this._map.openPopup(this._popup, latlng || this._latlng || this.getCenter());
} }
return this; return this;
}, },
@ -78,10 +79,20 @@ L.Layer.include({
}, },
_openPopup: function (e) { _openPopup: function (e) {
this._popup.options.offset = this._popupAnchor(e.layer);
if(typeof this._popup._content === 'function') {
this._popup._source = e.layer;
this._popup.update();
}
this._map.openPopup(this._popup, e.latlng); this._map.openPopup(this._popup, e.latlng);
}, },
_popupAnchor: function(layer){
var anchor = layer._getPopupAnchor ? layer._getPopupAnchor() : [0,0];
return L.point(anchor).add(L.Popup.prototype.options.offset);
},
_movePopup: function (e) { _movePopup: function (e) {
this._popup.setLatLng(e.latlng); this._popup.setLatLng(e.latlng);
} }
}); });

7
src/layer/Popup.js
View File

@ -132,7 +132,7 @@ L.Popup = L.Layer.extend({
} }
return events; return events;
}, },
isOpen: function () { isOpen: function () {
return !!this._map && this._map.hasLayer(this); return !!this._map && this._map.hasLayer(this);
}, },
@ -173,8 +173,9 @@ L.Popup = L.Layer.extend({
if (!this._content) { return; } if (!this._content) { return; }
var node = this._contentNode; var node = this._contentNode;
if (typeof this._content === 'function') {
if (typeof this._content === 'string') { node.innerHTML = this._content(this._source || this);
} else if (typeof this._content === 'string') {
node.innerHTML = this._content; node.innerHTML = this._content;
} else { } else {
while (node.hasChildNodes()) { while (node.hasChildNodes()) {

13
src/layer/marker/Marker.Popup.js
View File

@ -3,14 +3,7 @@
*/ */
L.Marker.include({ L.Marker.include({
bindPopup: function (content, options) { _getPopupAnchor: function(){
var anchor = L.point(this.options.icon.options.popupAnchor || [0, 0]) return this.options.icon.options.popupAnchor || [0, 0];
.add(L.Popup.prototype.options.offset); }
options = L.extend({offset: anchor}, options);
return L.Layer.prototype.bindPopup.call(this, content, options);
},
_openPopup: L.Layer.prototype.togglePopup
}); });