Upload files to "js"

js/Leaflet.Search.js

@@ -0,0 +1,121 @@
+/*
+ * Leaflet Geocoding plugin that look good.
+ */
+L.Control.Search = L.Control.extend({
+	options: {
+		position: 'topleft',
+		title: 'Nominatim Search',
+		email: 'thomas.brus@gmx.at'
+	},
+
+	onAdd: function( map ) {
+		this._map = map;
+		var container = L.DomUtil.create('div', 'leaflet-bar');
+		var wrapper = document.createElement('div');
+		container.appendChild(wrapper);
+		var link = L.DomUtil.create('a', '', wrapper);
+		link.href = '#';
+		link.style.width = '26px';
+		link.style.height = '26px';
+		link.style.backgroundImage = 'url(' + this._icon + ')';
+		link.style.backgroundSize = '26px 26px';
+		link.style.backgroundRepeat = 'no-repeat';
+		link.title = this.options.title;
+
+		var stop = L.DomEvent.stopPropagation;
+		L.DomEvent
+			.on(link, 'click', stop)
+			.on(link, 'mousedown', stop)
+			.on(link, 'dblclick', stop)
+			.on(link, 'click', L.DomEvent.preventDefault)
+			.on(link, 'click', this._toggle, this);
+
+
+		var form = this._form = document.createElement('form');
+		form.style.display = 'none';
+		form.style.position = 'absolute';
+		form.style.left = '27px';
+		form.style.top = '0px';
+		form.style.zIndex = -10;
+		var input = this._input = document.createElement('input');
+		input.style.height = '25px';
+		input.style.border = '1px solid grey';
+		input.style.padding = '0 0 0 10px';
+		form.appendChild(input);
+		L.DomEvent.on(form, 'submit', function() { this._doSearch(input.value); return false; }, this).on(form, 'submit', L.DomEvent.preventDefault);
+		container.appendChild(form);
+
+		return container;
+	},
+
+	_toggle: function() {
+		if( this._form.style.display != 'block' ) {
+			this._form.style.display = 'block';
+			this._input.focus();
+		} else {
+			this._collapse();
+		}
+	},
+
+	_collapse: function() {
+		this._form.style.display = 'none';
+		this._input.value = '';
+	},
+
+	_nominatimCallback: function( results ) {
+		if( results && results.length > 0 ) {
+			var bbox = results[0].boundingbox;
+			this._map.fitBounds(L.latLngBounds([[bbox[0], bbox[2]], [bbox[1], bbox[3]]]));
+		}
+		this._collapse();
+	},
+
+	_callbackId: 0,
+
+	_doSearch: function( query ) {
+		var callback = '_l_osmgeocoder_' + this._callbackId++;
+		window[callback] = L.Util.bind(this._nominatimCallback, this);
+		var queryParams = {
+			q: query,
+			format: 'json',
+			limit: 1,
+			'json_callback': callback
+		};
+		if( this.options.email )
+			queryParams.email = this.options.email;
+		if( this._map.getBounds() )
+			queryParams.viewbox = this._map.getBounds().toBBoxString();
+		var url = 'https://nominatim.openstreetmap.org/search' + L.Util.getParamString(queryParams);
+		var script = document.createElement('script');
+		script.type = 'text/javascript';
+		script.src = url;
+		document.getElementsByTagName('head')[0].appendChild(script);
+	},
+
+	/* jshint laxbreak: true */
+	_icon: 'data:image/png;base64,'
+		+'iVBORw0KGgoAAAANSUhEUgAAADQAAAA0CAYAAADFeBvrAAAABHNCSVQICAgIfAhkiAAAAAlwSFlz'
+		+'AAAL/wAAC/8Bk9f7AQAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAOnSURB'
+		+'VGiB7ZhPaBxVHMc/vxezuzlsQqQqFf+Af8CLoWgsNHjoYjazbrR4SsGbgkcPInooLb1YRdBDQRCt'
+		+'Cp6E3NLDZmendRXpaiC1kXqwh17EixQsmxATk935edhJHELczbydskOZz+m937zf+73v/Gbe+82I'
+		+'qnI3YQa9gLhJBSWdVFDSSQUlnVRQ0kkFJZ174p6wXC5nVXXC9/2RXC53bWFhYS3uGN2QOIrTQqFw'
+		+'KJPJnAGeB54GhoNLCtwAlowxHywuLt7oO1gP+hbkOM4rwGfA/T2GbojIKdd1z+sdLPH7EuQ4zufA'
+		+'GyHTH8BPIrKsqn8Dk8BR4KmdAar63fb29ov1en3TOnAXrN8hx3Fe5z8x/4jI2dHR0Y/m5+fb+4w9'
+		+'KSKfqOohETmezWbPAW/bxu6GVYbK5fJD7Xb7V2AMWPd9/5jnedd7+NzXbrd/BB4HfBE5Xq1Wf7Ba'
+		+'dRestu1Wq3WejhiAd3uJAahUKrdE5DU6G4VR1S9tYvcisiDpUAy6S7Va7dOD+gYZ+SLoPuk4zsNR'
+		+'4/cisqBisfgEkAdQVTfqjqWqi6H2ZNT4vbDJ0DOh7tWo/qq662OMGbwg4IGdhoj8GdV5fX39Fp33'
+		+'CN/3D1vE70pkQar6S6h9JKp/Pp+fAARARK5F9e+FjaAVgjssIs9axNz1McYsW/h3JbIgz/OawM2g'
+		+'e7JYLD5yUN9CoZAD3gy67WazuRI1fi+sziER+ThojhpjLhzUb3h4+D2CMkhVLzQajQ2b+F3XZlMp'
+		+'iIg4juOp6guB6auhoaG3KpXK6n7j5+bmhprN5jvAOTo3sRVUClesV/5/a7MtTmdnZx9ttVrXCc4k'
+		+'4HcROWOMuVKpVG4ClEqlw8BRVT1Np1ANc1tEpqvV6s+2i9+PvqrtmZmZIyLyNTCx59JtYAN4cI99'
+		+'E8iF+n/5vj/teV5su11fn+C1Wm1lbGzsORF5HwhX2ePsESMi36jqYyLihsz3GmMul0ql8GHdF7F8'
+		+'sUKnAm+1WseMMZNBSTOiqldFZBlYcl33N+jsdJlMZgGYCbnH9vjFJigKgaiLQDFkjkXUQP761Ov1'
+		+'za2trROAFzKPq+qlfh+/gWRoh6mpqZF8Pn8RmA6Z+8rUQP/LNRqNjbW1tRPApZC5r0wN/EfjjigR'
+		+'uRwyjwNnbeYbuCDoiFpdXX0Z+DYwfa+qr9rMlQhBsJupl1T1w2w2W3Zdd91mnoFuCneCxGQoLlJB'
+		+'SScVlHRSQUknFZR0UkFJ564T9C+LGmRQ/iQvLwAAAABJRU5ErkJggg=='
+});
+
+L.control.search = function( options ) {
+	return new L.Control.Search(options);
+};
+

