aboutsummaryrefslogtreecommitdiffstats
path: root/view/theme
diff options
context:
space:
mode:
Diffstat (limited to 'view/theme')
-rwxr-xr-xview/theme/diabook/communityhome.tpl3
-rw-r--r--view/theme/diabook/js/jquery.mapquery.core.js655
-rw-r--r--view/theme/diabook/js/jquery.mapquery.mqLayerManager.js23
-rw-r--r--view/theme/diabook/js/jquery.mapquery.mqMousePosition.js59
-rwxr-xr-xview/theme/diabook/theme.php14
5 files changed, 596 insertions, 158 deletions
diff --git a/view/theme/diabook/communityhome.tpl b/view/theme/diabook/communityhome.tpl
index 90253882f..6fa330140 100755
--- a/view/theme/diabook/communityhome.tpl
+++ b/view/theme/diabook/communityhome.tpl
@@ -10,8 +10,9 @@
<div id="mapcontrol" style="display:none;">
<form id="mapform" action="network" method="post" >
-<div id="layermanager" style="width: 350px;position: relative;float: right;right:60px;"></div>
+<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}}
diff --git a/view/theme/diabook/js/jquery.mapquery.core.js b/view/theme/diabook/js/jquery.mapquery.core.js
index 606a343f4..b9dd16c8b 100644
--- a/view/theme/diabook/js/jquery.mapquery.core.js
+++ b/view/theme/diabook/js/jquery.mapquery.core.js
@@ -17,11 +17,11 @@ the matched element
**options** an object of key-value pairs with options for the map. Possible
pairs are:
- * **layers** (array of MapQuery.Layer *or* MapQuery.Layer): Either an array
- * or a single layer that should be added to the map
+ * **layers** (array of MapQuery.Layer *or* MapQuery.Layer): Either an array
+ 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;
+ },
+/**
+###*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');
+ }
},
- one: function() {
- this.events.one.apply(this.events, arguments);
+ _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',
diff --git a/view/theme/diabook/js/jquery.mapquery.mqLayerManager.js b/view/theme/diabook/js/jquery.mapquery.mqLayerManager.js
index 22dec2170..885330cf1 100644
--- a/view/theme/diabook/js/jquery.mapquery.mqLayerManager.js
+++ b/view/theme/diabook/js/jquery.mapquery.mqLayerManager.js
@@ -111,7 +111,7 @@ $.widget("mapQuery.mqLayerManager", {
var element = checkbox.parents('.mq-layermanager-element');
var layer = element.data('layer');
var self = element.data('self');
- self._visible(layer,checkbox.attr('checked'));
+ self._visible(layer,checkbox.is(':checked'));
});
element.delegate('.ui-icon-closethick', 'click', function() {
@@ -120,11 +120,11 @@ $.widget("mapQuery.mqLayerManager", {
});
//binding events
- map.bind("mqAddLayer",
+ map.bind("addlayer",
{widget:self,control:lmElement},
self._onLayerAdd);
- map.bind("mqRemoveLayer",
+ map.bind("removelayer",
{widget:self,control:lmElement},
self._onLayerRemove);
@@ -286,23 +286,16 @@ $.widget("mapQuery.mqLayerManager", {
evt.data.widget._layerAdded(evt.data.control,layer);
},
- _onLayerRemove: function(evt, id) {
- evt.data.widget._layerRemoved(evt.data.control,id);
+ _onLayerRemove: function(evt, layer) {
+ evt.data.widget._layerRemoved(evt.data.control,layer.id);
},
- _onLayerChange: function(evt, data) {
- var layer;
- //since we don't know which layer we get we've to loop through
- //the openlayers.layer.ids to find the correct one
- $.each(evt.data.map.layers(), function(){
- if(this.olLayer.id == data.layer.id) {layer=this;}
- });
- //(name, order, opacity, params, visibility or attribution)
- switch(data.property) {
+ _onLayerChange: function(evt, layer, property) {
+ switch(property) {
case 'opacity':
evt.data.widget._layerOpacity(evt.data.widget,layer);
break;
- case 'order':
+ case 'position':
evt.data.widget._layerPosition(evt.data.widget,layer);
break;
case 'visibility':
diff --git a/view/theme/diabook/js/jquery.mapquery.mqMousePosition.js b/view/theme/diabook/js/jquery.mapquery.mqMousePosition.js
index d4370bfe4..9f7e151ff 100644
--- a/view/theme/diabook/js/jquery.mapquery.mqMousePosition.js
+++ b/view/theme/diabook/js/jquery.mapquery.mqMousePosition.js
@@ -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');
-
- map.bind("mousemove",
- {widget:self,map:map},
- self._onMouseMove);
-
+ this.map = $(this.options.map).data('mapQuery');
- $.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);
diff --git a/view/theme/diabook/theme.php b/view/theme/diabook/theme.php
index 666059283..8a7bf19e9 100755
--- a/view/theme/diabook/theme.php
+++ b/view/theme/diabook/theme.php
@@ -254,8 +254,8 @@ if ($color=="dark") $color_path = "/diabook-dark/";
function open_mapcontrol() {
$("div#mapcontrol").attr("style","display: block;width:900px;height:900px;");
$("#map2").mapQuery({
- layers:[{type:"osm", minZoom:1, label:"OpenStreetMap" },
- {type:"wms", minZoom:1, 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:[{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.']})});
@@ -270,10 +270,12 @@ if ($color=="dark") $color_path = "/diabook-dark/";
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>';
@@ -579,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