Fix #59 : add support for overlays in permalink control + update perm…

…alink example / thx @buche
shramov · Dec 3, 2015 · e02ce62 · e02ce62
1 parent d62dc29
commit e02ce62
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 2 deletions.
diff --git a/control/Permalink.Overlay.js b/control/Permalink.Overlay.js
@@ -0,0 +1,67 @@
+//#include "Permalink.js
+
+L.Control.Permalink.include({
+
+	initialize_overlay: function() {
+		this.on('update', this._set_overlays, this);
+		this.on('add', this._onadd_overlay, this);
+	},
+
+	_onadd_overlay: function(e) {
+		this._map.on('overlayadd', this._update_overlay, this);
+		this._map.on('overlayremove', this._update_overlay, this);
+		this._update_overlay();
+	},
+
+	_update_overlay: function() {
+		if (!this.options.layers) return;
+		var overlayflags = this.options.layers.overlayFlags();
+		if (overlayflags && overlayflags !== '') {
+			this._update({overlays: overlayflags});
+		}
+	},
+
+	_set_overlays: function(e) {
+		var p = e.params;
+		if (!this.options.layers || !p.overlays) return;
+		this.options.layers.setOverlays(p.overlays);
+	}
+});
+
+L.Control.Layers.include({
+	setOverlays: function(overlayflags) {
+		var layer, obj, idx=0;
+		for (var i in this._layers) {
+			if (!this._layers.hasOwnProperty(i)) continue;
+			obj = this._layers[i];
+			if (obj.overlay) {
+				// visible if not specified or flag==T
+				var visible = (idx >= overlayflags.length || overlayflags[idx] === 'T');
+				idx++;
+				if (!visible && this._map.hasLayer(obj.layer)) {
+					this._map.removeLayer(obj.layer);
+				} else if (visible && !this._map.hasLayer(obj.layer)) {
+					this._map.addLayer(obj.layer);
+				}
+			}
+		}
+	},
+
+	overlayFlags: function() {
+		var flags = '';
+		for (var i in this._layers) {
+			if (!this._layers.hasOwnProperty(i))
+				continue;
+			var obj = this._layers[i];
+			if (!obj.overlay) continue;
+			if (obj.overlay) {
+				if (this._map.hasLayer(obj.layer)) {
+					flags += 'T';
+				} else {
+					flags += 'F';
+				}
+			}
+		}
+		return flags;
+	}
+});
diff --git a/examples/permalink.html b/examples/permalink.html
@@ -6,17 +6,23 @@
 	<script src="../control/Permalink.js"></script>
 	<script src="../control/Permalink.Marker.js"></script>
 	<script src="../control/Permalink.Layer.js"></script>
+	<script src="../control/Permalink.Overlay.js"></script>
 </head>
 <body>
 	<div style="width:100%; height:100%" id="map"></div>
 <script type='text/javascript'>
-var map = new L.Map('map', {center: new L.LatLng(67.6755, 33.936), zoom: 10});
+var map = new L.Map('map', {center: new L.LatLng(47.93, -3.44), zoom: 7});
 var osm = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
+var pressure = L.tileLayer('http://{s}.tile.openweathermap.org/map/pressure_cntr/{z}/{x}/{y}.png', {
+	maxZoom: 19,
+	attribution: 'Map data &copy; <a href="http://openweathermap.org">OpenWeatherMap</a>',
+	opacity: 0.5
+});
 map.addLayer(osm);
 var hydda = L.tileLayer('http://{s}.tile.openstreetmap.se/hydda/full/{z}/{x}/{y}.png', {
 	attribution: 'Tiles courtesy of <a href="http://openstreetmap.se/" target="_blank">OpenStreetMap Sweden</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
 });
-var layers = new L.Control.Layers({'OSM':osm, "Hydda":hydda});
+var layers = new L.Control.Layers({'OSM':osm, "Hydda":hydda},{'Pressure':pressure});
 map.addControl(layers);
 map.addControl(new L.Control.Permalink({text: 'Permalink', layers: layers}));
 </script>