js/leaflet.wmslegendinfo.js

@@ -0,0 +1,137 @@
+L.TileLayer.BetterWMS = L.TileLayer.WMS.extend({
+  
+  onAdd: function (map) {
+    // Triggered when the layer is added to a map.
+    //   Register a click listener, then do all the upstream WMS things
+    L.TileLayer.WMS.prototype.onAdd.call(this, map);
+    map.on('click', this.getFeatureInfo, this);
+  },
+  
+  onRemove: function (map) {
+    // Triggered when the layer is removed from a map.
+    //   Unregister a click listener, then do all the upstream WMS things
+    L.TileLayer.WMS.prototype.onRemove.call(this, map);
+    map.off('click', this.getFeatureInfo, this);
+  },
+  
+  getFeatureInfo: function (evt) {
+    // Make an AJAX request to the server and hope for the best
+    var url = this.getFeatureInfoUrl(evt.latlng),
+        showResults = L.Util.bind(this.showGetFeatureInfo, this);
+    $.ajax({
+      url: url,
+      success: function (data, status, xhr) {
+        var err = typeof data === 'string' ? null : data;
+        showResults(err, evt.latlng, data);
+      },
+      error: function (xhr, status, error) {
+        showResults(error);  
+      }
+    });
+  },
+  
+  getFeatureInfoUrl: function (latlng) {
+    // Construct a GetFeatureInfo request URL given a point
+    var point = this._map.latLngToContainerPoint(latlng, this._map.getZoom()),
+        size = this._map.getSize(),
+        
+        params = {
+          request: 'GetFeatureInfo',
+          service: 'WMS',
+          srs: 'EPSG:4326',
+          styles: this.wmsParams.styles,
+          transparent: this.wmsParams.transparent,
+          version: this.wmsParams.version,      
+          format: this.wmsParams.format,
+          bbox: this._map.getBounds().toBBoxString(),
+          height: size.y,
+          width: size.x,
+          layers: this.wmsParams.layers,
+          query_layers: this.wmsParams.layers,
+          info_format: 'text/html'
+        };
+    
+    params[params.version === '1.3.0' ? 'i' : 'x'] = point.x;
+    params[params.version === '1.3.0' ? 'j' : 'y'] = point.y;
+    
+    return this._url + L.Util.getParamString(params, this._url, true);
+  },
+  
+  showGetFeatureInfo: function (err, latlng, content) {
+    if (err) { console.log(err); return; } // do nothing if there's an error
+    
+    // Otherwise show the content in a popup, or something.
+    L.popup({ maxWidth: 800})
+      .setLatLng(latlng)
+      .setContent(content)
+      .openOn(this._map);
+  }
+});
+
+L.tileLayer.betterWms = function (url, options) {
+  return new L.TileLayer.BetterWMS(url, options);  
+};
+
+/*
+ * L.Control.WMSLegend is used to add a WMS Legend to the map
+ */
+
+L.Control.WMSLegend = L.Control.extend({
+    options: {
+        position: 'topleft',
+        uri: ''
+    },
+
+    onAdd: function () {
+        var controlClassName = 'leaflet-control-wms-legend',
+            legendClassName = 'wms-legend',
+            stop = L.DomEvent.stopPropagation;
+        this.container = L.DomUtil.create('div', controlClassName);
+        this.img = L.DomUtil.create('img', legendClassName, this.container);
+        this.img.src = this.options.uri;
+        this.img.alt = 'Legend';
+
+        L.DomEvent
+            .on(this.img, 'click', this._click, this)
+            .on(this.container, 'click', this._click, this)
+            .on(this.img, 'mousedown', stop)
+            .on(this.img, 'dblclick', stop)
+            .on(this.img, 'click', L.DomEvent.preventDefault)
+            .on(this.img, 'click', stop);
+        this.height = null;
+        this.width = null;
+        return this.container;
+    },
+    _click: function (e) {
+        L.DomEvent.stopPropagation(e);
+        L.DomEvent.preventDefault(e);
+        // toggle legend visibility
+        var style = window.getComputedStyle(this.img);
+        if (style.display === 'none') {
+            this.container.style.height = this.height + 'px';
+            this.container.style.width = this.width + 'px';
+            this.img.style.display = this.displayStyle;
+        }
+        else {
+            if (this.width === null && this.height === null) {
+                // Only do inside the above check to prevent the container
+                // growing on successive uses
+                this.height = this.container.offsetHeight;
+                this.width = this.container.offsetWidth;
+            }
+            this.displayStyle = this.img.style.display;
+            this.img.style.display = 'none';
+            this.container.style.height = '20px';
+            this.container.style.width = '20px';
+        }
+    },
+});
+
+L.wmsLegend = function (uri) {
+    var wmsLegendControl = new L.Control.WMSLegend;
+    wmsLegendControl.options.uri = uri;
+    map.addControl(wmsLegendControl);
+    return wmsLegendControl;
+};
+
+

