Merge https://github.com/friendica/friendica into pull
This commit is contained in:
friendica
commit
99e4ea19e7
8 changed files with 1040 additions and 156 deletions
|
|
@ -105,3 +105,17 @@ blockquote {
|
||||||
input#acl-search {
|
input#acl-search {
|
||||||
background-color: #aaa;
|
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;">
|
<div id="mapcontrol" style="display:none;">
|
||||||
<form id="mapform" action="network" method="post" >
|
<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)
|
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).
|
and markers(events, demos, friends, anything, that is intersting for you).
|
||||||
These layer and markers should be importable and deletable by the user.</p>
|
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
|
<p>this is build with <b>mapquery</b> http://mapquery.org/ and
|
||||||
<b>openlayers</b>http://openlayers.org/</p>
|
<b>openlayers</b>http://openlayers.org/</p>
|
||||||
</span>
|
</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>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -17,11 +17,11 @@ the matched element
|
||||||
**options** an object of key-value pairs with options for the map. Possible
|
**options** an object of key-value pairs with options for the map. Possible
|
||||||
pairs are:
|
pairs are:
|
||||||
|
|
||||||
* **layers** (array of MapQuery.Layer *or* MapQuery.Layer): Either an array
|
* **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]}):
|
* **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`
|
Initially go to a certain location. At least one layer (in the `layers`
|
||||||
* option) needs to be specified.
|
option) needs to be specified.
|
||||||
|
|
||||||
> Returns: $('selector') (jQuery object)
|
> Returns: $('selector') (jQuery object)
|
||||||
|
|
||||||
|
|
@ -68,6 +68,8 @@ $.MapQuery.Map = function(element, options) {
|
||||||
delete this.olMapOptions.layers;
|
delete this.olMapOptions.layers;
|
||||||
delete this.olMapOptions.maxExtent;
|
delete this.olMapOptions.maxExtent;
|
||||||
delete this.olMapOptions.zoomToMaxExtent;
|
delete this.olMapOptions.zoomToMaxExtent;
|
||||||
|
delete this.olMapOptions.center;
|
||||||
|
|
||||||
//TODO SMO20110630 the maxExtent is in mapprojection, decide whether or
|
//TODO SMO20110630 the maxExtent is in mapprojection, decide whether or
|
||||||
//not we need to change it to displayProjection
|
//not we need to change it to displayProjection
|
||||||
this.maxExtent = this.options.maxExtent;
|
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.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.IMAGE_RELOAD_ATTEMPTS = 3;
|
||||||
OpenLayers.Util.onImageLoadErrorColor = "transparent";
|
OpenLayers.Util.onImageLoadErrorColor = "transparent";
|
||||||
|
|
||||||
|
|
@ -96,14 +101,46 @@ $.MapQuery.Map = function(element, options) {
|
||||||
|
|
||||||
// To bind and trigger jQuery events
|
// To bind and trigger jQuery events
|
||||||
this.events = $({});
|
this.events = $({});
|
||||||
// create triggers for all OpenLayers map events
|
|
||||||
var events = {};
|
this.handlers = {
|
||||||
$.each(this.olMap.EVENT_TYPES, function(i, evt) {
|
// Triggers the jQuery events, after the OpenLayers events
|
||||||
events[evt] = function() {
|
// happened without any further processing
|
||||||
self.events.trigger(evt, arguments);
|
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
|
// Add layers to the map
|
||||||
if (this.options.layers!==undefined) {
|
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
|
**options** an object of key-value pairs with options to create one or
|
||||||
more layers
|
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
|
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
|
resulting layer(s). We can also use it to retrieve all layers currently attached
|
||||||
to the map.
|
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 osm = map.layers({type:'osm'}); //add an osm layer to the map
|
||||||
var layers = map.layers(); //get all layers of the map
|
var layers = map.layers(); //get all layers of the map
|
||||||
|
|
@ -156,7 +197,7 @@ to the map.
|
||||||
else {
|
else {
|
||||||
return $.map(options, function(layer) {
|
return $.map(options, function(layer) {
|
||||||
return self._addLayer(layer);
|
return self._addLayer(layer);
|
||||||
});
|
}).reverse();
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
|
|
@ -182,27 +223,43 @@ to the map.
|
||||||
_addLayer: function(options) {
|
_addLayer: function(options) {
|
||||||
var id = this._createId();
|
var id = this._createId();
|
||||||
var layer = new $.MapQuery.Layer(this, id, options);
|
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;
|
this.layersList[id] = layer;
|
||||||
if (layer.isVector) {
|
if (layer.isVector) {
|
||||||
this.vectorLayers.push(id);
|
this.vectorLayers.push(id);
|
||||||
}
|
}
|
||||||
this._updateSelectFeatureControl(this.vectorLayers);
|
this._updateSelectFeatureControl(this.vectorLayers);
|
||||||
this.events.trigger('mqAddLayer',layer);
|
|
||||||
|
layer.trigger('addlayer');
|
||||||
return layer;
|
return layer;
|
||||||
},
|
},
|
||||||
// Creates a new unique ID for a layer
|
// Creates a new unique ID for a layer
|
||||||
_createId: function() {
|
_createId: function() {
|
||||||
return 'mapquery' + this.idCounter++;
|
return 'mapquery_' + this.idCounter++;
|
||||||
},
|
},
|
||||||
_removeLayer: function(id) {
|
_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
|
// remove id from vectorlayer if it is there list
|
||||||
this.vectorLayers = $.grep(this.vectorLayers, function(elem) {
|
this.vectorLayers = $.grep(this.vectorLayers, function(elem) {
|
||||||
return elem != id;
|
return elem != id;
|
||||||
});
|
});
|
||||||
this._updateSelectFeatureControl(this.vectorLayers);
|
this._updateSelectFeatureControl(this.vectorLayers);
|
||||||
this.events.trigger('mqRemoveLayer',id);
|
this.olMap.removeLayer(layer.olLayer);
|
||||||
delete this.layersList[id];
|
|
||||||
// XXX vmx: shouldn't the layer be destroyed() properly?
|
// XXX vmx: shouldn't the layer be destroyed() properly?
|
||||||
|
delete this.layersList[id];
|
||||||
|
|
||||||
|
layer.trigger('removelayer');
|
||||||
return this;
|
return this;
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
|
|
@ -210,13 +267,13 @@ to the map.
|
||||||
_version added 0.1_
|
_version added 0.1_
|
||||||
####**Description**: get/set the extent, zoom and position of the map
|
####**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
|
to center the map at
|
||||||
**zoom** the zoomlevel as integer to zoom the map to
|
* **zoom** the zoomlevel as integer to zoom the map to
|
||||||
**box** an array with the lower left x, lower left y, upper right x,
|
* **box** an array with the lower left x, lower left y, upper right x,
|
||||||
upper right y to zoom the map to,
|
upper right y to zoom the map to,
|
||||||
this will take precedent when conflicting with any of the above values
|
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
|
the displayProjection
|
||||||
|
|
||||||
>Returns: {position: [x,y], zoom: z(int), box: [llx,lly,urx,ury]}
|
>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) {
|
center: function (options) {
|
||||||
var position;
|
var position;
|
||||||
var mapProjection;
|
var mapProjection = new OpenLayers.Projection(this.projection);
|
||||||
// Determine source projection
|
// Determine source projection
|
||||||
var sourceProjection = null;
|
var sourceProjection = null;
|
||||||
var zoom;
|
var zoom;
|
||||||
|
|
@ -249,7 +306,7 @@ extent from the map. The coordinates are returned in displayProjection.
|
||||||
'OpenLayers.Projection' ? options.projection :
|
'OpenLayers.Projection' ? options.projection :
|
||||||
new OpenLayers.Projection(options.projection);
|
new OpenLayers.Projection(options.projection);
|
||||||
} else {
|
} else {
|
||||||
var displayProjection = this.olMap.displayProjection;
|
var displayProjection = this.displayProjection;
|
||||||
if(!displayProjection) {
|
if(!displayProjection) {
|
||||||
// source == target
|
// source == target
|
||||||
sourceProjection = new OpenLayers.Projection('EPSG:4326');
|
sourceProjection = new OpenLayers.Projection('EPSG:4326');
|
||||||
|
|
@ -265,8 +322,6 @@ extent from the map. The coordinates are returned in displayProjection.
|
||||||
position = this.olMap.getCenter();
|
position = this.olMap.getCenter();
|
||||||
zoom = this.olMap.getZoom();
|
zoom = this.olMap.getZoom();
|
||||||
box = this.olMap.getExtent();
|
box = this.olMap.getExtent();
|
||||||
mapProjection = this.olMap.getProjectionObject();
|
|
||||||
|
|
||||||
|
|
||||||
if (!mapProjection.equals(sourceProjection)) {
|
if (!mapProjection.equals(sourceProjection)) {
|
||||||
position.transform(mapProjection, 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
|
// Zoom to the extent of the box
|
||||||
if (options.box!==undefined) {
|
if (options.box!==undefined) {
|
||||||
mapProjection = this.olMap.getProjectionObject();
|
|
||||||
box = new OpenLayers.Bounds(
|
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)) {
|
if (!mapProjection.equals(sourceProjection)) {
|
||||||
box.transform(sourceProjection,mapProjection);
|
box.transform(sourceProjection,mapProjection);
|
||||||
}
|
}
|
||||||
|
|
@ -299,7 +353,6 @@ extent from the map. The coordinates are returned in displayProjection.
|
||||||
else {
|
else {
|
||||||
position = new OpenLayers.LonLat(options.position[0],
|
position = new OpenLayers.LonLat(options.position[0],
|
||||||
options.position[1]);
|
options.position[1]);
|
||||||
mapProjection = this.olMap.getProjectionObject();
|
|
||||||
if (!mapProjection.equals(sourceProjection)) {
|
if (!mapProjection.equals(sourceProjection)) {
|
||||||
position.transform(sourceProjection, mapProjection);
|
position.transform(sourceProjection, mapProjection);
|
||||||
}
|
}
|
||||||
|
|
@ -323,11 +376,89 @@ extent from the map. The coordinates are returned in displayProjection.
|
||||||
this.olMap.addControl(this.selectFeatureControl);
|
this.olMap.addControl(this.selectFeatureControl);
|
||||||
this.selectFeatureControl.activate();
|
this.selectFeatureControl.activate();
|
||||||
},
|
},
|
||||||
bind: function() {
|
// This function got a bit too clever. The reason is, that jQuery's
|
||||||
this.events.bind.apply(this.events, arguments);
|
// 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() {
|
destroy: function() {
|
||||||
this.olMap.destroy();
|
this.olMap.destroy();
|
||||||
|
|
@ -363,6 +494,32 @@ $.MapQuery.Layer = function(map, id, options) {
|
||||||
// to bind and trigger jQuery events
|
// to bind and trigger jQuery events
|
||||||
this.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
|
// create the actual layer based on the options
|
||||||
// Returns layer and final options for the layer (for later re-use,
|
// Returns layer and final options for the layer (for later re-use,
|
||||||
// e.g. zoomToMaxExtent).
|
// e.g. zoomToMaxExtent).
|
||||||
|
|
@ -371,17 +528,26 @@ $.MapQuery.Layer = function(map, id, options) {
|
||||||
this.olLayer = res.layer;
|
this.olLayer = res.layer;
|
||||||
this.options = res.options;
|
this.options = res.options;
|
||||||
|
|
||||||
// create triggers for all OpenLayers layer events
|
// Some good documentation for the events is needed. Here is a short
|
||||||
var events = {};
|
// description on how the current events compare to the OpenLayer
|
||||||
$.each(this.olLayer.EVENT_TYPES, function(i, evt) {
|
// events on the layer:
|
||||||
events[evt] = function() {
|
// - added, remove: not needed, there's addlayer and removelayer
|
||||||
self.events.trigger(evt, arguments);
|
// - visibilitychanged: not needed, there's the changelayer event
|
||||||
self.map.events.trigger(evt, arguments);
|
// - 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 = {
|
$.MapQuery.Layer.prototype = {
|
||||||
|
|
@ -390,7 +556,7 @@ $.MapQuery.Layer.prototype = {
|
||||||
_version added 0.1_
|
_version added 0.1_
|
||||||
####**Description**: move the layer down in the layer stack of the map
|
####**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)
|
stack (default 1)
|
||||||
|
|
||||||
>Returns layer (MapQuery.Layer)
|
>Returns layer (MapQuery.Layer)
|
||||||
|
|
@ -421,22 +587,21 @@ will put the layer at the bottom.
|
||||||
each: function () {},
|
each: function () {},
|
||||||
/**
|
/**
|
||||||
###*layer*.`remove()`
|
###*layer*.`remove()`
|
||||||
_version added 0.1_
|
_version added 0.2_
|
||||||
####**Description**: remove the layer from the map
|
####**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.
|
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
|
It returns the `map` object if the layer was removed, or `false` if the
|
||||||
destroyed layer.
|
removal was prevented in the preremovelayer event.
|
||||||
|
|
||||||
var id = layer.remove(); //remove this layer
|
var id = layer.remove(); //remove this layer
|
||||||
|
|
||||||
|
|
||||||
*/
|
*/
|
||||||
remove: function() {
|
remove: function() {
|
||||||
this.map.olMap.removeLayer(this.olLayer);
|
|
||||||
// remove references to this layer that are stored in the
|
// remove references to this layer that are stored in the
|
||||||
// map object
|
// map object
|
||||||
return this.map._removeLayer(this.id);
|
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
|
####**Description**: get/set the `position` of the layer in the layer
|
||||||
stack of the map
|
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
|
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;
|
return this.map.olMap.getLayerIndex(this.olLayer)-1;
|
||||||
}
|
}
|
||||||
else {
|
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_
|
_version added 0.1_
|
||||||
####**Description**: move the layer up in the layer stack of the map
|
####**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)
|
stack (default 1)
|
||||||
|
|
||||||
>Returns: layer (MapQuery.Layer)
|
>Returns: layer (MapQuery.Layer)
|
||||||
|
|
@ -503,7 +670,7 @@ given.
|
||||||
_version added 0.1_
|
_version added 0.1_
|
||||||
####**Description**: get/set the `visible` state of the layer
|
####**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)
|
>Returns: visible (boolean)
|
||||||
|
|
||||||
|
|
@ -522,6 +689,7 @@ If no visible is given, it will return the current visibility.
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
this.olLayer.setVisibility(vis);
|
this.olLayer.setVisibility(vis);
|
||||||
|
this.trigger('changelayer', ['visibility']);
|
||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -530,9 +698,9 @@ If no visible is given, it will return the current visibility.
|
||||||
_version added 0.1_
|
_version added 0.1_
|
||||||
####**Description**: get/set the `opacity` of the layer
|
####**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.
|
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) {
|
opacity: function(opac) {
|
||||||
if (opac===undefined) {
|
if (opac===undefined) {
|
||||||
// this.olLayer.opacity can be null if never
|
// this.olLayer.opacity can be null if never
|
||||||
// set so return the visibility
|
// set so return the visibility
|
||||||
var value = this.olLayer.opacity ?
|
var value = this.olLayer.opacity ?
|
||||||
this.olLayer.opacity : this.olLayer.getVisibility();
|
this.olLayer.opacity : this.olLayer.getVisibility();
|
||||||
return value;
|
return value;
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
this.olLayer.setOpacity(opac);
|
this.olLayer.setOpacity(opac);
|
||||||
|
this.trigger('changelayer', ['opacity']);
|
||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// every event gets the layer passed in
|
// every event gets the layer passed in
|
||||||
bind: function() {
|
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_
|
_version added 0.1_
|
||||||
####**Description**: create a Bing maps layer
|
####**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)
|
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/
|
http://bingmapsportal.com/
|
||||||
**label** string with the name of the layer
|
* **label** string with the name of the layer
|
||||||
|
|
||||||
|
|
||||||
layers:[{
|
layers:[{
|
||||||
|
|
@ -629,9 +1038,9 @@ http://bingmapsportal.com/
|
||||||
_version added 0.1_
|
_version added 0.1_
|
||||||
####**Description**: create a Google maps layer
|
####**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)
|
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
|
*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_
|
_version added 0.1_
|
||||||
####**Description**: create a vector layer
|
####**Description**: create a vector layer
|
||||||
|
|
||||||
**label** string with the name of the layer
|
* **label** string with the name of the layer
|
||||||
|
|
||||||
|
|
||||||
layers:[{
|
layers:[{
|
||||||
|
|
@ -692,13 +1101,13 @@ _version added 0.1_
|
||||||
_version added 0.1_
|
_version added 0.1_
|
||||||
####**Description**: create a JSON layer
|
####**Description**: create a JSON layer
|
||||||
|
|
||||||
**url** a string pointing to the location of the JSON data
|
* **url** a string pointing to the location of the JSON data
|
||||||
**strategies** a string ['bbox','cluster','filter','fixed','paging','refresh','save']
|
* **strategies** a string ['bbox','cluster','filter','fixed','paging','refresh','save']
|
||||||
stating which update strategy should be used (default fixed)
|
stating which update strategy should be used (default fixed)
|
||||||
(see also http://dev.openlayers.org/apidocs/files/OpenLayers/Strategy-js.html)
|
(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)
|
* **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
|
* **styleMap** {object} the style to be used to render the JSON data
|
||||||
**label** string with the name of the layer
|
* **label** string with the name of the layer
|
||||||
|
|
||||||
|
|
||||||
layers:[{
|
layers:[{
|
||||||
|
|
@ -710,8 +1119,8 @@ stating which update strategy should be used (default fixed)
|
||||||
*/
|
*/
|
||||||
json: function(options) {
|
json: function(options) {
|
||||||
var o = $.extend(true, {}, $.fn.mapQuery.defaults.layer.all,
|
var o = $.extend(true, {}, $.fn.mapQuery.defaults.layer.all,
|
||||||
$.fn.mapQuery.defaults.layer.vector,
|
$.fn.mapQuery.defaults.layer.vector,
|
||||||
options);
|
options);
|
||||||
this.isVector = true;
|
this.isVector = true;
|
||||||
var strategies = [];
|
var strategies = [];
|
||||||
for (var i in o.strategies) {
|
for (var i in o.strategies) {
|
||||||
|
|
@ -742,26 +1151,31 @@ stating which update strategy should be used (default fixed)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
var protocol;
|
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 = {
|
var params = {
|
||||||
protocol: new OpenLayers.Protocol[protocol]({
|
|
||||||
url: o.url,
|
|
||||||
format: new OpenLayers.Format.GeoJSON()
|
|
||||||
}),
|
|
||||||
strategies: strategies,
|
strategies: strategies,
|
||||||
projection: o.projection || 'EPSG:4326',
|
projection: o.projection || 'EPSG:4326',
|
||||||
styleMap: o.styleMap
|
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 {
|
return {
|
||||||
layer: new OpenLayers.Layer.Vector(o.label, params),
|
layer: layer,
|
||||||
options: o
|
options: o
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
@ -771,10 +1185,10 @@ _version added 0.1_
|
||||||
####**Description**: create an OpenStreetMap layer
|
####**Description**: create an OpenStreetMap layer
|
||||||
|
|
||||||
|
|
||||||
**label** string with the name of the layer
|
* **label** string with the name of the layer
|
||||||
**url** A single URL (string) or an array of URLs to OSM-like server like
|
* **url** A single URL (string) or an array of URLs to OSM-like server like
|
||||||
Cloudmade
|
Cloudmade
|
||||||
**attribution** A string to put some attribution on the map
|
* **attribution** A string to put some attribution on the map
|
||||||
|
|
||||||
layers:[{
|
layers:[{
|
||||||
type: 'osm',
|
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}`
|
###*layer* `{type:wms}`
|
||||||
_version added 0.1_
|
_version added 0.1_
|
||||||
####**Description**: create a WMS layer
|
####**Description**: create a WMS layer
|
||||||
|
|
||||||
**url** a string pointing to the location of the WMS service
|
* **url** a string pointing to the location of the WMS service
|
||||||
**layers** a string with the name of the WMS layer(s)
|
* **layers** a string with the name of the WMS layer(s)
|
||||||
**format** a string with format of the WMS image (default image/jpeg)
|
* **format** a string with format of the WMS image (default image/jpeg)
|
||||||
**transparent** a boolean for requesting images with transparency
|
* **transparent** a boolean for requesting images with transparency
|
||||||
**label** string with the name of the layer
|
* **label** string with the name of the layer
|
||||||
|
* **wms_parameters** an hashtable of extra GetMap query string parameters and parameter values
|
||||||
|
|
||||||
|
|
||||||
layers:[{
|
layers:[{
|
||||||
|
|
@ -828,6 +1278,9 @@ _version added 0.1_
|
||||||
transparent: o.transparent,
|
transparent: o.transparent,
|
||||||
format: o.format
|
format: o.format
|
||||||
};
|
};
|
||||||
|
if(typeof o.wms_parameters != "undefined"){
|
||||||
|
params = $.extend(params, o.wms_parameters);
|
||||||
|
}
|
||||||
return {
|
return {
|
||||||
layer: new OpenLayers.Layer.WMS(o.label, o.url, params, o),
|
layer: new OpenLayers.Layer.WMS(o.label, o.url, params, o),
|
||||||
options: o
|
options: o
|
||||||
|
|
@ -839,11 +1292,11 @@ _version added 0.1_
|
||||||
_version added 0.1_
|
_version added 0.1_
|
||||||
####**Description**: create a WMTS (tiling) layer
|
####**Description**: create a WMTS (tiling) layer
|
||||||
|
|
||||||
**url** a string pointing to the location of the WMTS service
|
* **url** a string pointing to the location of the WMTS service
|
||||||
**layer** a string with the name of the WMTS layer
|
* **layer** a string with the name of the WMTS layer
|
||||||
**matrixSet** a string with one of the advertised matrix set identifiers
|
* **matrixSet** a string with one of the advertised matrix set identifiers
|
||||||
**style** a string with one of the advertised layer styles
|
* **style** a string with one of the advertised layer styles
|
||||||
**label** string with the name of the layer
|
* **label** string with the name of the layer
|
||||||
|
|
||||||
|
|
||||||
layers:[{
|
layers:[{
|
||||||
|
|
@ -953,13 +1406,17 @@ $.fn.mapQuery.defaults = {
|
||||||
transitionEffect: 'resize',
|
transitionEffect: 'resize',
|
||||||
sphericalMercator: true
|
sphericalMercator: true
|
||||||
},
|
},
|
||||||
|
tms: {
|
||||||
|
transitionEffect: 'resize',
|
||||||
|
format: 'png'
|
||||||
|
},
|
||||||
raster: {
|
raster: {
|
||||||
// options for raster layers
|
// options for raster layers
|
||||||
transparent: true
|
transparent: true
|
||||||
},
|
},
|
||||||
vector: {
|
vector: {
|
||||||
// options for vector layers
|
// options for vector layers
|
||||||
strategies: ['fixed']
|
strategies: ['bbox']
|
||||||
},
|
},
|
||||||
wmts: {
|
wmts: {
|
||||||
format: 'image/jpeg',
|
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
|
// The number of decimals for the coordinates
|
||||||
// default: 2
|
// default: 2
|
||||||
// TODO: JCB20110630 use dynamic precision based on the pixel
|
// TODO: JCB20110630 use dynamic precision based on the pixel
|
||||||
// resolution, no need to configure precision
|
// resolution, no need to configure precision
|
||||||
precision: 2,
|
precision: 2,
|
||||||
|
|
||||||
// The label of the x-value
|
// The label of the x-value
|
||||||
|
|
@ -57,51 +57,36 @@ $.widget("mapQuery.mqMousePosition", {
|
||||||
|
|
||||||
},
|
},
|
||||||
_create: function() {
|
_create: function() {
|
||||||
var map;
|
|
||||||
var self = this;
|
|
||||||
var element = this.element;
|
|
||||||
var mousepos;
|
|
||||||
|
|
||||||
//get the mapquery object
|
//get the mapquery object
|
||||||
map = $(this.options.map).data('mapQuery');
|
this.map = $(this.options.map).data('mapQuery');
|
||||||
|
|
||||||
map.bind("mousemove",
|
this.map.element.bind('mousemove', {widget: this}, this._onMousemove);
|
||||||
{widget:self,map:map},
|
$.tmpl('mqMousePosition', {}).appendTo(this.element);
|
||||||
self._onMouseMove);
|
|
||||||
|
|
||||||
|
|
||||||
$.tmpl('mqMousePosition',{
|
|
||||||
mouseposition:mousepos
|
|
||||||
}).appendTo(element);
|
|
||||||
|
|
||||||
},
|
},
|
||||||
_destroy: function() {
|
_destroy: function() {
|
||||||
this.element.removeClass(' ui-widget ui-helper-clearfix ' +
|
this.element.removeClass('ui-widget ui-helper-clearfix ' +
|
||||||
'ui-corner-all')
|
'ui-corner-all')
|
||||||
.empty();
|
.empty();
|
||||||
},
|
},
|
||||||
_mouseMoved: function(data, element, map) {
|
_onMousemove: function(evt) {
|
||||||
var x = data.layerX;
|
var self = evt.data.widget;
|
||||||
var y = data.layerY;
|
var x = evt.pageX;
|
||||||
var mapProjection = map.options.projection;
|
var y = evt.pageY;
|
||||||
var displayProjection = map.options.projection;
|
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,
|
//if the coordinates should be displayed in something else,
|
||||||
//set them via the map displayProjection option
|
//set them via the map displayProjection option
|
||||||
var pos = map.olMap.getLonLatFromLayerPx(new OpenLayers.Pixel(x,y));
|
if(!mapProjection.equals(self.map.displayProjection)) {
|
||||||
if(map.options.displayProjection) {
|
pos = pos.transform(mapProjection, displayProjection);
|
||||||
displayProjection = map.options.displayProjection;
|
|
||||||
pos=pos.transform(
|
|
||||||
new OpenLayers.Projection(mapProjection),
|
|
||||||
new OpenLayers.Projection(displayProjection));
|
|
||||||
}
|
}
|
||||||
$("#id_diabook_ELPosX", element).val(
|
$("#id_diabook_ELPosX", document.element).val(
|
||||||
this.options.x+pos.lon.toFixed(this.options.precision));
|
self.options.x + pos.lon.toFixed(self.options.precision));
|
||||||
$("#id_diabook_ELPosY", element).val(
|
$("#id_diabook_ELPosY", document.element).val(
|
||||||
this.options.y+pos.lat.toFixed(this.options.precision));
|
self.options.y + pos.lat.toFixed(self.options.precision));
|
||||||
},
|
|
||||||
|
|
||||||
_onMouseMove: function(evt, data) {
|
|
||||||
evt.data.widget._mouseMoved(data,evt.data.control,evt.data.map);
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
})(jQuery);
|
})(jQuery);
|
||||||
|
|
|
||||||
|
|
@ -170,7 +170,7 @@ if ($color=="dark") $color_path = "/diabook-dark/";
|
||||||
$a->page['htmlhead'] .= sprintf('<script language="JavaScript" src="%s"></script>', $cookieJS);
|
$a->page['htmlhead'] .= sprintf('<script language="JavaScript" src="%s"></script>', $cookieJS);
|
||||||
|
|
||||||
//load jquery.ae.image.resize.js
|
//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);
|
$a->page['htmlhead'] .= sprintf('<script language="JavaScript" src="%s" ></script>', $imageresizeJS);
|
||||||
|
|
||||||
//load jquery.ui.js
|
//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);
|
$a->page['htmlhead'] .= sprintf('<script language="JavaScript" src="%s" ></script>', $mqmouseposJS);
|
||||||
$mousewheelJS = $a->get_baseurl($ssl_state)."/view/theme/diabook/js/jquery.mousewheel.js";
|
$mousewheelJS = $a->get_baseurl($ssl_state)."/view/theme/diabook/js/jquery.mousewheel.js";
|
||||||
$a->page['htmlhead'] .= sprintf('<script language="JavaScript" src="%s" ></script>', $mousewheelJS);
|
$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() {
|
function open_mapcontrol() {
|
||||||
$("div#mapcontrol").attr("style","display: block;width:900px;height:600px;");
|
$("div#mapcontrol").attr("style","display: block;width:900px;height:900px;");
|
||||||
$("#map2").mapQuery({layers:[{type:"osm"}],
|
$("#map2").mapQuery({
|
||||||
center:({zoom:'.$ELZoom.',position:['.$ELPosX.','.$ELPosY.']})});
|
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({
|
$("#mouseposition").mqMousePosition({
|
||||||
map: "#map2",
|
map: "#map2",
|
||||||
|
|
@ -259,13 +266,16 @@ if ($color=="dark") $color_path = "/diabook-dark/";
|
||||||
precision:4
|
precision:4
|
||||||
});
|
});
|
||||||
|
|
||||||
|
$("#layermanager").mqLayerManager({map:"#map2"});
|
||||||
|
|
||||||
map = $("#map2").mapQuery().data("mapQuery");
|
map = $("#map2").mapQuery().data("mapQuery");
|
||||||
textarea = document.getElementById("id_diabook_ELZoom");
|
textarea = document.getElementById("id_diabook_ELZoom");
|
||||||
|
textarea.value = "'.$ELZoom.'";
|
||||||
$("#map2").bind("mousewheel", function(event, delta) {
|
$("#map2").bind("mousewheel", function(event, delta) {
|
||||||
if (delta > 0 || delta < 0){
|
if (delta > 0 && textarea.value < 18){
|
||||||
textarea.value = map.center().zoom; }
|
textarea.value = textarea.value - delta*-1; }
|
||||||
|
if (delta < 0 && textarea.value > "0"){
|
||||||
|
textarea.value = textarea.value - delta*-1; }
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
</script>';
|
</script>';
|
||||||
|
|
@ -571,7 +581,7 @@ if ($color=="dark") $color_path = "/diabook-dark/";
|
||||||
}}
|
}}
|
||||||
|
|
||||||
// last 12 photos
|
// last 12 photos
|
||||||
if($close_photos != "1") {
|
if($close_lastphotos != "1") {
|
||||||
$aside['$photos_title'] = t('Last photos');
|
$aside['$photos_title'] = t('Last photos');
|
||||||
$aside['$photos_items'] = array();
|
$aside['$photos_items'] = array();
|
||||||
$r = q("SELECT `photo`.`id`, `photo`.`resource-id`, `photo`.`scale`, `photo`.`desc`, `user`.`nickname`, `user`.`username` FROM
|
$r = q("SELECT `photo`.`id`, `photo`.`resource-id`, `photo`.`scale`, `photo`.`desc`, `user`.`nickname`, `user`.`username` FROM
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue