archive-gh-me/Leaflet
1
0
Fork 0
mirror of https://github.com/Leaflet/Leaflet.git synced 2026-02-01 17:27:23 +00:00
Code Issues Projects Releases Wiki Activity

added LayerGroup and FeatureGroup layers

Browse Source
This commit is contained in:
Mourner 2011-06-10 12:38:24 +03:00
parent 9514712bb6
commit 43b3bdc143
4 changed files with 151 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
debug/geojson/group.html Normal file
View File

@ -0,0 +1,56 @@
<!DOCTYPE html>
<html>
<head>
<title>Leaflet debug page</title>
<link rel="stylesheet" href="../../dist/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="../../dist/leaflet.ie.css" /><![endif]-->
<link rel="stylesheet" href="../css/screen.css" />
<script src="../leaflet-include.js"></script>
</head>
<body>
<div id="map" style="width: 600px; height: 600px; border: 1px solid #ccc"></div>
<button id="populate">Populate with 10 markers</button>
<script type="text/javascript">
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
cloudmadeAttribution = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution}),
latlng = new L.LatLng(50.5, 30.51);
var map = new L.Map('map', {center: latlng, zoom: 15, layers: [cloudmade]});
var markers = new L.FeatureGroup();
function populate() {
var bounds = map.getBounds(),
southWest = bounds.getSouthWest(),
northEast = bounds.getNorthEast(),
lngSpan = northEast.lng - southWest.lng,
latSpan = northEast.lat - southWest.lat;
for (var i = 0; i < 10; i++) {
var latlng = new L.LatLng(
southWest.lat + latSpan * Math.random(),
southWest.lng + lngSpan * Math.random());
markers.addLayer(new L.Marker(latlng));
}
return false;
};
populate();
L.DomUtil.get('populate').onclick = populate;
markers.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>");
map.addLayer(markers);
</script>
</body>
</html>

3
debug/leaflet-include.js
View File

@ -36,6 +36,9 @@
'geo/crs/CRS.EPSG4326.js',
'geo/crs/CRS.EPSG3395.js',
'layer/LayerGroup.js',
'layer/FeatureGroup.js',
'layer/tile/TileLayer.js',
'layer/tile/TileLayer.WMS.js',
'layer/tile/TileLayer.Canvas.js',

34
src/layer/FeatureGroup.js Normal file
View File

@ -0,0 +1,34 @@
/*
* L.FeatureGroup extends L.LayerGroup by introducing mouse events and bindPopup method shared between a group of layers.
*/
L.FeatureGroup = L.LayerGroup.extend({
includes: L.Mixin.Events,
addLayer: function(layer) {
this._initEvents(layer);
L.LayerGroup.prototype.addLayer.call(this, layer);
},
bindPopup: function(content) {
for (var i in this._layers) {
if (this._layers.hasOwnProperty(i) && this._layers[i].bindPopup) {
this._layers[i].bindPopup(content);
}
}
},
_events: ['click', 'dblclick', 'mouseover', 'mouseout'],
_initEvents: function(layer) {
for (var i = 0, len = this._events.length; i < len; i++) {
layer.on(this._events[i], this._propagateEvent, this);
}
},
_propagateEvent: function(e) {
e.layer = e.target;
e.target = this;
this.fire(e.type, e);
}
});

58
src/layer/LayerGroup.js Normal file
View File

@ -0,0 +1,58 @@
/*
* L.LayerGroup is a class to combine several layers so you can manipulate the group (e.g. add/remove it) as one layer.
*/
L.LayerGroup = L.Class.extend({
initialize: function(layers) {
this._layers = {};
if (layers) {
for (var i = 0, len = layers.length; i < len; i++) {
this.addLayer(layers[i]);
}
}
},
addLayer: function(layer) {
var id = L.Util.stamp(layer);
this._layers[id] = layer;
if (this._map) {
this._map.addLayer(layer);
}
return this;
},
removeLayer: function(layer) {
var id = L.Util.stamp(layer);
delete this._layers[id];
if (this._map) {
this._map.removeLayer(layer);
}
return this;
},
clearLayers: function() {
this._iterateLayers(this.removeLayer, this);
return this;
},
onAdd: function(map) {
this._map = map;
this._iterateLayers(map.addLayer, map);
},
onRemove: function(map) {
this._iterateLayers(map.removeLayer, map);
delete this._map;
},
_iterateLayers: function(method, context) {
for (var i in this._layers) {
if (this._layers.hasOwnProperty(i)) {
method.call(context, this._layers[i]);
}
}
}
});