js/styledLayerControl.js

@@ -0,0 +1,397 @@
+L.Control.StyledLayerControl = L.Control.Layers.extend({
+		options : {
+			collapsed : true,
+			position : 'topright',
+			autoZIndex : true
+		},
+
+		initialize : function (baseLayers, groupedOverlays, options) {
+			var i,
+			j;
+			L.Util.setOptions(this, options);
+
+			this._layers = {};
+			this._lastZIndex = 0;
+			this._handlingClick = false;
+			this._groupList = [];
+			this._domGroups = [];
+
+			for (i in groupedOverlays) {
+				for (var j in groupedOverlays[i].layers) {
+					this._addLayer(groupedOverlays[i].layers[j], j, groupedOverlays[i], true);
+				}
+			}
+			for (i in baseLayers) {
+				for (var j in baseLayers[i].layers) {
+					this._addLayer(baseLayers[i].layers[j], j, baseLayers[i], false);
+				}
+			}
+
+			
+			
+		},
+
+		onAdd : function (map) {
+			this._initLayout();
+			this._update();
+
+			map
+			.on('layeradd', this._onLayerChange, this)
+			.on('layerremove', this._onLayerChange, this);
+
+			return this._container;
+		},
+
+		onRemove : function (map) {
+			map
+			.off('layeradd', this._onLayerChange)
+			.off('layerremove', this._onLayerChange);
+		},
+
+		addBaseLayer : function (layer, name, group) {
+			this._addLayer(layer, name, group, false);
+			this._update();
+			return this;
+		},
+
+		addOverlay : function (layer, name, group) {
+			this._addLayer(layer, name, group, true);
+			this._update();
+			return this;
+		},
+
+		removeLayer : function (layer) {
+			var id = L.Util.stamp(layer);
+			delete this._layers[id];
+			this._update();
+			return this;
+		},
+			
+		removeGroup : function (group_Name){
+			for(group in this._groupList){
+				if( this._groupList[group].groupName == group_Name ){
+					for(layer in this._layers){
+						if( this._layers[layer].group && this._layers[layer].group.name == group_Name ){
+							delete this._layers[layer];
+						}
+					}
+					delete this._groupList[group];
+					this._update();
+					break;
+				}
+			}
+		},	
+
+		_initLayout : function () {
+			var className = 'leaflet-control-layers',
+			container = this._container = L.DomUtil.create('div', className);
+
+			//Makes this work on IE10 Touch devices by stopping it from firing a mouseout event when the touch is released
+			container.setAttribute('aria-haspopup', true);
+
+			if (!L.Browser.touch) {
+				L.DomEvent.disableClickPropagation(container);
+				L.DomEvent.on(container, 'wheel', L.DomEvent.stopPropagation);
+			} else {
+				L.DomEvent.on(container, 'click', L.DomEvent.stopPropagation);
+			}
+			
+			var section = document.createElement('section');
+			section.className = 'ac-container ' + className + '-list';
+			
+			var form = this._form = L.DomUtil.create('form');
+			
+			section.appendChild( form );
+
+			if (this.options.collapsed) {
+				if (!L.Browser.android) {
+					L.DomEvent
+					.on(container, 'mouseover', this._expand, this)
+					.on(container, 'mouseout', this._collapse, this);
+				}
+				var link = this._layersLink = L.DomUtil.create('a', className + '-toggle', container);
+				link.href = '#';
+				link.title = 'Layers';
+
+				if (L.Browser.touch) {
+					L.DomEvent
+					.on(link, 'click', L.DomEvent.stop)
+					.on(link, 'click', this._expand, this);
+				} else {
+					L.DomEvent.on(link, 'focus', this._expand, this);
+				}
+
+				this._map.on('click', this._collapse, this);
+				// TODO keyboard accessibility
+				
+			} else {
+				this._expand();
+			}
+
+			this._baseLayersList = L.DomUtil.create('div', className + '-base', form);
+			this._overlaysList = L.DomUtil.create('div', className + '-overlays', form);
+
+			container.appendChild(section);
+			
+			// process options of ac-container css class - to options.container_width and options.container_maxHeight
+			for(var c = 0; c < (containers = container.getElementsByClassName('ac-container')).length; c++ ){
+				if (this.options.container_width) {
+					containers[c].style.width = this.options.container_width;
+				}	
+					
+				// set the max-height of control to y value of map object
+				this._default_maxHeight = this.options.container_maxHeight ?  this.options.container_maxHeight : (this._map._size.y - 70);
+				containers[c].style.maxHeight = this._default_maxHeight + "px";
+				
+			}
+			
+			window.onresize = this._on_resize_window.bind(this);
+			
+		},
+			
+		_on_resize_window : function(){
+			// listen to resize of screen to reajust de maxHeight of container
+			for(var c = 0; c < containers.length; c++ ){
+				// input the new value to height
+				containers[c].style.maxHeight = (window.innerHeight-90) < this._default_maxHeight ? (window.innerHeight - 90) + "px" : this._default_maxHeight + "px";
+			}
+		},
+
+		_addLayer : function (layer, name, group, overlay) {
+			var id = L.Util.stamp(layer);
+
+			this._layers[id] = {
+				layer : layer,
+				name : name,
+				overlay : overlay
+			};
+
+			if (group) {
+				var groupId = this._groupList.indexOf(group);
+				
+				// if not find the group search for the name
+				if( groupId === -1 ){
+					for( g in this._groupList){
+						if( this._groupList[g].groupName == group.groupName ){
+							groupId = g;
+							break;
+						}
+					}
+				}
+
+				if (groupId === -1) {
+					groupId = this._groupList.push(group) - 1;
+				}
+
+				this._layers[id].group = {
+					name : group.groupName,
+					id : groupId,
+					expanded : group.expanded
+				};
+			}
+
+			if (this.options.autoZIndex && layer.setZIndex) {
+				this._lastZIndex++;
+				layer.setZIndex(this._lastZIndex);
+			}
+		},
+
+		_update : function () {
+			if (!this._container) {
+				return;
+			}
+
+			this._baseLayersList.innerHTML = '';
+			this._overlaysList.innerHTML = '';
+			this._domGroups.length = 0;
+
+			var baseLayersPresent = false,
+			overlaysPresent = false,
+			i,
+			obj;
+
+			for (i in this._layers) {
+				obj = this._layers[i];
+				this._addItem(obj);
+				overlaysPresent = overlaysPresent || obj.overlay;
+				baseLayersPresent = baseLayersPresent || !obj.overlay;
+			}
+		
+		},
+
+		_onLayerChange : function (e) {
+			var obj = this._layers[L.Util.stamp(e.layer)];
+
+			if (!obj) {
+				return;
+			}
+
+			if (!this._handlingClick) {
+				this._update();
+			}
+
+			var type = obj.overlay ?
+				(e.type === 'layeradd' ? 'overlayadd' : 'overlayremove') :
+				(e.type === 'layeradd' ? 'baselayerchange' : null);
+
+			if (type) {
+				this._map.fire(type, obj);
+			}
+		},
+
+		// IE7 bugs out if you create a radio dynamically, so you have to do it this hacky way (see http://bit.ly/PqYLBe)
+		_createRadioElement : function (name, checked) {
+
+			var radioHtml = '<input type="radio" class="leaflet-control-layers-selector" name="' + name + '"';
+			if (checked) {
+				radioHtml += ' checked="checked"';
+			}
+			radioHtml += '/>';
+
+			var radioFragment = document.createElement('div');
+			radioFragment.innerHTML = radioHtml;
+
+			return radioFragment.firstChild;
+		},
+
+		_addItem : function (obj) {
+			var label = document.createElement('div'),
+			input,
+			checked = this._map.hasLayer(obj.layer),
+			container;
+		
+
+			if (obj.overlay) {
+				input = document.createElement('input');
+				input.type = 'checkbox';
+				input.className = 'leaflet-control-layers-selector';
+				input.defaultChecked = checked;
+				
+				label.className = "menu-item-checkbox"; 
+				
+			} else {
+				input = this._createRadioElement('leaflet-base-layers', checked);
+				
+				label.className = "menu-item-radio"; 
+			}
+			
+			
+			input.layerId = L.Util.stamp(obj.layer);
+
+			L.DomEvent.on(input, 'click', this._onInputClick, this);
+
+			var name = document.createElement('span');
+			name.innerHTML = ' ' + obj.name;
+
+			label.appendChild(input);
+			label.appendChild(name);
+			
+			// configure the delete button for layers with attribute removable = true
+			if( obj.layer.StyledLayerControl && obj.layer.StyledLayerControl.removable ){
+				var bt_delete = document.createElement("input");
+				bt_delete.type = "button";
+				bt_delete.className = "bt_delete";
+				L.DomEvent.on(bt_delete, 'click', this._onDeleteClick, this);
+				label.appendChild(bt_delete);
+			}	
+
+			if (obj.overlay) {
+				container = this._overlaysList;
+			} else {
+				container = this._baseLayersList;
+			}
+						
+			var groupContainer = this._domGroups[obj.group.id];
+
+			if (!groupContainer) {
+				
+				groupContainer = document.createElement('div');
+				groupContainer.id = 'leaflet-control-accordion-layers-' + obj.group.id;
+				
+				// verify if group is expanded
+				var s_expanded = obj.group.expanded ? ' checked = "true" ' : '';
+				
+				// verify if type is exclusive
+				var s_type_exclusive = this.options.exclusive ? ' type="radio" ' : ' type="checkbox" ';
+				
+				inputElement = '<input id="ac' + obj.group.id + '" name="accordion-1" class="menu" ' + s_expanded + s_type_exclusive + '/>';
+				inputLabel   = '<label for="ac' + obj.group.id + '">' + obj.group.name + '</label>';
+				
+				article = document.createElement('article');
+				article.className = 'ac-large';
+				article.appendChild( label );
+				
+				// process options of ac-large css class - to options.group_maxHeight property
+				if(this.options.group_maxHeight){
+					article.style.maxHeight = this.options.group_maxHeight;
+				}
+				
+				groupContainer.innerHTML = inputElement + inputLabel;
+				groupContainer.appendChild( article );
+				container.appendChild(groupContainer); 
+
+				this._domGroups[obj.group.id] = groupContainer;
+			} else {
+				groupContainer.lastElementChild.appendChild( label );
+			}	
+
+			return label;
+		},
+
+		_onInputClick : function () {
+			var i,
+			input,
+			obj,
+			inputs = this._form.getElementsByTagName('input'),
+			inputsLen = inputs.length;
+
+			this._handlingClick = true;
+
+			for (i = 0; i < inputsLen; i++) {
+				input = inputs[i];
+				obj = this._layers[input.layerId];
+				
+			    if ( !obj ) { continue; }
+
+				if (input.checked && !this._map.hasLayer(obj.layer)) {
+					this._map.addLayer(obj.layer);
+
+				} else if (!input.checked && this._map.hasLayer(obj.layer)) {
+					this._map.removeLayer(obj.layer);
+				}
+			}
+
+			this._handlingClick = false;
+		},
+			
+		_onDeleteClick : function(obj){
+			var node = obj.target.parentElement.childNodes[0];
+			n_obj = this._layers[node.layerId];
+			
+			// verify if obj is a basemap and checked to not remove
+			if( !n_obj.overlay && node.checked ){
+				return false;
+			}	
+			
+			if( this._map.hasLayer(n_obj.layer) ){
+				this._map.removeLayer(n_obj.layer);
+			}
+			
+			obj.target.parentNode.remove();
+			
+			return false;
+		},
+
+		_expand : function () {
+			L.DomUtil.addClass(this._container, 'leaflet-control-layers-expanded');
+		},
+
+		_collapse : function () {
+			this._container.className = this._container.className.replace(' leaflet-control-layers-expanded', '');
+		}
+	});
+
+L.Control.styledLayerControl = function (baseLayers, overlays, options) {
+	return new L.Control.StyledLayerControl(baseLayers, overlays, options);
+};
+