Merge https://github.com/friendica/friendica into pull
This commit is contained in:
commit
99e4ea19e7
8 changed files with 1040 additions and 156 deletions
|
@ -105,3 +105,17 @@ blockquote {
|
|||
input#acl-search {
|
||||
background-color: #aaa;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.notify-seen {
|
||||
background:#666;
|
||||
}
|
||||
|
||||
#nav-notifications-menu {
|
||||
background: #2e2e2f;
|
||||
}
|
||||
|
||||
#nav-notifications-menu li:hover {
|
||||
background: #444;
|
||||
}
|
|
@ -10,7 +10,16 @@
|
|||
|
||||
<div id="mapcontrol" style="display:none;">
|
||||
<form id="mapform" action="network" method="post" >
|
||||
<span style="width: 500px;position: relative;float: right;right:20px;"><p>this ist still under development.
|
||||
<div id="layermanager" style="width: 350px;position: relative;float: right;right:20px;"></div>
|
||||
<div id="map2" style="height:350px;width:350px;"></div>
|
||||
<div id="mouseposition" style="width: 350px;"></div>
|
||||
{{inc field_input.tpl with $field=$ELZoom}}{{endinc}}
|
||||
{{inc field_input.tpl with $field=$ELPosX}}{{endinc}}
|
||||
{{inc field_input.tpl with $field=$ELPosY}}{{endinc}}
|
||||
<div class="settings-submit-wrapper">
|
||||
<input id="mapsub" type="submit" value="$sub" class="settings-submit" name="diabook-settings-map-sub"></input>
|
||||
</div>
|
||||
<span style="width: 500px;"><p>this ist still under development.
|
||||
the idea is to provide a map with different layers(e.g. earth population, atomic power plants, wheat growing acreages, sunrise or what you want)
|
||||
and markers(events, demos, friends, anything, that is intersting for you).
|
||||
These layer and markers should be importable and deletable by the user.</p>
|
||||
|
@ -20,14 +29,6 @@ just contact me, if you are intesrested in joining</p>
|
|||
<p>this is build with <b>mapquery</b> http://mapquery.org/ and
|
||||
<b>openlayers</b>http://openlayers.org/</p>
|
||||
</span>
|
||||
<div id="map2" style="height:350px;width:350px;"></div>
|
||||
<div id="mouseposition" style="width: 350px;"></div>
|
||||
{{inc field_input.tpl with $field=$ELZoom}}{{endinc}}
|
||||
{{inc field_input.tpl with $field=$ELPosX}}{{endinc}}
|
||||
{{inc field_input.tpl with $field=$ELPosY}}{{endinc}}
|
||||
<div class="settings-submit-wrapper">
|
||||
<input id="mapsub" type="submit" value="$sub" class="settings-submit" name="diabook-settings-map-sub"></input>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -18,10 +18,10 @@ the matched element
|
|||
pairs are:
|
||||
|
||||
* **layers** (array of MapQuery.Layer *or* MapQuery.Layer): Either an array
|
||||
* or a single layer that should be added to the map
|
||||
or a single layer that should be added to the map
|
||||
* **center** ({position: [x,y], zoom: z(int), box: [llx,lly,urx,ury]}):
|
||||
* Initially go to a certain location. At least one layer (in the `layers`
|
||||
* option) needs to be specified.
|
||||
Initially go to a certain location. At least one layer (in the `layers`
|
||||
option) needs to be specified.
|
||||
|
||||
> Returns: $('selector') (jQuery object)
|
||||
|
||||
|
@ -68,6 +68,8 @@ $.MapQuery.Map = function(element, options) {
|
|||
delete this.olMapOptions.layers;
|
||||
delete this.olMapOptions.maxExtent;
|
||||
delete this.olMapOptions.zoomToMaxExtent;
|
||||
delete this.olMapOptions.center;
|
||||
|
||||
//TODO SMO20110630 the maxExtent is in mapprojection, decide whether or
|
||||
//not we need to change it to displayProjection
|
||||
this.maxExtent = this.options.maxExtent;
|
||||
|
@ -75,6 +77,9 @@ $.MapQuery.Map = function(element, options) {
|
|||
this.maxExtent[0],this.maxExtent[1],this.maxExtent[2],this.maxExtent[3]);
|
||||
|
||||
|
||||
this.projection = this.options.projection;
|
||||
this.displayProjection = this.options.displayProjection;
|
||||
|
||||
OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;
|
||||
OpenLayers.Util.onImageLoadErrorColor = "transparent";
|
||||
|
||||
|
@ -96,14 +101,46 @@ $.MapQuery.Map = function(element, options) {
|
|||
|
||||
// To bind and trigger jQuery events
|
||||
this.events = $({});
|
||||
// create triggers for all OpenLayers map events
|
||||
var events = {};
|
||||
$.each(this.olMap.EVENT_TYPES, function(i, evt) {
|
||||
events[evt] = function() {
|
||||
self.events.trigger(evt, arguments);
|
||||
};
|
||||
|
||||
this.handlers = {
|
||||
// Triggers the jQuery events, after the OpenLayers events
|
||||
// happened without any further processing
|
||||
simple: function(data) {
|
||||
this.trigger(data.type);
|
||||
}
|
||||
};
|
||||
|
||||
// MapQuery doesn't bind all OpenLayers events automatically,
|
||||
// but just the ones that make sense.
|
||||
// Events that are left out intensionally are:
|
||||
// - changebaselayer: MapQuery doesn't have the concept of base layers
|
||||
// - mouseover, mouseout, mousemove: Handle those with jQuery on the
|
||||
// DOM level
|
||||
// Some events can be triggered by MapQuery without listening to the
|
||||
// OpenLayers events. This only works for events that are triggered
|
||||
// by functionality that MapQuery implements in some custom way, e.g.
|
||||
// (pre)addlayer, (pre)removelayer, changelayer.
|
||||
// TODO vmx 20120309: Proper docs for the events, here's some quickly
|
||||
// written info:
|
||||
// - generally spoken, the map events follow the OpeLayer events
|
||||
// - preaddlayer, movestart, move, moveend, zoomend: no additional
|
||||
// argument
|
||||
// - addlayer, preremovelayer, removelayer: layer as additional argument
|
||||
// - changelayer: layer and the property that changed as additional
|
||||
// argument. Possible values for the property are: position (in
|
||||
// the layer stack), opacity, visibility
|
||||
// Currently this event is always fired, even if the property
|
||||
// was only meant to be changed, but wasn't exctually changed.
|
||||
// I.e. that the event is fired even if you call
|
||||
// `layer.visible(true)` although the layer is already visible.
|
||||
// I'm (vmx) not sure if we want to change that :)
|
||||
this.olMap.events.on({
|
||||
scope: this,
|
||||
movestart: this.handlers.simple,
|
||||
move: this.handlers.simple,
|
||||
moveend: this.handlers.simple,
|
||||
zoomend: this.handlers.simple
|
||||
});
|
||||
this.olMap.events.on(events);
|
||||
|
||||
// Add layers to the map
|
||||
if (this.options.layers!==undefined) {
|
||||
|
@ -129,7 +166,7 @@ _version added 0.1_
|
|||
**options** an object of key-value pairs with options to create one or
|
||||
more layers
|
||||
|
||||
>Returns: [layer] (array of MapQuery.Layer)
|
||||
>Returns: [layer] (array of MapQuery.Layer) _or_ false
|
||||
|
||||
|
||||
The `.layers()` method allows us to attach layers to a mapQuery object. It takes
|
||||
|
@ -138,6 +175,10 @@ layer options objects. If an options object is given, it will return the
|
|||
resulting layer(s). We can also use it to retrieve all layers currently attached
|
||||
to the map.
|
||||
|
||||
When adding layers, those are returned. If the creation is cancled by returning
|
||||
`false` in the `preaddlayer` event, this function returns `false` to
|
||||
intentionally break the chain instead of hiding errors subtly).
|
||||
|
||||
|
||||
var osm = map.layers({type:'osm'}); //add an osm layer to the map
|
||||
var layers = map.layers(); //get all layers of the map
|
||||
|
@ -156,7 +197,7 @@ to the map.
|
|||
else {
|
||||
return $.map(options, function(layer) {
|
||||
return self._addLayer(layer);
|
||||
});
|
||||
}).reverse();
|
||||
}
|
||||
break;
|
||||
default:
|
||||
|
@ -182,27 +223,43 @@ to the map.
|
|||
_addLayer: function(options) {
|
||||
var id = this._createId();
|
||||
var layer = new $.MapQuery.Layer(this, id, options);
|
||||
// NOTE vmx 20120305: Not sure if this is a good idea, or if it would
|
||||
// be better to include `options` with the preaddlayer event
|
||||
if (this._triggerReturn('preaddlayer', [layer])===false) {
|
||||
return false;
|
||||
}
|
||||
this.olMap.addLayer(layer.olLayer);
|
||||
|
||||
this.layersList[id] = layer;
|
||||
if (layer.isVector) {
|
||||
this.vectorLayers.push(id);
|
||||
}
|
||||
this._updateSelectFeatureControl(this.vectorLayers);
|
||||
this.events.trigger('mqAddLayer',layer);
|
||||
|
||||
layer.trigger('addlayer');
|
||||
return layer;
|
||||
},
|
||||
// Creates a new unique ID for a layer
|
||||
_createId: function() {
|
||||
return 'mapquery' + this.idCounter++;
|
||||
return 'mapquery_' + this.idCounter++;
|
||||
},
|
||||
_removeLayer: function(id) {
|
||||
var layer = this.layersList[id];
|
||||
if (this._triggerReturn('preremovelayer', [layer])===false) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// remove id from vectorlayer if it is there list
|
||||
this.vectorLayers = $.grep(this.vectorLayers, function(elem) {
|
||||
return elem != id;
|
||||
});
|
||||
this._updateSelectFeatureControl(this.vectorLayers);
|
||||
this.events.trigger('mqRemoveLayer',id);
|
||||
delete this.layersList[id];
|
||||
this.olMap.removeLayer(layer.olLayer);
|
||||
|
||||
// XXX vmx: shouldn't the layer be destroyed() properly?
|
||||
delete this.layersList[id];
|
||||
|
||||
layer.trigger('removelayer');
|
||||
return this;
|
||||
},
|
||||
/**
|
||||
|
@ -210,13 +267,13 @@ to the map.
|
|||
_version added 0.1_
|
||||
####**Description**: get/set the extent, zoom and position of the map
|
||||
|
||||
**position** the position as [x,y] in displayProjection (default EPSG:4326)
|
||||
* **position** the position as [x,y] in displayProjection (default EPSG:4326)
|
||||
to center the map at
|
||||
**zoom** the zoomlevel as integer to zoom the map to
|
||||
**box** an array with the lower left x, lower left y, upper right x,
|
||||
* **zoom** the zoomlevel as integer to zoom the map to
|
||||
* **box** an array with the lower left x, lower left y, upper right x,
|
||||
upper right y to zoom the map to,
|
||||
this will take precedent when conflicting with any of the above values
|
||||
**projection** the projection the coordinates are in, default is
|
||||
* **projection** the projection the coordinates are in, default is
|
||||
the displayProjection
|
||||
|
||||
>Returns: {position: [x,y], zoom: z(int), box: [llx,lly,urx,ury]}
|
||||
|
@ -239,7 +296,7 @@ extent from the map. The coordinates are returned in displayProjection.
|
|||
*/
|
||||
center: function (options) {
|
||||
var position;
|
||||
var mapProjection;
|
||||
var mapProjection = new OpenLayers.Projection(this.projection);
|
||||
// Determine source projection
|
||||
var sourceProjection = null;
|
||||
var zoom;
|
||||
|
@ -249,7 +306,7 @@ extent from the map. The coordinates are returned in displayProjection.
|
|||
'OpenLayers.Projection' ? options.projection :
|
||||
new OpenLayers.Projection(options.projection);
|
||||
} else {
|
||||
var displayProjection = this.olMap.displayProjection;
|
||||
var displayProjection = this.displayProjection;
|
||||
if(!displayProjection) {
|
||||
// source == target
|
||||
sourceProjection = new OpenLayers.Projection('EPSG:4326');
|
||||
|
@ -265,8 +322,6 @@ extent from the map. The coordinates are returned in displayProjection.
|
|||
position = this.olMap.getCenter();
|
||||
zoom = this.olMap.getZoom();
|
||||
box = this.olMap.getExtent();
|
||||
mapProjection = this.olMap.getProjectionObject();
|
||||
|
||||
|
||||
if (!mapProjection.equals(sourceProjection)) {
|
||||
position.transform(mapProjection, sourceProjection);
|
||||
|
@ -282,9 +337,8 @@ extent from the map. The coordinates are returned in displayProjection.
|
|||
|
||||
// Zoom to the extent of the box
|
||||
if (options.box!==undefined) {
|
||||
mapProjection = this.olMap.getProjectionObject();
|
||||
box = new OpenLayers.Bounds(
|
||||
options.box[0], options.box[1],options.box[2], options.box[3]);
|
||||
options.box[0], options.box[1],options.box[2], options.box[3]);
|
||||
if (!mapProjection.equals(sourceProjection)) {
|
||||
box.transform(sourceProjection,mapProjection);
|
||||
}
|
||||
|
@ -299,7 +353,6 @@ extent from the map. The coordinates are returned in displayProjection.
|
|||
else {
|
||||
position = new OpenLayers.LonLat(options.position[0],
|
||||
options.position[1]);
|
||||
mapProjection = this.olMap.getProjectionObject();
|
||||
if (!mapProjection.equals(sourceProjection)) {
|
||||
position.transform(sourceProjection, mapProjection);
|
||||
}
|
||||
|
@ -323,11 +376,89 @@ extent from the map. The coordinates are returned in displayProjection.
|
|||
this.olMap.addControl(this.selectFeatureControl);
|
||||
this.selectFeatureControl.activate();
|
||||
},
|
||||
bind: function() {
|
||||
this.events.bind.apply(this.events, arguments);
|
||||
// This function got a bit too clever. The reason is, that jQuery's
|
||||
// bind() is overloaded with so many possible combinations of arguments.
|
||||
// And, of course, MapQuery wants to support them all
|
||||
// The essence of the function is to wrap the original callback into
|
||||
// the correct scope
|
||||
bind: function(types, data, fn) {
|
||||
var self = this;
|
||||
|
||||
// A map of event/handle pairs, wrap each of them
|
||||
if(arguments.length===1) {
|
||||
var wrapped = {};
|
||||
$.each(types, function(type, fn) {
|
||||
wrapped[type] = function() {
|
||||
return fn.apply(self, arguments);
|
||||
};
|
||||
});
|
||||
this.events.bind.apply(this.events, [wrapped]);
|
||||
}
|
||||
else {
|
||||
var args = [types];
|
||||
// Only callback given, but no data (types, fn), hence
|
||||
// `data` is the function
|
||||
if(arguments.length===2) {
|
||||
fn = data;
|
||||
}
|
||||
else {
|
||||
if (!$.isFunction(fn)) {
|
||||
throw('bind: you might have a typo in the function name');
|
||||
}
|
||||
// Callback and data given (types, data, fn), hence include
|
||||
// the data in the argument list
|
||||
args.push(data);
|
||||
}
|
||||
|
||||
args.push(function() {
|
||||
return fn.apply(self, arguments);
|
||||
});
|
||||
|
||||
this.events.bind.apply(this.events, args);
|
||||
}
|
||||
|
||||
//this.events.bind.call(this.events, types, function() {
|
||||
// data.apply(self, arguments);
|
||||
//});
|
||||
//this.events.bind.call(this.events, types, function() {
|
||||
// data.apply(self, arguments);
|
||||
//});
|
||||
|
||||
//this.events.bind.apply(this.events, arguments);
|
||||
//this.events.bind.call(this.events, types, $.proxy(data, self));
|
||||
//this.events.bind.apply(this.events, arguments);//.bind(this);
|
||||
//this.events.bind.apply(this.events, $.proxy(arguments));//.bind(this);
|
||||
//this.events.bind.apply(this.events, $.proxy(arguments));//.bind(this);
|
||||
//this.events.bind(types, data, fn);//.bind(this);
|
||||
//this.events.bind.call(this.events, types, data, fn);//.bind(this);
|
||||
return this;
|
||||
},
|
||||
one: function() {
|
||||
this.events.one.apply(this.events, arguments);
|
||||
/**
|
||||
###*map*.`trigger(name [, parameters])`
|
||||
_version added 0.2_
|
||||
####**Description**: triggers an event on the map
|
||||
|
||||
* **name** the name of the event
|
||||
* **parameters** additional parameters that will be passed on with the event
|
||||
|
||||
>Returns: map (MapQuery.Map)
|
||||
|
||||
To subscribe to the triggered events, you need to bind to the mapuuu.
|
||||
|
||||
map.bind('myEvent', function(evt) {
|
||||
console.log('the values are: ' + evt.data[0] + ' and ' + evt.data[1])
|
||||
});
|
||||
map.trigger('myEvent', 'some', 'values');
|
||||
*/
|
||||
trigger: function() {
|
||||
// There is no point in using trigger() insted of triggerHandler(), as
|
||||
// we don't fire native events
|
||||
this.events.triggerHandler.apply(this.events, arguments);
|
||||
return this;
|
||||
},
|
||||
// Basically a trigger that returns the return value of the last listener
|
||||
_triggerReturn: function() {
|
||||
return this.events.triggerHandler.apply(this.events, arguments);
|
||||
},
|
||||
destroy: function() {
|
||||
this.olMap.destroy();
|
||||
|
@ -363,6 +494,32 @@ $.MapQuery.Layer = function(map, id, options) {
|
|||
// to bind and trigger jQuery events
|
||||
this.events = $({});
|
||||
|
||||
this.handlers = {
|
||||
// Triggers the jQuery events, after the OpenLayers events
|
||||
// happened without any further processing
|
||||
simple: function(data) {
|
||||
this.trigger(data.type);
|
||||
},
|
||||
// All OpenLayers events that are triggered by user interaction,
|
||||
// like clicking somewhere or selecting a feature, need to be
|
||||
// handled in a special way. Those OpenLayers events will then be
|
||||
// triggered by MapQuery as well
|
||||
// In case of the "featureselected" event, this means that the
|
||||
// logic of handling the event is completely within the event
|
||||
// handler. When ".select()" on a feature is called, it will just
|
||||
// trigger the OpenLayers "featureselected" event, whose handler
|
||||
// will then trigger the corresponding jQuery event.
|
||||
includeFeature: function(data) {
|
||||
var feature = new $.MapQuery.Feature(this, {olFeature:
|
||||
data.feature});
|
||||
this.trigger(data.type, [feature]);
|
||||
},
|
||||
prependLayer: function(data) {
|
||||
this.trigger('layer' + data.type);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// create the actual layer based on the options
|
||||
// Returns layer and final options for the layer (for later re-use,
|
||||
// e.g. zoomToMaxExtent).
|
||||
|
@ -371,17 +528,26 @@ $.MapQuery.Layer = function(map, id, options) {
|
|||
this.olLayer = res.layer;
|
||||
this.options = res.options;
|
||||
|
||||
// create triggers for all OpenLayers layer events
|
||||
var events = {};
|
||||
$.each(this.olLayer.EVENT_TYPES, function(i, evt) {
|
||||
events[evt] = function() {
|
||||
self.events.trigger(evt, arguments);
|
||||
self.map.events.trigger(evt, arguments);
|
||||
};
|
||||
// Some good documentation for the events is needed. Here is a short
|
||||
// description on how the current events compare to the OpenLayer
|
||||
// events on the layer:
|
||||
// - added, remove: not needed, there's addlayer and removelayer
|
||||
// - visibilitychanged: not needed, there's the changelayer event
|
||||
// - move, moveend: not needed as you get them from the map, not the layer
|
||||
// - loadstart, loadend: renamed to layerloadstart, layerloadend
|
||||
this.olLayer.events.on({
|
||||
scope: this,
|
||||
loadstart: this.handlers.prependLayer,
|
||||
loadend: this.handlers.prependLayer,
|
||||
featureselected: this.handlers.includeFeature,
|
||||
featureunselected: this.handlers.includeFeature,
|
||||
featureremoved: this.handlers.includeFeature
|
||||
});
|
||||
this.olLayer.events.on(events);
|
||||
|
||||
this.map.olMap.addLayer(this.olLayer);
|
||||
// To be able to retreive the MapQuery layer, when we only have the
|
||||
// OpenLayers layer available. For example on the layeradded event.
|
||||
// NOTE vmx 2012-02-26: Any nicer solution is welcome
|
||||
this.olLayer.mapQueryId = this.id;
|
||||
};
|
||||
|
||||
$.MapQuery.Layer.prototype = {
|
||||
|
@ -390,7 +556,7 @@ $.MapQuery.Layer.prototype = {
|
|||
_version added 0.1_
|
||||
####**Description**: move the layer down in the layer stack of the map
|
||||
|
||||
**delta** the amount of layers the layer has to move down in the layer
|
||||
* **delta** the amount of layers the layer has to move down in the layer
|
||||
stack (default 1)
|
||||
|
||||
>Returns layer (MapQuery.Layer)
|
||||
|
@ -421,22 +587,21 @@ will put the layer at the bottom.
|
|||
each: function () {},
|
||||
/**
|
||||
###*layer*.`remove()`
|
||||
_version added 0.1_
|
||||
_version added 0.2_
|
||||
####**Description**: remove the layer from the map
|
||||
|
||||
>Returns: id (string)
|
||||
>Returns: map (MapQuery.Map) or false
|
||||
|
||||
|
||||
The `.remove()` method allows us to remove a layer from the map.
|
||||
It returns an id to allow widgets to remove their references to the
|
||||
destroyed layer.
|
||||
It returns the `map` object if the layer was removed, or `false` if the
|
||||
removal was prevented in the preremovelayer event.
|
||||
|
||||
var id = layer.remove(); //remove this layer
|
||||
|
||||
|
||||
*/
|
||||
remove: function() {
|
||||
this.map.olMap.removeLayer(this.olLayer);
|
||||
// remove references to this layer that are stored in the
|
||||
// map object
|
||||
return this.map._removeLayer(this.id);
|
||||
|
@ -447,9 +612,9 @@ _version added 0.1_
|
|||
####**Description**: get/set the `position` of the layer in the layer
|
||||
stack of the map
|
||||
|
||||
**position** an integer setting the new position of the layer in the layer stack
|
||||
* **position** an integer setting the new position of the layer in the layer stack
|
||||
|
||||
>Returns: position (integer)
|
||||
>Returns: position (integer) _or_ layer (MapQuery.Layer)
|
||||
|
||||
|
||||
The `.position()` method allows us to change the position of the layer in the
|
||||
|
@ -467,7 +632,9 @@ return the current postion.
|
|||
return this.map.olMap.getLayerIndex(this.olLayer)-1;
|
||||
}
|
||||
else {
|
||||
return this.map.olMap.setLayerIndex(this.olLayer, pos+1);
|
||||
this.map.olMap.setLayerIndex(this.olLayer, pos+1);
|
||||
this.trigger('changelayer', ['position']);
|
||||
return this;
|
||||
}
|
||||
},
|
||||
/**
|
||||
|
@ -475,7 +642,7 @@ return the current postion.
|
|||
_version added 0.1_
|
||||
####**Description**: move the layer up in the layer stack of the map
|
||||
|
||||
**delta** the amount of layers the layer has to move up in the layer
|
||||
* **delta** the amount of layers the layer has to move up in the layer
|
||||
stack (default 1)
|
||||
|
||||
>Returns: layer (MapQuery.Layer)
|
||||
|
@ -503,7 +670,7 @@ given.
|
|||
_version added 0.1_
|
||||
####**Description**: get/set the `visible` state of the layer
|
||||
|
||||
**visible** a boolean setting the visibiliyu of the layer
|
||||
* **visible** a boolean setting the visibility of the layer
|
||||
|
||||
>Returns: visible (boolean)
|
||||
|
||||
|
@ -522,6 +689,7 @@ If no visible is given, it will return the current visibility.
|
|||
}
|
||||
else {
|
||||
this.olLayer.setVisibility(vis);
|
||||
this.trigger('changelayer', ['visibility']);
|
||||
return this;
|
||||
}
|
||||
},
|
||||
|
@ -530,9 +698,9 @@ If no visible is given, it will return the current visibility.
|
|||
_version added 0.1_
|
||||
####**Description**: get/set the `opacity` of the layer
|
||||
|
||||
**position** a float [0-1] setting the opacity of the layer
|
||||
* **position** a float [0-1] setting the opacity of the layer
|
||||
|
||||
>Returns: opacity (float)
|
||||
>Returns: opacity (float) _or_ layer (MapQuery.Layer)
|
||||
|
||||
|
||||
The `.opacity()` method allows us to change the opacity of the layer.
|
||||
|
@ -544,24 +712,265 @@ If no opacity is given, it will return the current opacity.
|
|||
|
||||
*/
|
||||
opacity: function(opac) {
|
||||
if (opac===undefined) {
|
||||
if (opac===undefined) {
|
||||
// this.olLayer.opacity can be null if never
|
||||
// set so return the visibility
|
||||
// set so return the visibility
|
||||
var value = this.olLayer.opacity ?
|
||||
this.olLayer.opacity : this.olLayer.getVisibility();
|
||||
return value;
|
||||
}
|
||||
else {
|
||||
this.olLayer.setOpacity(opac);
|
||||
this.trigger('changelayer', ['opacity']);
|
||||
return this;
|
||||
}
|
||||
},
|
||||
// every event gets the layer passed in
|
||||
bind: function() {
|
||||
this.events.bind.apply(this.events, arguments);
|
||||
// Use the same bind function as for the map
|
||||
this.map.bind.apply(this, arguments);
|
||||
return this;
|
||||
},
|
||||
one: function() {
|
||||
this.events.one.apply(this.events, arguments);
|
||||
/**
|
||||
###*layer*.`trigger(name [, parameters])`
|
||||
_version added 0.2_
|
||||
####**Description**: triggers an event on the layer and map
|
||||
|
||||
* **name** the name of the event
|
||||
* **parameters** additional parameters that will be passed on with the event
|
||||
|
||||
>Returns: layer (MapQuery.Layer)
|
||||
|
||||
The events get triggered on the layer as well as on the map. To subscribe to
|
||||
the triggered events, you can either bind to the layer or the map. If bound
|
||||
to the map, the second argument in the bind will be the layer the event
|
||||
came from
|
||||
|
||||
layer.bind('myEvent', function(evt) {
|
||||
console.log('the values are: ' + evt.data[0] + ' and ' + evt.data[1])
|
||||
});
|
||||
map.bind('myEvent', function(evt, layer) {
|
||||
console.log('the values are: ' + evt.data[0] + ' and ' + evt.data[1])
|
||||
});
|
||||
layer.trigger('myEvent', 'some', 'values');
|
||||
*/
|
||||
trigger: function() {
|
||||
var args = Array.prototype.slice.call(arguments);
|
||||
this.events.triggerHandler.apply(this.events, args);
|
||||
|
||||
this._addLayerToArgs(args);
|
||||
|
||||
this.map.events.triggerHandler.apply(this.map.events, args);
|
||||
return this;
|
||||
},
|
||||
// Basically a trigger that returns the return value of the last listener
|
||||
_triggerReturn: function() {
|
||||
var args = Array.prototype.slice.call(arguments);
|
||||
var ret = this.events.triggerHandler.apply(this.events, args);
|
||||
if (ret !== undefined) {
|
||||
return ret;
|
||||
}
|
||||
|
||||
this._addLayerToArgs(args);
|
||||
return this.events.triggerHandler.apply(this.map.events, args);
|
||||
},
|
||||
// Adds the current layer to the event arguments, so that it is included
|
||||
// in the event on the map
|
||||
_addLayerToArgs: function(args) {
|
||||
// Add layer for the map event
|
||||
if (args.length===1) {
|
||||
args.push([this]);
|
||||
}
|
||||
else {
|
||||
args[1].unshift(this);
|
||||
}
|
||||
},
|
||||
/**
|
||||
###*layer*.`features([options])`
|
||||
_version added 0.2.0_
|
||||
####**Description**: get/set the features of a (vector) layer
|
||||
|
||||
**options** an object of key-value pairs with options to create one or
|
||||
more features
|
||||
|
||||
>Returns: [features] (array of MapQuery.Feature)
|
||||
|
||||
|
||||
The `.features()` method allows us to attach features to a mapQuery layer
|
||||
object. It takes an options object with feature options. To add multiple
|
||||
features, create an array of feature options objects. If an options object
|
||||
is given, it will return the resulting feature(s). We can also use it to
|
||||
retrieve all features currently attached to the layer.
|
||||
|
||||
|
||||
// add an (vector) json layer to the map
|
||||
var jsonlayer = map.layers({type:'json'});
|
||||
// add a feature to the layer
|
||||
jsonlayer.features({geometry: {type: "Point", coordinates: [5.3, 7.4]}});
|
||||
// get all features of a layer (sorted with first added feature at the beginning
|
||||
var features = jsonlayer.features();
|
||||
*/
|
||||
features: function(options) {
|
||||
var self = this;
|
||||
switch(arguments.length) {
|
||||
// return all features
|
||||
case 0:
|
||||
return this._allFeatures();
|
||||
// add new feature(s)
|
||||
case 1:
|
||||
if (!$.isArray(options)) {
|
||||
return this._addFeature(options);
|
||||
}
|
||||
else {
|
||||
return $.map(options, function(feature) {
|
||||
return self._addFeature(feature);
|
||||
});
|
||||
}
|
||||
break;
|
||||
default:
|
||||
throw('wrong argument number');
|
||||
}
|
||||
},
|
||||
_allFeatures: function() {
|
||||
var layer = this;
|
||||
return $.map(layer.olLayer.features, function(feature) {
|
||||
return new $.MapQuery.Feature(layer, {olFeature: feature});
|
||||
});
|
||||
},
|
||||
_addFeature: function(options) {
|
||||
var feature = new $.MapQuery.Feature(this, options);
|
||||
// NOTE vmx 2012-04-19: Not sure if this is a good idea, or if it would
|
||||
// be better to include `options` with the preaddfeature event
|
||||
if (this._triggerReturn('preaddfeature', [feature])===false) {
|
||||
return false;
|
||||
}
|
||||
this.olLayer.addFeatures(feature.olFeature);
|
||||
this.trigger('addfeature', [feature]);
|
||||
return feature;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
#MapQuery.Feature
|
||||
|
||||
The MapQuery.Feature object. It is constructed with a feature options object
|
||||
in the layer.`features([options])` function. The Feautre object is refered to
|
||||
as _feature_ in the documentation.
|
||||
|
||||
TODO vmx 20110905: Support other geometry types than GeoJSON
|
||||
options:
|
||||
* geometry: A GeoJSON geometry
|
||||
* properties: Properties for the feature
|
||||
*/
|
||||
// Not in the pulic API docs: You can pass in as options:
|
||||
// * olFeature: This will wrap the olFeature in a MapQuery feature
|
||||
$.MapQuery.Feature = function(layer, options) {
|
||||
// The ID is the
|
||||
this._id = layer.map._createId();
|
||||
this.layer = layer;
|
||||
|
||||
// Feature already exists on the layer, it just needs to be wrapped
|
||||
// to an MapQuery feature
|
||||
if (options.olFeature) {
|
||||
this.olFeature = options.olFeature;
|
||||
}
|
||||
else {
|
||||
// XXX vmx 20110905: Different feature types might make sense:
|
||||
// (Geo)JSON, KML, WKT
|
||||
// vmx 2012-04-14: I changed my mind quite some time ago. We should onlu
|
||||
// support GeoJSON and let the user easily transfrom their format
|
||||
// (e.g. KML) to GeoJSON, before they add a feature to the layer
|
||||
var GeoJSON = new OpenLayers.Format.GeoJSON();
|
||||
var geometry = GeoJSON.parseGeometry(options.geometry);
|
||||
geometry.transform(
|
||||
new OpenLayers.Projection(this.layer.map.displaProjection),
|
||||
new OpenLayers.Projection(this.layer.map.projection));
|
||||
|
||||
this.olFeature = new OpenLayers.Feature.Vector(geometry,
|
||||
options.properties);
|
||||
}
|
||||
|
||||
// Modify the features to be more practical
|
||||
// e.g. copy properties that should be easily accessed from the
|
||||
// outside, out of the olLayer and to the feature level
|
||||
this.properties = $.extend(true, {}, this.olFeature.attributes);
|
||||
this.geometry = $.parseJSON(
|
||||
new OpenLayers.Format.GeoJSON().write(this.olFeature.geometry));
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
$.MapQuery.Feature.prototype = {
|
||||
/**
|
||||
###*feature*.`remove()`
|
||||
_version added 0.2.0_
|
||||
####**Description**: remove the feature from the layer
|
||||
|
||||
>Returns: layer (layer) or false
|
||||
|
||||
|
||||
The `.remove()` method allows us to remove a feature from the layer.
|
||||
It returns the `layer` object if the feature was removed, or `false` if the
|
||||
removal was prevented in the preremovefeature event.
|
||||
|
||||
// add a feature to a layer
|
||||
var feature = layer.features({geometry: {type: "Point", coordinates: [5.3, 7.4]}});
|
||||
// remove the feature again
|
||||
feature.remove();
|
||||
*/
|
||||
remove: function() {
|
||||
if (this.layer._triggerReturn('preremovefeature', [this])===false) {
|
||||
return false;
|
||||
}
|
||||
this.layer.olLayer.removeFeatures(this.olFeature);
|
||||
// The `removefeature` event is triggered by an OpenLayes event handler
|
||||
return this.layer;
|
||||
},
|
||||
/**
|
||||
###*feature*.`select(exclusive)`
|
||||
_version added 0.2.0_
|
||||
####**Description**: select a feature
|
||||
|
||||
**exclusive** (boolean, default: true) True means that all other features get
|
||||
deselectd
|
||||
|
||||
>Returns: layer (layer)
|
||||
|
||||
|
||||
The `.select()` method allows us to select a feature from the layer.
|
||||
A `featureselected` will be fired.
|
||||
|
||||
// add a feature to a layer
|
||||
var feature = layer.features({geometry: {type: "Point", coordinates: [5.3, 7.4]}});
|
||||
// select the feature again
|
||||
feature.select();
|
||||
*/
|
||||
select: function(exclusive) {
|
||||
if (exclusive===undefined || exclusive===true) {
|
||||
this.layer.map.selectFeatureControl.unselectAll();
|
||||
}
|
||||
this.layer.map.selectFeatureControl.select(this.olFeature);
|
||||
},
|
||||
/**
|
||||
###*feature*.`unselect()`
|
||||
_version added 0.2.0_
|
||||
####**Description**: unselect a feature
|
||||
|
||||
>Returns: layer (layer)
|
||||
|
||||
|
||||
The `.unselect()` method allows us to unselect a feature from the layer.
|
||||
A `featureunselected` will be fired.
|
||||
|
||||
// add a feature to a layer
|
||||
var feature = layer.features({geometry: {type: "Point", coordinates: [5.3, 7.4]}});
|
||||
// select the feature
|
||||
feature.select();
|
||||
// unselect the feature again
|
||||
feature.unselect();
|
||||
*/
|
||||
unselect: function() {
|
||||
this.layer.map.selectFeatureControl.unselect(this.olFeature);
|
||||
}
|
||||
};
|
||||
|
||||
|
@ -581,11 +990,11 @@ $.extend($.MapQuery.Layer, {
|
|||
_version added 0.1_
|
||||
####**Description**: create a Bing maps layer
|
||||
|
||||
**view** a string ['road','hybrid','satellite'] to define which Bing maps
|
||||
* **view** a string ['road','hybrid','satellite'] to define which Bing maps
|
||||
layer to use (default road)
|
||||
**key** Bing Maps API key for your application. Get you own at
|
||||
* **key** Bing Maps API key for your application. Get you own at
|
||||
http://bingmapsportal.com/
|
||||
**label** string with the name of the layer
|
||||
* **label** string with the name of the layer
|
||||
|
||||
|
||||
layers:[{
|
||||
|
@ -629,9 +1038,9 @@ http://bingmapsportal.com/
|
|||
_version added 0.1_
|
||||
####**Description**: create a Google maps layer
|
||||
|
||||
**view** a string ['road','hybrid','satellite'] to define which Google maps
|
||||
* **view** a string ['road','hybrid','satellite'] to define which Google maps
|
||||
layer to use (default road)
|
||||
**label** string with the name of the layer
|
||||
* **label** string with the name of the layer
|
||||
|
||||
|
||||
*Note* you need to include the google maps v3 API in your application by adding
|
||||
|
@ -669,7 +1078,7 @@ layer to use (default road)
|
|||
_version added 0.1_
|
||||
####**Description**: create a vector layer
|
||||
|
||||
**label** string with the name of the layer
|
||||
* **label** string with the name of the layer
|
||||
|
||||
|
||||
layers:[{
|
||||
|
@ -692,13 +1101,13 @@ _version added 0.1_
|
|||
_version added 0.1_
|
||||
####**Description**: create a JSON layer
|
||||
|
||||
**url** a string pointing to the location of the JSON data
|
||||
**strategies** a string ['bbox','cluster','filter','fixed','paging','refresh','save']
|
||||
* **url** a string pointing to the location of the JSON data
|
||||
* **strategies** a string ['bbox','cluster','filter','fixed','paging','refresh','save']
|
||||
stating which update strategy should be used (default fixed)
|
||||
(see also http://dev.openlayers.org/apidocs/files/OpenLayers/Strategy-js.html)
|
||||
**projection** a string with the projection of the JSON data (default EPSG:4326)
|
||||
**styleMap** {object} the style to be used to render the JSON data
|
||||
**label** string with the name of the layer
|
||||
* **projection** a string with the projection of the JSON data (default EPSG:4326)
|
||||
* **styleMap** {object} the style to be used to render the JSON data
|
||||
* **label** string with the name of the layer
|
||||
|
||||
|
||||
layers:[{
|
||||
|
@ -710,8 +1119,8 @@ stating which update strategy should be used (default fixed)
|
|||
*/
|
||||
json: function(options) {
|
||||
var o = $.extend(true, {}, $.fn.mapQuery.defaults.layer.all,
|
||||
$.fn.mapQuery.defaults.layer.vector,
|
||||
options);
|
||||
$.fn.mapQuery.defaults.layer.vector,
|
||||
options);
|
||||
this.isVector = true;
|
||||
var strategies = [];
|
||||
for (var i in o.strategies) {
|
||||
|
@ -742,26 +1151,31 @@ stating which update strategy should be used (default fixed)
|
|||
}
|
||||
}
|
||||
var protocol;
|
||||
// only use JSONP if we use http(s)
|
||||
if (o.url.match(/^https?:\/\//)!==null &&
|
||||
!$.MapQuery.util.sameOrigin(o.url)) {
|
||||
protocol = 'Script';
|
||||
}
|
||||
else {
|
||||
protocol = 'HTTP';
|
||||
}
|
||||
|
||||
var params = {
|
||||
protocol: new OpenLayers.Protocol[protocol]({
|
||||
url: o.url,
|
||||
format: new OpenLayers.Format.GeoJSON()
|
||||
}),
|
||||
strategies: strategies,
|
||||
projection: o.projection || 'EPSG:4326',
|
||||
styleMap: o.styleMap
|
||||
};
|
||||
|
||||
if (o.url) {
|
||||
// only use JSONP if we use http(s)
|
||||
if (o.url.match(/^https?:\/\//)!==null &&
|
||||
!$.MapQuery.util.sameOrigin(o.url)) {
|
||||
protocol = 'Script';
|
||||
}
|
||||
else {
|
||||
protocol = 'HTTP';
|
||||
}
|
||||
params.protocol = new OpenLayers.Protocol[protocol]({
|
||||
url: o.url,
|
||||
format: new OpenLayers.Format.GeoJSON()
|
||||
});
|
||||
};
|
||||
|
||||
var layer = new OpenLayers.Layer.Vector(o.label, params);
|
||||
return {
|
||||
layer: new OpenLayers.Layer.Vector(o.label, params),
|
||||
layer: layer,
|
||||
options: o
|
||||
};
|
||||
},
|
||||
|
@ -771,10 +1185,10 @@ _version added 0.1_
|
|||
####**Description**: create an OpenStreetMap layer
|
||||
|
||||
|
||||
**label** string with the name of the layer
|
||||
**url** A single URL (string) or an array of URLs to OSM-like server like
|
||||
* **label** string with the name of the layer
|
||||
* **url** A single URL (string) or an array of URLs to OSM-like server like
|
||||
Cloudmade
|
||||
**attribution** A string to put some attribution on the map
|
||||
* **attribution** A string to put some attribution on the map
|
||||
|
||||
layers:[{
|
||||
type: 'osm',
|
||||
|
@ -801,15 +1215,51 @@ Cloudmade
|
|||
};
|
||||
},
|
||||
/**
|
||||
###*layer* `{type:tms}`
|
||||
_version added 0.1_
|
||||
####**Description**: create an OpenStreetMap layer
|
||||
|
||||
|
||||
* **label** string with the name of the layer
|
||||
* **url** A single URL (string) or an array of URLs to the TMS end point
|
||||
* **layer** The identifier for the <TileMap> as advertised by the service.
|
||||
For example, if the service advertises a <TileMap> with ‘href=”http://tms.osgeo.org/1.0.0/vmap0”’,
|
||||
the layer property would be set to “vmap0”.
|
||||
* **format** The image format (default png)
|
||||
|
||||
layers:[{
|
||||
type: 'tms',
|
||||
url: 'http://tilecache.osgeo.org/wms-c/Basic.py/',
|
||||
layer: 'basic'
|
||||
}]
|
||||
|
||||
*/
|
||||
tms: function(options) {
|
||||
var o = $.extend(true, {}, $.fn.mapQuery.defaults.layer.all,
|
||||
$.fn.mapQuery.defaults.layer.tms,
|
||||
options);
|
||||
var label = options.label || undefined;
|
||||
var url = options.url || undefined;
|
||||
var params = {
|
||||
layername: o.layer,
|
||||
type: o.format
|
||||
};
|
||||
return {
|
||||
layer: new OpenLayers.Layer.TMS(label, url, params),
|
||||
options: o
|
||||
};
|
||||
},
|
||||
/**
|
||||
###*layer* `{type:wms}`
|
||||
_version added 0.1_
|
||||
####**Description**: create a WMS layer
|
||||
|
||||
**url** a string pointing to the location of the WMS service
|
||||
**layers** a string with the name of the WMS layer(s)
|
||||
**format** a string with format of the WMS image (default image/jpeg)
|
||||
**transparent** a boolean for requesting images with transparency
|
||||
**label** string with the name of the layer
|
||||
* **url** a string pointing to the location of the WMS service
|
||||
* **layers** a string with the name of the WMS layer(s)
|
||||
* **format** a string with format of the WMS image (default image/jpeg)
|
||||
* **transparent** a boolean for requesting images with transparency
|
||||
* **label** string with the name of the layer
|
||||
* **wms_parameters** an hashtable of extra GetMap query string parameters and parameter values
|
||||
|
||||
|
||||
layers:[{
|
||||
|
@ -828,6 +1278,9 @@ _version added 0.1_
|
|||
transparent: o.transparent,
|
||||
format: o.format
|
||||
};
|
||||
if(typeof o.wms_parameters != "undefined"){
|
||||
params = $.extend(params, o.wms_parameters);
|
||||
}
|
||||
return {
|
||||
layer: new OpenLayers.Layer.WMS(o.label, o.url, params, o),
|
||||
options: o
|
||||
|
@ -839,11 +1292,11 @@ _version added 0.1_
|
|||
_version added 0.1_
|
||||
####**Description**: create a WMTS (tiling) layer
|
||||
|
||||
**url** a string pointing to the location of the WMTS service
|
||||
**layer** a string with the name of the WMTS layer
|
||||
**matrixSet** a string with one of the advertised matrix set identifiers
|
||||
**style** a string with one of the advertised layer styles
|
||||
**label** string with the name of the layer
|
||||
* **url** a string pointing to the location of the WMTS service
|
||||
* **layer** a string with the name of the WMTS layer
|
||||
* **matrixSet** a string with one of the advertised matrix set identifiers
|
||||
* **style** a string with one of the advertised layer styles
|
||||
* **label** string with the name of the layer
|
||||
|
||||
|
||||
layers:[{
|
||||
|
@ -953,13 +1406,17 @@ $.fn.mapQuery.defaults = {
|
|||
transitionEffect: 'resize',
|
||||
sphericalMercator: true
|
||||
},
|
||||
tms: {
|
||||
transitionEffect: 'resize',
|
||||
format: 'png'
|
||||
},
|
||||
raster: {
|
||||
// options for raster layers
|
||||
transparent: true
|
||||
},
|
||||
vector: {
|
||||
// options for vector layers
|
||||
strategies: ['fixed']
|
||||
strategies: ['bbox']
|
||||
},
|
||||
wmts: {
|
||||
format: 'image/jpeg',
|
||||
|
|
87
view/theme/diabook/js/jquery.mapquery.legend.js
Normal file
87
view/theme/diabook/js/jquery.mapquery.legend.js
Normal file
|
@ -0,0 +1,87 @@
|
|||
/* Copyright (c) 2011 by MapQuery Contributors (see AUTHORS for
|
||||
* full list of contributors). Published under the MIT license.
|
||||
* See https://github.com/mapquery/mapquery/blob/master/LICENSE for the
|
||||
* full text of the license. */
|
||||
|
||||
/**
|
||||
#jquery.mapquery.legend.js
|
||||
A plugin on mapquery.core to add a legend to a layer. It will check if the layer
|
||||
is within a valid extent and zoom range. And if not will return an error message.
|
||||
*/
|
||||
|
||||
(function($, MQ) {
|
||||
$.extend( $.fn.mapQuery.defaults.layer.all, {
|
||||
legend: {
|
||||
url: '',
|
||||
msg: ''
|
||||
}
|
||||
});
|
||||
//possible error messages to display in the legend
|
||||
LEGEND_ERRORS= ['E_ZOOMOUT', 'E_ZOOMIN', 'E_OUTSIDEBOX'];
|
||||
$.extend(MQ.Layer.prototype, {
|
||||
/**
|
||||
###**layer**.`legend([options])`
|
||||
_version added 0.1_
|
||||
####**Description**: get/set the legend of a layer
|
||||
|
||||
**options** url:url the url to the legend image
|
||||
|
||||
>Returns: {url:url, msg:'E\_ZOOMOUT' | 'E\_ZOOMIN' | 'E\_OUTSIDEBOX' | ''}
|
||||
|
||||
|
||||
The `.legend()` function allows us to attach a legend image to a layer. It will
|
||||
also check if the layer is not visible due to wrong extent or zoom level.
|
||||
It will return an error message which can be used to notify the user.
|
||||
|
||||
|
||||
var legend = layer.legend(); //get the current legend
|
||||
//set the legend url to legendimage.png
|
||||
layer.legend({url:'legendimage.png'})
|
||||
|
||||
*/
|
||||
//get/set the legend object
|
||||
legend: function(options) {
|
||||
//get the legend object
|
||||
var center = this.map.center();
|
||||
if (arguments.length===0) {
|
||||
this._checkZoom(center);
|
||||
//if zoom = ok, check box
|
||||
if(this.options.legend.msg==''){
|
||||
this._checkBox(center);
|
||||
}
|
||||
return this.options.legend;
|
||||
}
|
||||
//set the legend url
|
||||
if (options.url!==undefined) {
|
||||
this.options.legend.url = options.url;
|
||||
return this.options.legend;
|
||||
}
|
||||
},
|
||||
//Check if the layer has a maximum box set and if the current box
|
||||
//is outside these settings, set the legend.msg accordingly
|
||||
_checkBox: function(center){
|
||||
var maxExtent = this.options.maxExtent;
|
||||
if(maxExtent!==undefined) {
|
||||
var mapBounds = new OpenLayers.Bounds(
|
||||
center.box[0],center.box[1],center.box[2],center.box[3]);
|
||||
var layerBounds = new OpenLayers.Bounds(
|
||||
maxExtent[0],maxExtent[1],maxExtent[2],maxExtent[3]);
|
||||
var inside = layerBounds.containsBounds(mapBounds, true);
|
||||
this.options.legend.msg = inside?'':LEGEND_ERRORS[2];
|
||||
}
|
||||
},
|
||||
//Check if the layer has a minimum or maximum zoom set and if the
|
||||
//current zoom is outside these settings, set the legend.msg accordingly
|
||||
_checkZoom: function(center){
|
||||
var zoom = center.zoom;
|
||||
var maxZoom = this.options.maxZoom;
|
||||
var minZoom = this.options.minZoom;
|
||||
this.options.legend.msg=(
|
||||
maxZoom!==undefined&&maxZoom<zoom)? LEGEND_ERRORS[0]:'';
|
||||
this.options.legend.msg=(
|
||||
minZoom!==undefined&&minZoom>zoom)? LEGEND_ERRORS[1]:'';
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
})(jQuery, $.MapQuery);
|
310
view/theme/diabook/js/jquery.mapquery.mqLayerManager.js
Normal file
310
view/theme/diabook/js/jquery.mapquery.mqLayerManager.js
Normal file
|
@ -0,0 +1,310 @@
|
|||
/* Copyright (c) 2011 by MapQuery Contributors (see AUTHORS for
|
||||
* full list of contributors). Published under the MIT license.
|
||||
* See https://github.com/mapquery/mapquery/blob/master/LICENSE for the
|
||||
* full text of the license. */
|
||||
|
||||
/**
|
||||
#jquery.mapquery.mqLayerManager.js
|
||||
The file containing the mqLayerManager Widget
|
||||
|
||||
### *$('selector')*.`mqLayerManager([options])`
|
||||
_version added 0.1_
|
||||
####**Description**: create a widget to manage layers
|
||||
|
||||
+ **options**:
|
||||
- **map**: the mapquery instance
|
||||
- **title**: Title that will be displayed at the top of the
|
||||
layer manager (default: Layer Manager)
|
||||
|
||||
|
||||
>Returns: widget
|
||||
|
||||
>Requires: jquery.mapquery.legend.js
|
||||
|
||||
|
||||
The mqLayerManager allows us to control the order, opacity and visibility
|
||||
of layers. We can also remove layers. It also shows the legend of the layer if
|
||||
available and the error messages provided by the legend plugin. It listens to
|
||||
layerchange event for order, transparancy and opacity changes. It listens to
|
||||
addlayer and removelayer events to keep track which layers are on the map.
|
||||
|
||||
|
||||
$('#layermanager').mqLayerManager({map:'#map'});
|
||||
|
||||
|
||||
*/
|
||||
(function($) {
|
||||
$.template('mqLayerManager',
|
||||
'<div class="mq-layermanager ui-widget-content ">'+
|
||||
'</div>');
|
||||
|
||||
$.template('mqLayerManagerElement',
|
||||
'<div class="mq-layermanager-element ui-widget-content ui-corner-all" id="mq-layermanager-element-${id}">'+
|
||||
'<div class="mq-layermanager-element-header ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">'+
|
||||
'<span class="mq-layermanager-label ui-dialog-title">${label}</span>'+
|
||||
'<a class="ui-dialog-titlebar-close ui-corner-all" href="#" role="button">'+
|
||||
'<span class="ui-icon ui-icon-closethick">close</span></a></div>'+
|
||||
'<div class="mq-layermanager-element-content">'+
|
||||
'<div class="mq-layermanager-element-visibility">'+
|
||||
'<input type="checkbox" class="mq-layermanager-element-vischeckbox" id="${id}-visibility" {{if visible}}checked="${visible}"{{/if}} />'+
|
||||
'<div class="mq-layermanager-element-slider-container">'+
|
||||
'<div class="mq-layermanager-element-slider"></div></div>'+
|
||||
'</div>'+
|
||||
'<div class="mq-layermanager-element-legend">'+
|
||||
'{{if imgUrl}}'+
|
||||
'<img src="${imgUrl}" style="opacity:${opacity}"/>'+
|
||||
'{{/if}}'+
|
||||
'{{if errMsg}}'+
|
||||
'${errMsg}'+
|
||||
'{{/if}}'+
|
||||
'</div>'+
|
||||
'</div>'+
|
||||
'</div>');
|
||||
|
||||
$.widget("mapQuery.mqLayerManager", {
|
||||
options: {
|
||||
// The MapQuery instance
|
||||
map: undefined,
|
||||
|
||||
// Title that will be displayed at the top of the popup
|
||||
title: "Layer Manager"
|
||||
},
|
||||
_create: function() {
|
||||
var map;
|
||||
var zoom;
|
||||
var numzoomlevels;
|
||||
var self = this;
|
||||
var element = this.element;
|
||||
|
||||
//get the mapquery object
|
||||
map = $(this.options.map).data('mapQuery');
|
||||
|
||||
this.element.addClass('ui-widget ui-helper-clearfix ' +
|
||||
'ui-corner-all');
|
||||
|
||||
var lmElement = $.tmpl('mqLayerManager').appendTo(element);
|
||||
element.find('.ui-icon-closethick').button();
|
||||
|
||||
lmElement.sortable({
|
||||
axis:'y',
|
||||
handle: '.mq-layermanager-element-header',
|
||||
update: function(event, ui) {
|
||||
var layerNodes = ui.item.siblings().andSelf();
|
||||
var num = layerNodes.length-1;
|
||||
layerNodes.each(function(i) {
|
||||
var layer = $(this).data('layer');
|
||||
var pos = num-i;
|
||||
self._position(layer, pos);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
//these layers are already added to the map as such won't trigger
|
||||
//and event, we call the draw function directly
|
||||
$.each(map.layers().reverse(), function(){
|
||||
self._layerAdded(lmElement, this);
|
||||
});
|
||||
|
||||
element.delegate('.mq-layermanager-element-vischeckbox',
|
||||
'change',function() {
|
||||
var checkbox = $(this);
|
||||
var element = checkbox.parents('.mq-layermanager-element');
|
||||
var layer = element.data('layer');
|
||||
var self = element.data('self');
|
||||
self._visible(layer,checkbox.is(':checked'));
|
||||
});
|
||||
|
||||
element.delegate('.ui-icon-closethick', 'click', function() {
|
||||
var control = $(this).parents('.mq-layermanager-element');
|
||||
self._remove(control.data('layer'));
|
||||
});
|
||||
|
||||
//binding events
|
||||
map.bind("addlayer",
|
||||
{widget:self,control:lmElement},
|
||||
self._onLayerAdd);
|
||||
|
||||
map.bind("removelayer",
|
||||
{widget:self,control:lmElement},
|
||||
self._onLayerRemove);
|
||||
|
||||
map.bind("changelayer",
|
||||
{widget:self,map:map,control:lmElement},
|
||||
self._onLayerChange);
|
||||
|
||||
map.bind("moveend",
|
||||
{widget:self,map:map,control:lmElement},
|
||||
self._onMoveEnd);
|
||||
},
|
||||
_destroy: function() {
|
||||
this.element.removeClass(' ui-widget ui-helper-clearfix ' +
|
||||
'ui-corner-all')
|
||||
.empty();
|
||||
},
|
||||
//functions that actually change things on the map
|
||||
//call these from within the widget to do stuff on the map
|
||||
//their actions will trigger events on the map and in return
|
||||
//will trigger the _layer* functions
|
||||
_add: function(map,layer) {
|
||||
map.layers(layer);
|
||||
},
|
||||
|
||||
_remove: function(layer) {
|
||||
layer.remove();
|
||||
},
|
||||
|
||||
_position: function(layer, pos) {
|
||||
layer.position(pos);
|
||||
},
|
||||
|
||||
_visible: function(layer, vis) {
|
||||
layer.visible(vis);
|
||||
},
|
||||
|
||||
_opacity: function(layer,opac) {
|
||||
layer.opacity(opac);
|
||||
},
|
||||
|
||||
//functions that change the widget
|
||||
_layerAdded: function(widget, layer) {
|
||||
var self = this;
|
||||
var error = layer.legend().msg;
|
||||
var url;
|
||||
switch(error){
|
||||
case '':
|
||||
url =layer.legend().url;
|
||||
if(url==''){error='No legend for this layer';}
|
||||
break;
|
||||
case 'E_ZOOMOUT':
|
||||
error = 'Please zoom out to see this layer';
|
||||
break;
|
||||
case 'E_ZOOMIN':
|
||||
error = 'Please zoom in to see this layer';
|
||||
break;
|
||||
case 'E_OUTSIDEBOX':
|
||||
error = 'This layer is outside the current view';
|
||||
break;
|
||||
}
|
||||
|
||||
var layerElement = $.tmpl('mqLayerManagerElement',{
|
||||
id: layer.id,
|
||||
label: layer.label,
|
||||
position: layer.position(),
|
||||
visible: layer.visible(),
|
||||
imgUrl: url,
|
||||
opacity: layer.visible()?layer.opacity():0,
|
||||
errMsg: error
|
||||
})
|
||||
// save layer layer in the DOM, so we can easily
|
||||
// hide/show/delete the layer with live events
|
||||
.data('layer', layer)
|
||||
.data('self',self)
|
||||
.prependTo(widget);
|
||||
|
||||
$(".mq-layermanager-element-slider", layerElement).slider({
|
||||
max: 100,
|
||||
step: 1,
|
||||
value: layer.visible()?layer.opacity()*100:0,
|
||||
slide: function(event, ui) {
|
||||
var layer = layerElement.data('layer');
|
||||
var self = layerElement.data('self');
|
||||
self._opacity(layer,ui.value/100);
|
||||
},
|
||||
//using the slide event to check for the checkbox often gives errors.
|
||||
change: function(event, ui) {
|
||||
var layer = layerElement.data('layer');
|
||||
var self = layerElement.data('self');
|
||||
if(ui.value>=0.01) {
|
||||
if(!layer.visible()){layer.visible(true);}
|
||||
}
|
||||
if(ui.value<0.01) {
|
||||
if(layer.visible()){layer.visible(false);}
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
_layerRemoved: function(widget, id) {
|
||||
var control = $("#mq-layermanager-element-"+id);
|
||||
control.fadeOut(function() {
|
||||
$(this).remove();
|
||||
});
|
||||
},
|
||||
|
||||
_layerPosition: function(widget, layer) {
|
||||
var layerNodes = widget.element.find('.mq-layermanager-element');
|
||||
var num = layerNodes.length-1;
|
||||
var tmpNodes = [];
|
||||
tmpNodes.length = layerNodes.length;
|
||||
layerNodes.each(function() {
|
||||
var layer = $(this).data('layer');
|
||||
var pos = num-layer.position();
|
||||
tmpNodes[pos]= this;
|
||||
});
|
||||
for (i=0;i<tmpNodes.length;i++) {
|
||||
layerNodes.parent().append(tmpNodes[i]);
|
||||
}
|
||||
},
|
||||
|
||||
_layerVisible: function(widget, layer) {
|
||||
var layerElement =
|
||||
widget.element.find('#mq-layermanager-element-'+layer.id);
|
||||
var checkbox =
|
||||
layerElement.find('.mq-layermanager-element-vischeckbox');
|
||||
checkbox[0].checked = layer.visible();
|
||||
//update the opacity slider as well
|
||||
var slider = layerElement.find('.mq-layermanager-element-slider');
|
||||
var value = layer.visible()?layer.opacity()*100: 0;
|
||||
slider.slider('value',value);
|
||||
|
||||
//update legend image
|
||||
layerElement.find('.mq-layermanager-element-legend img').css(
|
||||
{visibility:layer.visible()?true:'hidden'});
|
||||
},
|
||||
|
||||
_layerOpacity: function(widget, layer) {
|
||||
var layerElement = widget.element.find(
|
||||
'#mq-layermanager-element-'+layer.id);
|
||||
var slider = layerElement.find(
|
||||
'.mq-layermanager-element-slider');
|
||||
slider.slider('value',layer.opacity()*100);
|
||||
//update legend image
|
||||
layerElement.find(
|
||||
'.mq-layermanager-element-legend img').css(
|
||||
{opacity:layer.opacity()});
|
||||
},
|
||||
|
||||
_moveEnd: function (widget,lmElement,map) {
|
||||
lmElement.empty();
|
||||
$.each(map.layers().reverse(), function(){
|
||||
widget._layerAdded(lmElement, this);
|
||||
});
|
||||
},
|
||||
|
||||
//functions bind to the map events
|
||||
_onLayerAdd: function(evt, layer) {
|
||||
evt.data.widget._layerAdded(evt.data.control,layer);
|
||||
},
|
||||
|
||||
_onLayerRemove: function(evt, layer) {
|
||||
evt.data.widget._layerRemoved(evt.data.control,layer.id);
|
||||
},
|
||||
|
||||
_onLayerChange: function(evt, layer, property) {
|
||||
switch(property) {
|
||||
case 'opacity':
|
||||
evt.data.widget._layerOpacity(evt.data.widget,layer);
|
||||
break;
|
||||
case 'position':
|
||||
evt.data.widget._layerPosition(evt.data.widget,layer);
|
||||
break;
|
||||
case 'visibility':
|
||||
evt.data.widget._layerVisible(evt.data.widget,layer);
|
||||
break;
|
||||
}
|
||||
},
|
||||
_onMoveEnd: function(evt) {
|
||||
evt.data.widget._moveEnd(evt.data.widget,evt.data.control,evt.data.map);
|
||||
}
|
||||
});
|
||||
})(jQuery);
|
|
@ -44,8 +44,8 @@ $.widget("mapQuery.mqMousePosition", {
|
|||
|
||||
// The number of decimals for the coordinates
|
||||
// default: 2
|
||||
// TODO: JCB20110630 use dynamic precision based on the pixel
|
||||
// resolution, no need to configure precision
|
||||
// TODO: JCB20110630 use dynamic precision based on the pixel
|
||||
// resolution, no need to configure precision
|
||||
precision: 2,
|
||||
|
||||
// The label of the x-value
|
||||
|
@ -57,51 +57,36 @@ $.widget("mapQuery.mqMousePosition", {
|
|||
|
||||
},
|
||||
_create: function() {
|
||||
var map;
|
||||
var self = this;
|
||||
var element = this.element;
|
||||
var mousepos;
|
||||
|
||||
//get the mapquery object
|
||||
map = $(this.options.map).data('mapQuery');
|
||||
this.map = $(this.options.map).data('mapQuery');
|
||||
|
||||
map.bind("mousemove",
|
||||
{widget:self,map:map},
|
||||
self._onMouseMove);
|
||||
|
||||
|
||||
$.tmpl('mqMousePosition',{
|
||||
mouseposition:mousepos
|
||||
}).appendTo(element);
|
||||
this.map.element.bind('mousemove', {widget: this}, this._onMousemove);
|
||||
$.tmpl('mqMousePosition', {}).appendTo(this.element);
|
||||
|
||||
},
|
||||
_destroy: function() {
|
||||
this.element.removeClass(' ui-widget ui-helper-clearfix ' +
|
||||
this.element.removeClass('ui-widget ui-helper-clearfix ' +
|
||||
'ui-corner-all')
|
||||
.empty();
|
||||
},
|
||||
_mouseMoved: function(data, element, map) {
|
||||
var x = data.layerX;
|
||||
var y = data.layerY;
|
||||
var mapProjection = map.options.projection;
|
||||
var displayProjection = map.options.projection;
|
||||
_onMousemove: function(evt) {
|
||||
var self = evt.data.widget;
|
||||
var x = evt.pageX;
|
||||
var y = evt.pageY;
|
||||
var mapProjection = new OpenLayers.Projection(self.map.projection);
|
||||
var displayProjection = new OpenLayers.Projection(
|
||||
self.map.displayProjection);
|
||||
var pos = self.map.olMap.getLonLatFromLayerPx(
|
||||
new OpenLayers.Pixel(x, y));
|
||||
//if the coordinates should be displayed in something else,
|
||||
//set them via the map displayProjection option
|
||||
var pos = map.olMap.getLonLatFromLayerPx(new OpenLayers.Pixel(x,y));
|
||||
if(map.options.displayProjection) {
|
||||
displayProjection = map.options.displayProjection;
|
||||
pos=pos.transform(
|
||||
new OpenLayers.Projection(mapProjection),
|
||||
new OpenLayers.Projection(displayProjection));
|
||||
//set them via the map displayProjection option
|
||||
if(!mapProjection.equals(self.map.displayProjection)) {
|
||||
pos = pos.transform(mapProjection, displayProjection);
|
||||
}
|
||||
$("#id_diabook_ELPosX", element).val(
|
||||
this.options.x+pos.lon.toFixed(this.options.precision));
|
||||
$("#id_diabook_ELPosY", element).val(
|
||||
this.options.y+pos.lat.toFixed(this.options.precision));
|
||||
},
|
||||
|
||||
_onMouseMove: function(evt, data) {
|
||||
evt.data.widget._mouseMoved(data,evt.data.control,evt.data.map);
|
||||
$("#id_diabook_ELPosX", document.element).val(
|
||||
self.options.x + pos.lon.toFixed(self.options.precision));
|
||||
$("#id_diabook_ELPosY", document.element).val(
|
||||
self.options.y + pos.lat.toFixed(self.options.precision));
|
||||
}
|
||||
});
|
||||
})(jQuery);
|
||||
|
|
|
@ -170,7 +170,7 @@ if ($color=="dark") $color_path = "/diabook-dark/";
|
|||
$a->page['htmlhead'] .= sprintf('<script language="JavaScript" src="%s"></script>', $cookieJS);
|
||||
|
||||
//load jquery.ae.image.resize.js
|
||||
$imageresizeJS = $a->get_baseurl($ssl_state)."/view/theme/diabook/js/jquery.ae.image.resize.js";
|
||||
$imageresizeJS = $a->get_baseurl($ssl_state)."/view/theme/diabook/js/jquery.ae.image.resize.min.js";
|
||||
$a->page['htmlhead'] .= sprintf('<script language="JavaScript" src="%s" ></script>', $imageresizeJS);
|
||||
|
||||
//load jquery.ui.js
|
||||
|
@ -198,6 +198,10 @@ if ($color=="dark") $color_path = "/diabook-dark/";
|
|||
$a->page['htmlhead'] .= sprintf('<script language="JavaScript" src="%s" ></script>', $mqmouseposJS);
|
||||
$mousewheelJS = $a->get_baseurl($ssl_state)."/view/theme/diabook/js/jquery.mousewheel.js";
|
||||
$a->page['htmlhead'] .= sprintf('<script language="JavaScript" src="%s" ></script>', $mousewheelJS);
|
||||
$mqlegendJS = $a->get_baseurl($ssl_state)."/view/theme/diabook/js/jquery.mapquery.legend.js";
|
||||
$a->page['htmlhead'] .= sprintf('<script language="JavaScript" src="%s" ></script>', $mqlegendJS);
|
||||
$mqlayermanagerJS = $a->get_baseurl($ssl_state)."/view/theme/diabook/js/jquery.mapquery.mqLayerManager.js";
|
||||
$a->page['htmlhead'] .= sprintf('<script language="JavaScript" src="%s" ></script>', $mqlayermanagerJS);
|
||||
|
||||
}
|
||||
|
||||
|
@ -248,9 +252,12 @@ if ($color=="dark") $color_path = "/diabook-dark/";
|
|||
});
|
||||
|
||||
function open_mapcontrol() {
|
||||
$("div#mapcontrol").attr("style","display: block;width:900px;height:600px;");
|
||||
$("#map2").mapQuery({layers:[{type:"osm"}],
|
||||
center:({zoom:'.$ELZoom.',position:['.$ELPosX.','.$ELPosY.']})});
|
||||
$("div#mapcontrol").attr("style","display: block;width:900px;height:900px;");
|
||||
$("#map2").mapQuery({
|
||||
layers:[{type:"osm", label:"OpenStreetMap" },
|
||||
{type:"wms", label:"Population density 2010", legend:{url:"http://mapserver.edugis.nl/cgi-bin/mapserv?map=maps/edugis/cache/population.map&version=1.1.1&service=WMS&request=GetLegendGraphic&layer=Bevolkingsdichtheid_2010&format=image/png"}, url:"http://t1.edugis.nl/tiles/tilecache.py?map=maps/edugis/cache/population.map",
|
||||
layers:"Bevolkingsdichtheid_2010" }],
|
||||
center:({zoom:'.$ELZoom.',position:['.$ELPosX.','.$ELPosY.']})});
|
||||
|
||||
$("#mouseposition").mqMousePosition({
|
||||
map: "#map2",
|
||||
|
@ -259,13 +266,16 @@ if ($color=="dark") $color_path = "/diabook-dark/";
|
|||
precision:4
|
||||
});
|
||||
|
||||
$("#layermanager").mqLayerManager({map:"#map2"});
|
||||
|
||||
map = $("#map2").mapQuery().data("mapQuery");
|
||||
textarea = document.getElementById("id_diabook_ELZoom");
|
||||
|
||||
textarea.value = "'.$ELZoom.'";
|
||||
$("#map2").bind("mousewheel", function(event, delta) {
|
||||
if (delta > 0 || delta < 0){
|
||||
textarea.value = map.center().zoom; }
|
||||
if (delta > 0 && textarea.value < 18){
|
||||
textarea.value = textarea.value - delta*-1; }
|
||||
if (delta < 0 && textarea.value > "0"){
|
||||
textarea.value = textarea.value - delta*-1; }
|
||||
});
|
||||
};
|
||||
</script>';
|
||||
|
@ -571,7 +581,7 @@ if ($color=="dark") $color_path = "/diabook-dark/";
|
|||
}}
|
||||
|
||||
// last 12 photos
|
||||
if($close_photos != "1") {
|
||||
if($close_lastphotos != "1") {
|
||||
$aside['$photos_title'] = t('Last photos');
|
||||
$aside['$photos_items'] = array();
|
||||
$r = q("SELECT `photo`.`id`, `photo`.`resource-id`, `photo`.`scale`, `photo`.`desc`, `user`.`nickname`, `user`.`username` FROM
|
||||
|
|
Loading…
Reference in a new issue