[Mapbender-commits] r8821 - in trunk/mapbender: http/plugins http/widgets lib
svn_mapbender at osgeo.org
svn_mapbender at osgeo.org
Wed May 7 04:06:01 PDT 2014
Author: hwbllmnn
Date: 2014-05-07 04:06:01 -0700 (Wed, 07 May 2014)
New Revision: 8821
Modified:
trunk/mapbender/http/plugins/kmlTree.js
trunk/mapbender/http/widgets/w_digitize.js
trunk/mapbender/lib/mb.ui.displayKmlFeatures.js
Log:
proper indenting, use kml selected for editing only to store features
Modified: trunk/mapbender/http/plugins/kmlTree.js
===================================================================
--- trunk/mapbender/http/plugins/kmlTree.js 2014-05-07 08:51:46 UTC (rev 8820)
+++ trunk/mapbender/http/plugins/kmlTree.js 2014-05-07 11:06:01 UTC (rev 8821)
@@ -1,164 +1,165 @@
- /**
- * Package: kmlTree
- *
- * Description:
- * Module to load KML temporary in a tree
- *
- * Files:
- * - mapbender/http/plugins/kmlTree.js
- * - mapebnder/lib/mb.ui.displayKmlFeatures.js
- * - mapbender/http/css/kmltree.css
- *
- * SQL:
- * > INSERT INTO gui_element(fkey_gui_id, e_id, e_pos, e_public, e_comment, e_title, e_element,
- * > e_src, e_attributes, e_left, e_top, e_width, e_height, e_z_index, e_more_styles, e_content,
- * > e_closetag, e_js_file, e_mb_mod, e_target, e_requires, e_url) VALUES('<app_id>',
- * > 'kmlTree',2,1,'Displays KML on the map','KML','ul','','',1,1,200,200,NULL ,
- * > 'visibility:visible','','ul','../plugins/kmlTree.js','../../lib/mb.ui.displayKmlFeatures.js',
- * > 'mapframe1','jq_ui_widget','http://www.mapbender.org/Loadkml');
- * >
- * > INSERT INTO gui_element_vars(fkey_gui_id, fkey_e_id, var_name, var_value, context, var_type) VALUES('gui', 'kmlTree',
- * > 'buffer', '100', '' ,'var');
- * > INSERT INTO gui_element_vars(fkey_gui_id, fkey_e_id, var_name, var_value, context, var_type)
- * > VALUES('gui', 'kmlTree', 'styles', '../css/kmltree.css', '' ,'file/css');
- *
- * Help:
- * http://www.mapbender.org/Loadkml
- *
- * Maintainer:
- * http://www.mapbender.org/User:Armin_Retterath
- *
- *
- * License:
- * Copyright (c) 2009, Open Source Geospatial Foundation
- * This program is dual licensed under the GNU General Public License
- * and Simplified BSD license.
- * http://svn.osgeo.org/mapbender/trunk/mapbender/license/license.txt
- */
+/**
+ * Package: kmlTree
+ *
+ * Description:
+ * Module to load KML temporary in a tree
+ *
+ * Files:
+ * - mapbender/http/plugins/kmlTree.js
+ * - mapebnder/lib/mb.ui.displayKmlFeatures.js
+ * - mapbender/http/css/kmltree.css
+ *
+ * SQL:
+ * > INSERT INTO gui_element(fkey_gui_id, e_id, e_pos, e_public, e_comment, e_title, e_element,
+ * > e_src, e_attributes, e_left, e_top, e_width, e_height, e_z_index, e_more_styles, e_content,
+ * > e_closetag, e_js_file, e_mb_mod, e_target, e_requires, e_url) VALUES('<app_id>',
+ * > 'kmlTree',2,1,'Displays KML on the map','KML','ul','','',1,1,200,200,NULL ,
+ * > 'visibility:visible','','ul','../plugins/kmlTree.js','../../lib/mb.ui.displayKmlFeatures.js',
+ * > 'mapframe1','jq_ui_widget','http://www.mapbender.org/Loadkml');
+ * >
+ * > INSERT INTO gui_element_vars(fkey_gui_id, fkey_e_id, var_name, var_value, context, var_type) VALUES('gui', 'kmlTree',
+ * > 'buffer', '100', '' ,'var');
+ * > INSERT INTO gui_element_vars(fkey_gui_id, fkey_e_id, var_name, var_value, context, var_type)
+ * > VALUES('gui', 'kmlTree', 'styles', '../css/kmltree.css', '' ,'file/css');
+ *
+ * Help:
+ * http://www.mapbender.org/Loadkml
+ *
+ * Maintainer:
+ * http://www.mapbender.org/User:Armin_Retterath
+ *
+ *
+ * License:
+ * Copyright (c) 2009, Open Source Geospatial Foundation
+ * This program is dual licensed under the GNU General Public License
+ * and Simplified BSD license.
+ * http://svn.osgeo.org/mapbender/trunk/mapbender/license/license.txt
+ */
var $kmlTree = $(this);
var KmlTree = function(o){
- $kmlTree.children().remove();
- $kmlTree.addClass('kmlTree');
- var $KMLfolder = $('<li class="open kml"><img src="../img/kml_logo.png" /><a href="#">KML</a><ul></ul></li>');
- $kmlTree.append($KMLfolder);
+ $kmlTree.children().remove();
+ $kmlTree.addClass('kmlTree');
+ var $KMLfolder = $('<li class="open kml"><img src="../img/kml_logo.png" /><a href="#">KML</a><ul></ul></li>');
+ $kmlTree.append($KMLfolder);
- $addButton = $('<button class="add" name="addkml" value="addkml"></button>');
- $addButton.click(function(){
- $('<div ><input class="kmlurl" /></div>').dialog({
- "title": "KML hinzufügen",
- "buttons":{
- "OK": function(){
- $('#mapframe1').kml({ url: $(this).find('.kmlurl').val()});
- $(this).dialog('destroy');
- }
- }
- });
- });
- $KMLfolder.find("a").after($addButton);
+ $addButton = $('<button class="add" name="addkml" value="addkml"></button>');
+ $addButton.click(function(){
+ $('<div ><input class="kmlurl" /></div>').dialog({
+ "title": "KML hinzufügen",
+ "buttons":{
+ "OK": function(){
+ $('#mapframe1').kml({ url: $(this).find('.kmlurl').val()});
+ $(this).dialog('destroy');
+ }
+ }
+ });
+ });
+ $KMLfolder.find("a").after($addButton);
- o.$target.bind('kml:loaded',function(e,obj){
- //console.log(obj);
- var checked = obj.display ? 'checked="checked"':'';
+ o.$target.bind('kml:loaded',function(e,obj){
+ //console.log(obj);
+ var checked = obj.display ? 'checked="checked"':'';
- title = obj.url;
+ title = obj.url;
if(obj.refreshing) {
$KMLfolder.find('ul li[title="' + title + '"]').remove();
}
- abbrevTitle = title.length < 20 ? title : title.substr(0,17) + "...";
- $kmlEntry = $('<li title="'+ title +'" class="open"><button class="toggle" name="toggle" value="toggle" ></button> <input type="checkbox"'+checked +'/><button class="digitize-layer" name="digitize-layer" value="digitize-layer"></button><button class="remove" name="remove" value="remove" ></button><a href="#">'+abbrevTitle+'</a></li>');
- $KMLfolder.children("ul").append($kmlEntry);
- $kmlEntry.find("a").bind("click",(function(jsonFeatureCollection){return function(){
- var map = o.$target.mapbender();
- var g = new GeometryArray();
- g.importGeoJSON(jsonFeatureCollection,false);
+ abbrevTitle = title.length < 20 ? title : title.substr(0,17) + "...";
+ $kmlEntry = $('<li title="'+ title +'" class="open"><button class="toggle" name="toggle" value="toggle" ></button> <input type="checkbox"'+checked +'/><button class="digitize-layer" name="digitize-layer" value="digitize-layer"></button><button class="remove" name="remove" value="remove" ></button><a href="#">'+abbrevTitle+'</a></li>');
+ $KMLfolder.children("ul").append($kmlEntry);
+ $kmlEntry.find("a").bind("click",(function(jsonFeatureCollection){return function(){
+ var map = o.$target.mapbender();
+ var g = new GeometryArray();
+ g.importGeoJSON(jsonFeatureCollection,false);
- var bbox = g.getBBox();
- var bufferFloat = parseFloat(o.buffer);
- var buffer = new Point(bufferFloat,bufferFloat);
- bbox[0] = bbox[0].minus(buffer);
- bbox[1] = bbox[1].plus(buffer);
+ var bbox = g.getBBox();
+ var bufferFloat = parseFloat(o.buffer);
+ var buffer = new Point(bufferFloat,bufferFloat);
+ bbox[0] = bbox[0].minus(buffer);
+ bbox[1] = bbox[1].plus(buffer);
- map.calculateExtent(
- new Mapbender.Extent(bbox[0], bbox[1])
- );
- map.setMapRequest();
+ map.calculateExtent(
+ new Mapbender.Extent(bbox[0], bbox[1])
+ );
+ map.setMapRequest();
- };
- })(obj.data));
+ };
+ })(obj.data));
- $featureList = $("<ul />");
- $kmlEntry.append($featureList);
- for(var i = 0;i < obj.data.features.length;i++){
+ $featureList = $("<ul />");
+ $kmlEntry.append($featureList);
+ for(var i = 0;i < obj.data.features.length;i++){
- title = obj.data.features[i].properties.name;
- abbrevTitle = title.length < 20 ? title : title.substr(0,17) + "...";
- $feature = $('<li title="'+ title +'"><a href="#" >'+ abbrevTitle + '</a></li>');
- $featureList.append($feature);
- title = obj.data.features[i].properties.name;
- $feature.bind('click',(function(jsonFeature){return function(){
+ title = obj.data.features[i].properties.name;
+ abbrevTitle = title.length < 20 ? title : title.substr(0,17) + "...";
+ $feature = $('<li title="'+ title +'"><a href="#" >'+ abbrevTitle + '</a></li>');
+ $featureList.append($feature);
+ title = obj.data.features[i].properties.name;
+ $feature.bind('click',(function(jsonFeature){return function(){
- var map = o.$target.mapbender();
- var g = new GeometryArray();
- g.importGeoJSON(jsonFeature,false);
- var feature = g.get(0);
+ var map = o.$target.mapbender();
+ var g = new GeometryArray();
+ g.importGeoJSON(jsonFeature,false);
+ var feature = g.get(0);
- var bbox = feature.getBBox();
- var bufferFloat = parseFloat(o.buffer);
- var buffer = new Point(bufferFloat,bufferFloat);
- bbox[0] = bbox[0].minus(buffer);
- bbox[1] = bbox[1].plus(buffer);
+ var bbox = feature.getBBox();
+ var bufferFloat = parseFloat(o.buffer);
+ var buffer = new Point(bufferFloat,bufferFloat);
+ bbox[0] = bbox[0].minus(buffer);
+ bbox[1] = bbox[1].plus(buffer);
- map.calculateExtent(
- new Mapbender.Extent(bbox[0], bbox[1])
- );
- map.setMapRequest();
+ map.calculateExtent(
+ new Mapbender.Extent(bbox[0], bbox[1])
+ );
+ map.setMapRequest();
- };
- })(obj.data.features[i]));
+ };
+ })(obj.data.features[i]));
- $feature.bind('mouseout',(function(jsonFeature){return function(){
- var map = o.$target.mapbender();
- var g = new GeometryArray();
- g.importGeoJSON(jsonFeature,false);
- var feature = g.get(0);
+ $feature.bind('mouseout',(function(jsonFeature){return function(){
+ var map = o.$target.mapbender();
+ var g = new GeometryArray();
+ g.importGeoJSON(jsonFeature,false);
+ var feature = g.get(0);
- if(feature.geomType != "point"){
- var me = $kmlTree.mapbender();
- me.resultHighlight.clean();
- me.resultHighlight.paint();
- }
- }})(obj.data.features[i]));
- $feature.bind('mouseover',(function(jsonFeature){return function(){
- var map = o.$target.mapbender();
- var g = new GeometryArray();
- g.importGeoJSON(jsonFeature,false);
- var feature = g.get(0);
+ if(feature.geomType != "point"){
+ var me = $kmlTree.mapbender();
+ me.resultHighlight.clean();
+ me.resultHighlight.paint();
+ }
+ }})(obj.data.features[i]));
+ $feature.bind('mouseover',(function(jsonFeature){return function(){
+ var map = o.$target.mapbender();
+ var g = new GeometryArray();
+ g.importGeoJSON(jsonFeature,false);
+ var feature = g.get(0);
- if(feature.geomType != "point"){
- var me = $kmlTree.mapbender();
- feature = feature.getBBox4();
- me.resultHighlight = new Highlight(
- [o.target],
- "KmlTreeHighlight",
- {"position":"absolute", "top":"0px", "left":"0px", "z-index":100},
- 2);
+ if(feature.geomType != "point"){
+ var me = $kmlTree.mapbender();
+ feature = feature.getBBox4();
+ me.resultHighlight = new Highlight(
+ [o.target],
+ "KmlTreeHighlight",
+ {"position":"absolute", "top":"0px", "left":"0px", "z-index":100},
+ 2);
- me.resultHighlight.add(feature, "#00ff00");
- me.resultHighlight.paint();
- }
- else if(feature.geomType == "point"){
+ me.resultHighlight.add(feature, "#00ff00");
+ me.resultHighlight.paint();
+ }
+ else if(feature.geomType == "point"){
- }
+ }
- };
- })(obj.data.features[i]));
+ };
+ })(obj.data.features[i]));
+ }
$('button.digitize-layer', $kmlEntry).bind('click', function() {
$(this).toggleClass('active');
@@ -175,38 +176,46 @@
}
});
+ // $('#kmlTree > li > ul > li > ul').sortable({
+ // update: function() {
+ // var kml = $('#mapframe1').data('kml');
+ // var urls = [];
+ // $(this).children('li[title]').each(function(k, v) {
+ // urls.push($(this).attr('title'));
+ // });
+ // kml.setOrder(urls);
+ // }
+ // });
- }
+ $("*:checkbox",$kmlEntry).bind('click', function(){
+ if($(this).attr('checked')){
+ o.$target.kml('show',obj.url);
+ }else{
+ o.$target.kml('hide',obj.url);
+ }
+ });
- $("*:checkbox",$kmlEntry).bind('click', function(){
- if($(this).attr('checked')){
- o.$target.kml('show',obj.url);
- }else{
- o.$target.kml('hide',obj.url);
- }
- });
+ $("button.toggle",$kmlEntry).bind('click', function(){
+ if($(this).parent().hasClass("open")){
+ $(this).parent().removeClass("open");
+ $(this).parent().addClass("closed");
+ }else{
+ $(this).parent().removeClass("closed");
+ $(this).parent().addClass("open");
- $("button.toggle",$kmlEntry).bind('click', function(){
- if($(this).parent().hasClass("open")){
- $(this).parent().removeClass("open");
- $(this).parent().addClass("closed");
- }else{
- $(this).parent().removeClass("closed");
- $(this).parent().addClass("open");
+ }
+ });
- }
- });
+ $("button.remove",$kmlEntry).bind('click', function(){
+ o.$target.kml('remove',obj.url);
+ $(this).parent().remove();
+ });
- $("button.remove",$kmlEntry).bind('click', function(){
- o.$target.kml('remove',obj.url);
- $(this).parent().remove();
- });
+ });
- });
-
};
Mapbender.events.init.register(function(){
- $kmlTree.mapbender(new KmlTree(options));
+ $kmlTree.mapbender(new KmlTree(options));
});
Modified: trunk/mapbender/http/widgets/w_digitize.js
===================================================================
--- trunk/mapbender/http/widgets/w_digitize.js 2014-05-07 08:51:46 UTC (rev 8820)
+++ trunk/mapbender/http/widgets/w_digitize.js 2014-05-07 11:06:01 UTC (rev 8821)
@@ -1,420 +1,421 @@
$.widget("mapbender.mb_digitize", {
- options: {
- opacity: 0.6,
- digitizePointDiameter: 10,
- polygonFillSnapped: "#FC3",
- polygonFillDefault: "#FFF",
- polygonStrokeWidthDefault: 1,
- polygonStrokeWidthSnapped: 5,
- lineStrokeDefault: "#C9F",
- lineStrokeSnapped: "#F30",
- lineStrokeWidthDefault: 3,
- lineStrokeWidthSnapped: 5,
- pointFillSnapped: "#F90",
- pointFillDefault: "#CCF",
- pointStrokeDefault: "#FC3",
- pointStrokeSnapped: "#F30",
- pointStrokeWidthDefault: 2
- },
- _digitizePoints: [],
- _map: undefined,
- _srs: undefined,
- _polygonIsInvalid: false,
- _currentPolygonIsInvalid: false,
- _canvas: undefined,
- _isPolygon: function (pos) {
+ options: {
+ opacity: 0.6,
+ digitizePointDiameter: 10,
+ polygonFillSnapped: "#FC3",
+ polygonFillDefault: "#FFF",
+ polygonStrokeWidthDefault: 1,
+ polygonStrokeWidthSnapped: 5,
+ lineStrokeDefault: "#C9F",
+ lineStrokeSnapped: "#F30",
+ lineStrokeWidthDefault: 3,
+ lineStrokeWidthSnapped: 5,
+ pointFillSnapped: "#F90",
+ pointFillDefault: "#CCF",
+ pointStrokeDefault: "#FC3",
+ pointStrokeSnapped: "#F30",
+ pointStrokeWidthDefault: 2
+ },
+ _digitizePoints: [],
+ _map: undefined,
+ _srs: undefined,
+ _polygonIsInvalid: false,
+ _currentPolygonIsInvalid: false,
+ _canvas: undefined,
- var len = this._digitizePoints.length;
+ _isPolygon: function (pos) {
- var max = pos ? len - 1 : len - 2;
+ var len = this._digitizePoints.length;
- if (pos && len < 2 || !pos && len < 3) {
- return false;
- }
+ var max = pos ? len - 1 : len - 2;
- var posLocal = pos ? pos : this._digitizePoints[len - 1];
+ if (pos && len < 2 || !pos && len < 3) {
+ return false;
+ }
- var p0 = this._digitizePoints[0].pos;
- var pn = this._digitizePoints[max].pos;
- for (var i = 0; i < max; i++) {
- var pi = this._digitizePoints[i].pos;
- var pj = this._digitizePoints[i + 1].pos;
+ var posLocal = pos ? pos : this._digitizePoints[len - 1];
- if (i > 0 && this._lineIntersect(
- pi.x, pi.y, pj.x, pj.y,
- p0.x, p0.y, posLocal.x, posLocal.y)
- ) {
- return false;
- }
- if (this._lineIntersect(
- pi.x, pi.y, pj.x, pj.y,
- pn.x, pn.y, posLocal.x, posLocal.y)
- ) {
- this._currentPolygonIsInvalid = true;
- return false;
- }
- }
- this._currentPolygonIsInvalid = false;
- return true;
- },
- _lineIntersect: function ( x1, y1, x2, y2, x3, y3, x4, y4 ) {
- var isOnSegment = function (xi, yi, xj, yj, xk, yk) {
- // changed <= to < so the segments are allowed to touch!
- return (xi < xk || xj < xk) &&
- (xk < xi || xk < xj) &&
- (yi < yk || yj < yk) &&
- (yk < yi || xk < yj);
- };
+ var p0 = this._digitizePoints[0].pos;
+ var pn = this._digitizePoints[max].pos;
+ for (var i = 0; i < max; i++) {
+ var pi = this._digitizePoints[i].pos;
+ var pj = this._digitizePoints[i + 1].pos;
- var computeDirection = function (xi, yi, xj, yj, xk, yk) {
- var a = (xk - xi) * (yj - yi);
- var b = (xj - xi) * (yk - yi);
- return a < b ? -1 : a > b ? 1 : 0;
- };
+ if (i > 0 && this._lineIntersect(
+ pi.x, pi.y, pj.x, pj.y,
+ p0.x, p0.y, posLocal.x, posLocal.y)
+ ) {
+ return false;
+ }
+ if (this._lineIntersect(
+ pi.x, pi.y, pj.x, pj.y,
+ pn.x, pn.y, posLocal.x, posLocal.y)
+ ) {
+ this._currentPolygonIsInvalid = true;
+ return false;
+ }
+ }
+ this._currentPolygonIsInvalid = false;
+ return true;
+ },
+ _lineIntersect: function ( x1, y1, x2, y2, x3, y3, x4, y4 ) {
+ var isOnSegment = function (xi, yi, xj, yj, xk, yk) {
+ // changed <= to < so the segments are allowed to touch!
+ return (xi < xk || xj < xk) &&
+ (xk < xi || xk < xj) &&
+ (yi < yk || yj < yk) &&
+ (yk < yi || xk < yj);
+ };
- var e1 = computeDirection(x3, y3, x4, y4, x1, y1);
- var e2 = computeDirection(x3, y3, x4, y4, x2, y2);
- var e3 = computeDirection(x1, y1, x2, y2, x3, y3);
- var e4 = computeDirection(x1, y1, x2, y2, x4, y4);
- return (((e1 > 0 && e2 < 0) || (e1 < 0 && e2 > 0)) &&
- ((e3 > 0 && e4 < 0) || (e3 < 0 && e4 > 0))) ||
- (e1 === 0 && isOnSegment(x3, y3, x4, y4, x1, y1)) ||
- (e2 === 0 && isOnSegment(x3, y3, x4, y4, x2, y2)) ||
- (e3 === 0 && isOnSegment(x1, y1, x2, y2, x3, y3)) ||
- (e4 === 0 && isOnSegment(x1, y1, x2, y2, x4, y4));
- },
- _toRad: function (deg) {
- return deg * Math.PI/180;
- },
- //
- // calculate area
- //
- _calculateAreaMetric: function (pos) {
- if (this._digitizePoints.length < 2) {
- return null;
- }
- this._digitizePoints.push(pos);
- var part, area = 0;
- var p0 = this._digitizePoints[0].pos, pi, pj;
- for (var i = 0; i < this._digitizePoints.length - 1; i++) {
- pi = this._digitizePoints[i].pos;
- pj = this._digitizePoints[i + 1].pos;
- part = (pi.y + pj.y) * (pi.x - pj.x) / 2;
- area += part;
- }
- part = (pj.y + p0.y) * (pj.x - p0.x) / 2;
- area += part;
- this._digitizePoints.pop();
- return Math.abs(area);
- },
- _calculateAreaGeographic: function (pos) {
- if (this._digitizePoints.length < 2) {
- return null;
- }
+ var computeDirection = function (xi, yi, xj, yj, xk, yk) {
+ var a = (xk - xi) * (yj - yi);
+ var b = (xj - xi) * (yk - yi);
+ return a < b ? -1 : a > b ? 1 : 0;
+ };
- // add current point and first point
- this._digitizePoints.push({
- pos: pos
- });
- this._digitizePoints.push(this._digitizePoints[0]);
+ var e1 = computeDirection(x3, y3, x4, y4, x1, y1);
+ var e2 = computeDirection(x3, y3, x4, y4, x2, y2);
+ var e3 = computeDirection(x1, y1, x2, y2, x3, y3);
+ var e4 = computeDirection(x1, y1, x2, y2, x4, y4);
+ return (((e1 > 0 && e2 < 0) || (e1 < 0 && e2 > 0)) &&
+ ((e3 > 0 && e4 < 0) || (e3 < 0 && e4 > 0))) ||
+ (e1 === 0 && isOnSegment(x3, y3, x4, y4, x1, y1)) ||
+ (e2 === 0 && isOnSegment(x3, y3, x4, y4, x2, y2)) ||
+ (e3 === 0 && isOnSegment(x1, y1, x2, y2, x3, y3)) ||
+ (e4 === 0 && isOnSegment(x1, y1, x2, y2, x4, y4));
+ },
+ _toRad: function (deg) {
+ return deg * Math.PI/180;
+ },
+ //
+ // calculate area
+ //
+ _calculateAreaMetric: function (pos) {
+ if (this._digitizePoints.length < 2) {
+ return null;
+ }
+ this._digitizePoints.push(pos);
+ var part, area = 0;
+ var p0 = this._digitizePoints[0].pos, pi, pj;
+ for (var i = 0; i < this._digitizePoints.length - 1; i++) {
+ pi = this._digitizePoints[i].pos;
+ pj = this._digitizePoints[i + 1].pos;
+ part = (pi.y + pj.y) * (pi.x - pj.x) / 2;
+ area += part;
+ }
+ part = (pj.y + p0.y) * (pj.x - p0.x) / 2;
+ area += part;
+ this._digitizePoints.pop();
+ return Math.abs(area);
+ },
+ _calculateAreaGeographic: function (pos) {
+ if (this._digitizePoints.length < 2) {
+ return null;
+ }
+ // add current point and first point
+ this._digitizePoints.push({
+ pos: pos
+ });
+ this._digitizePoints.push(this._digitizePoints[0]);
+
var area = 0.0;
var p1, p2;
for(var i=0; i<this._digitizePoints.length-1; i++) {
p1 = this._digitizePoints[i].pos;
p2 = this._digitizePoints[i+1].pos;
- var c = this._toRad(p2.x - p1.x) *
- (2 + Math.sin(toRad(p1.y)) +
- Math.sin(toRad(p2.y)));
+ var c = this._toRad(p2.x - p1.x) *
+ (2 + Math.sin(toRad(p1.y)) +
+ Math.sin(toRad(p2.y)));
area += c;
}
area = area * 6378137.0 * 6378137.0 / 2.0;
- // remove current point and first point
- this._digitizePoints.pop();
- this._digitizePoints.pop();
+ // remove current point and first point
+ this._digitizePoints.pop();
+ this._digitizePoints.pop();
- return Math.abs(area);
- },
- _calculateArea: function (pos) {
- switch (this._map.getSrs()) {
- case "EPSG:4326":
- return this._calculateAreaGeographic(pos);
- default:
- return this._calculateAreaMetric(pos);
- }
- return null;
- },
- _isPointSnapped: function (p1, p2) {
- return p1.dist(p2) <= this.options.digitizePointDiameter/2;
- },
- _isFirstPointSnapped: function (p) {
- if (this._digitizePoints.length > 0 ) {
- var pos0 = this._digitizePoints[0].mousePos;
- if (this._digitizePoints.length > 2 && this._isPointSnapped(pos0, p)) {
- return true;
- }
- }
- return false;
- },
- _isLastPointSnapped: function (p) {
- if (this._digitizePoints.length > 0 ) {
- var posn = this._digitizePoints[this._digitizePoints.length - 1].mousePos;
- if (this._digitizePoints.length > 1 && this._isPointSnapped(posn, p)) {
- return true;
- }
- }
- return false;
- },
- _draw: function (pos, drawOptions) {
- this._canvas.clear();
+ return Math.abs(area);
+ },
+ _calculateArea: function (pos) {
+ switch (this._map.getSrs()) {
+ case "EPSG:4326":
+ return this._calculateAreaGeographic(pos);
+ default:
+ return this._calculateAreaMetric(pos);
+ }
+ return null;
+ },
+ _isPointSnapped: function (p1, p2) {
+ return p1.dist(p2) <= this.options.digitizePointDiameter/2;
+ },
+ _isFirstPointSnapped: function (p) {
+ if (this._digitizePoints.length > 0 ) {
+ var pos0 = this._digitizePoints[0].mousePos;
+ if (this._digitizePoints.length > 2 && this._isPointSnapped(pos0, p)) {
+ return true;
+ }
+ }
+ return false;
+ },
+ _isLastPointSnapped: function (p) {
+ if (this._digitizePoints.length > 0 ) {
+ var posn = this._digitizePoints[this._digitizePoints.length - 1].mousePos;
+ if (this._digitizePoints.length > 1 && this._isPointSnapped(posn, p)) {
+ return true;
+ }
+ }
+ return false;
+ },
+ _draw: function (pos, drawOptions) {
+ this._canvas.clear();
- var str_path = "";
+ var str_path = "";
- if (pos && drawOptions && !drawOptions.highlightFirst) {
- this._digitizePoints.push(pos);
- }
+ if (pos && drawOptions && !drawOptions.highlightFirst) {
+ this._digitizePoints.push(pos);
+ }
- var len = this._digitizePoints.length;
- if (len > 0) {
- for (var k=0; k < len; k++) {
- var pk = this._digitizePoints[k].pos;
- var q = this._digitizePoints[k].mousePos;
+ var len = this._digitizePoints.length;
+ if (len > 0) {
+ for (var k=0; k < len; k++) {
+ var pk = this._digitizePoints[k].pos;
+ var q = this._digitizePoints[k].mousePos;
- str_path += (k === 0) ? 'M' : 'L';
- str_path += q.x + ' ' + q.y;
+ str_path += (k === 0) ? 'M' : 'L';
+ str_path += q.x + ' ' + q.y;
- if (drawOptions.highlightFirst && k === len - 1) {
- var p0 = this._digitizePoints[0].mousePos;
- str_path += 'L' + p0.x + ' ' + p0.y;
+ if (drawOptions.highlightFirst && k === len - 1) {
+ var p0 = this._digitizePoints[0].mousePos;
+ str_path += 'L' + p0.x + ' ' + p0.y;
- }
- if (drawOptions && drawOptions.highlightLast && k === len - 1) {
- continue;
- }
+ }
+ if (drawOptions && drawOptions.highlightLast && k === len - 1) {
+ continue;
+ }
- if (drawOptions && drawOptions.drawPoints &&
- (k === 0 && !this._polygonIsInvalid || k >= len - 2 && !drawOptions.highlightFirst)) {
+ if (drawOptions && drawOptions.drawPoints &&
+ (k === 0 && !this._polygonIsInvalid || k >= len - 2 && !drawOptions.highlightFirst)) {
- var circle = this._canvas.circle(q.x, q.y, this.options.digitizePointDiameter);
+ var circle = this._canvas.circle(q.x, q.y, this.options.digitizePointDiameter);
- if (k === 0) {
- circle.attr({
- fill: drawOptions && drawOptions.highlightFirst ?
- this.options.pointFillSnapped : this.options.pointFillDefault,
- "fill-opacity": this.options.opacity,
- stroke: drawOptions.highlightFirst || drawOptions.highlightLast ?
- this.options.pointStrokeSnapped: this.options.pointStrokeDefault,
- "stroke-width": this.options.pointStrokeWidthDefault
- });
- }
- else {
- circle.attr({
- fill: drawOptions && drawOptions.highlightLast && k === len - 2 ?
- this.options.pointFillSnapped : this.options.pointFillDefault,
- "fill-opacity": this.options.opacity,
- stroke: drawOptions.highlightFirst || drawOptions.highlightLast ?
- this.options.pointStrokeSnapped: this.options.pointStrokeDefault,
- "stroke-width": this.options.pointStrokeWidthDefault
- });
- }
- }
- }
- }
- if (pos && drawOptions && !drawOptions.highlightFirst) {
- this._digitizePoints.pop();
- }
+ if (k === 0) {
+ circle.attr({
+ fill: drawOptions && drawOptions.highlightFirst ?
+ this.options.pointFillSnapped : this.options.pointFillDefault,
+ "fill-opacity": this.options.opacity,
+ stroke: drawOptions.highlightFirst || drawOptions.highlightLast ?
+ this.options.pointStrokeSnapped: this.options.pointStrokeDefault,
+ "stroke-width": this.options.pointStrokeWidthDefault
+ });
+ }
+ else {
+ circle.attr({
+ fill: drawOptions && drawOptions.highlightLast && k === len - 2 ?
+ this.options.pointFillSnapped : this.options.pointFillDefault,
+ "fill-opacity": this.options.opacity,
+ stroke: drawOptions.highlightFirst || drawOptions.highlightLast ?
+ this.options.pointStrokeSnapped: this.options.pointStrokeDefault,
+ "stroke-width": this.options.pointStrokeWidthDefault
+ });
+ }
+ }
+ }
+ }
+ if (pos && drawOptions && !drawOptions.highlightFirst) {
+ this._digitizePoints.pop();
+ }
- if (this._isPolygon(this._digitizePoints, pos) && drawOptions && !drawOptions.highlightLast && !this.polygonIsInvalid) {
- var poly = this._canvas.path(str_path + 'Z');
- poly.attr({
- fill: drawOptions.highlightFirst ?
- this.options.polygonFillSnapped : this.options.polygonFillDefault,
- stroke: drawOptions.highlightFirst || drawOptions.highlightLast ?
- this.options.lineStrokeSnapped: this.options.lineStrokeDefault,
- "stroke-width": drawOptions.highlightFirst ?
- this.options.polygonStrokeWidthSnapped : this.options.polygonStrokeWidthDefault,
- opacity: this.options.opacity
- });
- }
+ if (this._isPolygon(this._digitizePoints, pos) && drawOptions && !drawOptions.highlightLast && !this.polygonIsInvalid) {
+ var poly = this._canvas.path(str_path + 'Z');
+ poly.attr({
+ fill: drawOptions.highlightFirst ?
+ this.options.polygonFillSnapped : this.options.polygonFillDefault,
+ stroke: drawOptions.highlightFirst || drawOptions.highlightLast ?
+ this.options.lineStrokeSnapped: this.options.lineStrokeDefault,
+ "stroke-width": drawOptions.highlightFirst ?
+ this.options.polygonStrokeWidthSnapped : this.options.polygonStrokeWidthDefault,
+ opacity: this.options.opacity
+ });
+ }
- var line = this._canvas.path(str_path);
- line.attr({
- stroke: drawOptions && (drawOptions.highlightFirst || drawOptions.highlightLast) ?
- this.options.lineStrokeSnapped : this.options.lineStrokeDefault,
- "stroke-width": drawOptions && drawOptions.highlightLast ?
- this.options.lineStrokeWidthSnapped : this.options.lineStrokeWidthDefault
- });
- line.toFront();
- },
- _digitize: function (e) {
- var mousePos = this._map.getMousePosition(e);
- var firstPointSnapped = this._isFirstPointSnapped(mousePos)
- && !this._polygonIsInvalid;
- var lastPointSnapped = this._isLastPointSnapped(mousePos);
+ var line = this._canvas.path(str_path);
+ line.attr({
+ stroke: drawOptions && (drawOptions.highlightFirst || drawOptions.highlightLast) ?
+ this.options.lineStrokeSnapped : this.options.lineStrokeDefault,
+ "stroke-width": drawOptions && drawOptions.highlightLast ?
+ this.options.lineStrokeWidthSnapped : this.options.lineStrokeWidthDefault
+ });
+ line.toFront();
+ },
+ _digitize: function (e) {
+ var mousePos = this._map.getMousePosition(e);
+ var firstPointSnapped = this._isFirstPointSnapped(mousePos)
+ && !this._polygonIsInvalid;
+ var lastPointSnapped = this._isLastPointSnapped(mousePos);
- var digitizeData = {
- pos: {
- mousePos: mousePos,
- pos: firstPointSnapped ?
- this._digitizePoints[0].pos : lastPointSnapped ?
- this._digitizePoints[this._digitizePoints.length - 1].pos :
- this._map.convertPixelToReal(mousePos)
- }
- };
+ var digitizeData = {
+ pos: {
+ mousePos: mousePos,
+ pos: firstPointSnapped ?
+ this._digitizePoints[0].pos : lastPointSnapped ?
+ this._digitizePoints[this._digitizePoints.length - 1].pos :
+ this._map.convertPixelToReal(mousePos)
+ }
+ };
- this._trigger("update", null, digitizeData);
+ this._trigger("update", null, digitizeData);
- this._draw(digitizeData.pos, {
- highlightFirst: firstPointSnapped,
- highlightLast: lastPointSnapped,
- drawPoints: true
- });
- },
- _reinitialize: function (e) {
- this.element
- .unbind("click", $.proxy(this, "_reinitialize"))
- this._trigger("reinitialize", e);
- return false;
- },
- _addLastPoint: function (e) {
- this._trigger("lastpointadded", e);
+ this._draw(digitizeData.pos, {
+ highlightFirst: firstPointSnapped,
+ highlightLast: lastPointSnapped,
+ drawPoints: true
+ });
+ },
+ _reinitialize: function (e) {
+ this.element
+ .unbind("click", $.proxy(this, "_reinitialize"))
+ this._trigger("reinitialize", e);
+ return false;
+ },
+ _addLastPoint: function (e) {
+ this._trigger("lastpointadded", e);
- this.element.unbind("click", this._addPoint)
- .unbind("mousemove", this._digitize)
- .css("cursor", "auto")
- .bind("click", $.proxy(this, "_reinitialize"));
- },
- _addPoint: function (e) {
- var mousePos = this._map.getMousePosition(e);
+ this.element.unbind("click", this._addPoint)
+ .unbind("mousemove", this._digitize)
+ .css("cursor", "auto")
+ .bind("click", $.proxy(this, "_reinitialize"));
+ },
+ _addPoint: function (e) {
+ var mousePos = this._map.getMousePosition(e);
- var len = this._digitizePoints.length;
+ var len = this._digitizePoints.length;
- var data = {
- pos: {
- mousePos: mousePos,
- pos: this._map.convertPixelToReal(mousePos)
- }
- };
+ var data = {
+ pos: {
+ mousePos: mousePos,
+ pos: this._map.convertPixelToReal(mousePos)
+ }
+ };
- this._trigger("pointadded", e, data);
+ this._trigger("pointadded", e, data);
- var firstPointSnapped = this._isFirstPointSnapped(mousePos);
- var lastPointSnapped = this._isLastPointSnapped(mousePos);
+ var firstPointSnapped = this._isFirstPointSnapped(mousePos);
+ var lastPointSnapped = this._isLastPointSnapped(mousePos);
- this._isPolygon(this._digitizePoints, data.pos);
- if (this._currentPolygonIsInvalid) {
- this._polygonIsInvalid = true;
- }
- this._currentPolygonIsInvalid = false;
+ this._isPolygon(this._digitizePoints, data.pos);
+ if (this._currentPolygonIsInvalid) {
+ this._polygonIsInvalid = true;
+ }
+ this._currentPolygonIsInvalid = false;
- if (lastPointSnapped || firstPointSnapped) {
- this._draw(data.pos, {
- highlightFirst: firstPointSnapped,
- highlightLast: lastPointSnapped,
- drawPoints: false
- });
- this._digitizePoints.closedPolygon = firstPointSnapped;
- this._digitizePoints.closedLine = lastPointSnapped;
- this._addLastPoint(e);
- }
- else {
- this._digitizePoints.push(data.pos);
+ if (lastPointSnapped || firstPointSnapped) {
+ this._draw(data.pos, {
+ highlightFirst: firstPointSnapped,
+ highlightLast: lastPointSnapped,
+ drawPoints: false
+ });
+ this._digitizePoints.closedPolygon = firstPointSnapped;
+ this._digitizePoints.closedLine = lastPointSnapped;
+ this._addLastPoint(e);
+ }
+ else {
+ this._digitizePoints.push(data.pos);
- lastPointSnapped = this._isLastPointSnapped(mousePos);
- this._draw(data.pos, {
- highlightFirst: firstPointSnapped,
- highlightLast: lastPointSnapped,
- drawPoints: true
- });
- }
- return true;
- },
- _redraw: function () {
- if (!$(this.element).data("mb_digitize")) {
- return;
- }
- var len = this._digitizePoints.length;
- if (len === 0) {
- return;
- }
- for (var i = 0; i < len; i++) {
- var p = this._digitizePoints[i];
- p.mousePos = this._map.convertRealToPixel(p.pos);
- }
- if (this._digitizePoints.closedPolygon) {
- this._draw(undefined, {
- highlightFirst: true,
- highlightLast: false,
- drawPoints: false
- });
- }
- else if (this._digitizePoints.closedLine) {
- this._draw(undefined, {
- highlightFirst: false,
- highlightLast: true,
- drawPoints: false
- });
- }
- else {
- this._draw(undefined, {
- highlightFirst: false,
- highlightLast: false,
- drawPoints: false
- });
- }
- },
- _init: function () {
- if (this._digitizePoints.closedLine || this._digitizePoints.closedPolygon) {
- this._digitizePoints = [];
- this._canvas.clear();
- }
- this.element
- .bind("click", $.proxy(this, "_addPoint"))
- .bind("mousemove", $.proxy(this, "_digitize"))
- .css("cursor", "crosshair");
+ lastPointSnapped = this._isLastPointSnapped(mousePos);
+ this._draw(data.pos, {
+ highlightFirst: firstPointSnapped,
+ highlightLast: lastPointSnapped,
+ drawPoints: true
+ });
+ }
+ return true;
+ },
+ _redraw: function () {
+ if (!$(this.element).data("mb_digitize")) {
+ return;
+ }
+ var len = this._digitizePoints.length;
+ if (len === 0) {
+ return;
+ }
+ for (var i = 0; i < len; i++) {
+ var p = this._digitizePoints[i];
+ p.mousePos = this._map.convertRealToPixel(p.pos);
+ }
+ if (this._digitizePoints.closedPolygon) {
+ this._draw(undefined, {
+ highlightFirst: true,
+ highlightLast: false,
+ drawPoints: false
+ });
+ }
+ else if (this._digitizePoints.closedLine) {
+ this._draw(undefined, {
+ highlightFirst: false,
+ highlightLast: true,
+ drawPoints: false
+ });
+ }
+ else {
+ this._draw(undefined, {
+ highlightFirst: false,
+ highlightLast: false,
+ drawPoints: false
+ });
+ }
+ },
+ _init: function () {
+ if (this._digitizePoints.closedLine || this._digitizePoints.closedPolygon) {
+ this._digitizePoints = [];
+ this._canvas.clear();
+ }
+ this.element
+ .bind("click", $.proxy(this, "_addPoint"))
+ .bind("mousemove", $.proxy(this, "_digitize"))
+ .css("cursor", "crosshair");
- },
- _create: function () {
- this._digitizePoints = [];
+ },
+ _create: function () {
+ this._digitizePoints = [];
- // ":maps" is a Mapbender selector which
- // checks if an element is a Mapbender map
- this.element = this.element.filter(":maps");
+ // ":maps" is a Mapbender selector which
+ // checks if an element is a Mapbender map
+ this.element = this.element.filter(":maps");
- if (!this.element.jquery || this.element.size() === 0) {
- $.error("This widget must be applied to a Mapbender map.");
- }
+ if (!this.element.jquery || this.element.size() === 0) {
+ $.error("This widget must be applied to a Mapbender map.");
+ }
- this._map = this.element.mapbender();
- this._map.events.afterMapRequest.register($.proxy(this._redraw, this));
- this._srs = this._map.getSrs();
+ this._map = this.element.mapbender();
+ this._map.events.afterMapRequest.register($.proxy(this._redraw, this));
+ this._srs = this._map.getSrs();
- this._$canvas = $("<div id='digitize_canvas' />").css({
- "z-index": 1000,
- "position": "absolute"
- }).appendTo(this.element);
- this._canvas = Raphael(this._$canvas.get(0), this._map.getWidth(), this._map.getHeight());
- mb_registerPanSubElement($(this._canvas.canvas).parent().get(0));
- },
- // the digitized geometry will be available, the events will be deleted
- deactivate: function () {
- this.element
- .unbind("click", this._addPoint)
- .unbind("mousemove", this._digitize)
- .unbind("click", this._reinitialize)
- .css("cursor", "default");
- },
- // delete everything
- destroy: function () {
- this.deactivate();
- this._canvas.clear();
- this._digitizePoints = [];
- this._$canvas.remove();
- this._map.events.afterMapRequest.unregister($.proxy(this._redraw, this));
+ this._$canvas = $("<div id='digitize_canvas' />").css({
+ "z-index": 1000,
+ "position": "absolute"
+ }).appendTo(this.element);
+ this._canvas = Raphael(this._$canvas.get(0), this._map.getWidth(), this._map.getHeight());
+ mb_registerPanSubElement($(this._canvas.canvas).parent().get(0));
+ },
+ // the digitized geometry will be available, the events will be deleted
+ deactivate: function () {
+ this.element
+ .unbind("click", this._addPoint)
+ .unbind("mousemove", this._digitize)
+ .unbind("click", this._reinitialize)
+ .css("cursor", "default");
+ },
+ // delete everything
+ destroy: function () {
+ this.deactivate();
+ this._canvas.clear();
+ this._digitizePoints = [];
+ this._$canvas.remove();
+ this._map.events.afterMapRequest.unregister($.proxy(this._redraw, this));
- $.Widget.prototype.destroy.apply(this, arguments); // default destroy
- $(this.element).data("mb_digitize", null);
- }
+ $.Widget.prototype.destroy.apply(this, arguments); // default destroy
+ $(this.element).data("mb_digitize", null);
+ }
});
Modified: trunk/mapbender/lib/mb.ui.displayKmlFeatures.js
===================================================================
--- trunk/mapbender/lib/mb.ui.displayKmlFeatures.js 2014-05-07 08:51:46 UTC (rev 8820)
+++ trunk/mapbender/lib/mb.ui.displayKmlFeatures.js 2014-05-07 11:06:01 UTC (rev 8821)
@@ -3,196 +3,197 @@
// georss:error - a georssfeed failed to load: function(url,error);
var originalI18nObject = {
- "labelLoadError" : "Could not load Document",
- "labelName":"Name",
- "labelUntitled":"Untitled",
- "labelUrlBox": "Paste URL here",
- "sProcessing": "Processing...",
- "sLengthMenu": "Show _MENU_ entries",
- "sZeroRecords": "No matching records found",
- "sInfo": "SLowing _START_ to _END_ of _TOTAL_ entries",
- "sInfoEmpty": "Showing 0 to 0 of 0 entries",
- "sInfoFiltered": "(filtered from _MAX_ total entries)",
- "sInfoPostFix": "",
- "sSearch": "Search:",
- "sUrl": "",
- "oPaginate": {
- "sFirst": "First",
- "sPrevious": "Previous",
- "sNext": "Next",
- "sLast": "Last"
- }
+ "labelLoadError" : "Could not load Document",
+ "labelName":"Name",
+ "labelUntitled":"Untitled",
+ "labelUrlBox": "Paste URL here",
+ "sProcessing": "Processing...",
+ "sLengthMenu": "Show _MENU_ entries",
+ "sZeroRecords": "No matching records found",
+ "sInfo": "SLowing _START_ to _END_ of _TOTAL_ entries",
+ "sInfoEmpty": "Showing 0 to 0 of 0 entries",
+ "sInfoFiltered": "(filtered from _MAX_ total entries)",
+ "sInfoPostFix": "",
+ "sSearch": "Search:",
+ "sUrl": "",
+ "oPaginate": {
+ "sFirst": "First",
+ "sPrevious": "Previous",
+ "sNext": "Next",
+ "sLast": "Last"
+ }
};
var translatedI18nObject = Mapbender.cloneObject(originalI18nObject);
//var translatedI18nObject = originalI18nObject;
var displayFeatures = {
- options: {
- url: "",
- position: 'right',
- autoOpen: true,
- autoDisplay: true
- },
- _kmls: {},
+ options: {
+ url: "",
+ position: 'right',
+ autoOpen: true,
+ autoDisplay: true
+ },
+ _kmls: {},
kmlOrder: [],
- _popup : null,
- _create: function(){
- var self = this, o = this.options;
- this.element.bind('click', function(e){
- var map = self.element.mapbender();
- var pos = map.getMousePosition(e);
- var clickPoint = map.convertPixelToReal(new Point(pos.x,pos.y));
- var feed = null;
- var requestGeometries = [];
- // This uses two methods to determine wether a clickposition is on a geometry
- // - Points are represented as icons, so we check if the click is on an icon
- // - Polygons don't have a dom Element when not using Rapheljs, so we go ask postgis
- // after that's finished the results are merged and displayed in a box
- var pointGeometries = {};
- var g,h,nodes = null;
- $("*",self._popup).remove();
- var $tabs = $("<ul></ul>");
- for (var i in self.kmlOrder){
- feed = self._kmls[self.kmlOrder[i]] ;
- if(!feed.display){ continue; }
- requestGeometries = [];
+ _popup : null,
+ _create: function(){
+ var self = this, o = this.options;
+ this.element.bind('click', function(e){
+ var map = self.element.mapbender();
+ var pos = map.getMousePosition(e);
+ var clickPoint = map.convertPixelToReal(new Point(pos.x,pos.y));
+ var feed = null;
+ var requestGeometries = [];
+ // This uses two methods to determine wether a clickposition is on a geometry
+ // - Points are represented as icons, so we check if the click is on an icon
+ // - Polygons don't have a dom Element when not using Rapheljs, so we go ask postgis
+ // after that's finished the results are merged and displayed in a box
+ var pointGeometries = {};
+ var g,h,nodes = null;
+ $("*",self._popup).remove();
+ var $tabs = $("<ul></ul>");
+ for (var i in self.kmlOrder){
+ feed = self._kmls[self.kmlOrder[i]] ;
+ if(!feed.display){ continue; }
+ requestGeometries = [];
- for(var j = 0; j < feed.geomArray.count(); j++){
- g = feed.geomArray.get(j);
- h = feed.highlightArray[j];
- nodes = h.getNodes();
- if(g.geomType == geomType.point){
- // we only add one point per highlight so we can assume there's only one node
- if(!nodes[0]){ continue;}
- var rect = nodes[0].getBoundingClientRect();
- if(e.clientX >= rect.left && e.clientX <= rect.right &&
- e.clientY >= rect.top && e.clientY <= rect.bottom){
- // we just need the keys to exist
- // theywill be merged with the ones coming from the
- // server
- pointGeometries[j] = true;
- }
+ for(var j = 0; j < feed.geomArray.count(); j++){
+ g = feed.geomArray.get(j);
+ h = feed.highlightArray[j];
+ nodes = h.getNodes();
+ if(g.geomType == geomType.point){
+ // we only add one point per highlight so we can assume there's only one node
+ if(!nodes[0]){ continue;}
+ var rect = nodes[0].getBoundingClientRect();
+ if(e.clientX >= rect.left && e.clientX <= rect.right &&
+ e.clientY >= rect.top && e.clientY <= rect.bottom){
+ // we just need the keys to exist
+ // theywill be merged with the ones coming from the
+ // server
+ pointGeometries[j] = true;
+ }
- }else{
- requestGeometries.push(g.toText());
- }
- }
- var req = new Mapbender.Ajax.Request({
- url: "../php/intersection.php",
- method: "intersect",
- parameters: {
- clickPoint: clickPoint.toText(),
- geometries: requestGeometries
- },
- callback: (function(geomArray,pointGeometries){ return function(result, success, message){
- if(!success){
- return;
- }
- // this is basically an onclick handler, !intersects means
- // the click didn't happen on the polygon
- $.extend(result.geometries,pointGeometries);
- if(!result.geometries || result.geometries.length <1){
- return;
- }
+ }else{
+ requestGeometries.push(g.toText());
+ }
+ }
+ var req = new Mapbender.Ajax.Request({
+ url: "../php/intersection.php",
+ method: "intersect",
+ parameters: {
+ clickPoint: clickPoint.toText(),
+ geometries: requestGeometries
+ },
+ callback: (function(geomArray,pointGeometries){ return function(result, success, message){
+ if(!success){
+ return;
+ }
+ // this is basically an onclick handler, !intersects means
+ // the click didn't happen on the polygon
+ $.extend(result.geometries,pointGeometries);
+ if(!result.geometries || result.geometries.length <1){
+ return;
+ }
- // this iterates over an object where the keys are _not_ the incremential
- // basically a sparse array. therefore It cannot be used to count the entries in the object
- // this is why j is used
- for(i in result.geometries){
- var g = geomArray.get(i);
- title = g.e.getElementValueByName("title");
- name = g.e.getElementValueByName("name");
- if(typeof(name) == "string"){
- title = name != "false" ? name : title;
- if (icon == "false"){
- g.e.setElement("Mapbender:icon","../img/marker/red.png");
- }
- }else{
- //sane browsers go here
- title = name != false ? name : title;
- if (icon === false){
- g.e.setElement("Mapbender:icon","../img/marker/red.png");
- }
- }
- description = g.e.getElementValueByName("description");
- $tabs.append('<li><a href="#rsspopup_'+ i +'">'+ title + '</a></li>');
- self._popup.append('<div id="rsspopup_'+ i +'"><h1>'+ title +'</h1><p>'+ description +'</p></h1>');
+ // this iterates over an object where the keys are _not_ the incremential
+ // basically a sparse array. therefore It cannot be used to count the entries in the object
+ // this is why j is used
+ for(i in result.geometries){
+ var g = geomArray.get(i);
+ title = g.e.getElementValueByName("title");
+ name = g.e.getElementValueByName("name");
+ if(typeof(name) == "string"){
+ title = name != "false" ? name : title;
+ if (icon == "false"){
+ g.e.setElement("Mapbender:icon","../img/marker/red.png");
+ }
+ }else{
+ //sane browsers go here
+ title = name != false ? name : title;
+ if (icon === false){
+ g.e.setElement("Mapbender:icon","../img/marker/red.png");
+ }
+ }
+ description = g.e.getElementValueByName("description");
+ $tabs.append('<li><a href="#rsspopup_'+ i +'">'+ title + '</a></li>');
+ self._popup.append('<div id="rsspopup_'+ i +'"><h1>'+ title +'</h1><p>'+ description +'</p></h1>');
- if($tabs.children().size() > 1){
- }
- self._popup.dialog('open');
- }
+ if($tabs.children().size() > 1){
+ }
+ self._popup.dialog('open');
+ }
- if($tabs.children().size() > 1){
- var $tabcontainer = $("<div><div>");
- $tabcontainer.append($tabs);
- $tabcontainer.append($('div',self._popup));
- $tabs.css("display","none");
- self._popup.append($tabcontainer);
- $tabcontainer.tabs();
- // -1 because we need it zero based later
- var tabcount = $tabcontainer.find(".ui-tabs-panel").size() -1;
- $tabcontainer.find(".ui-tabs-panel").each(function(i){
+ if($tabs.children().size() > 1){
+ var $tabcontainer = $("<div><div>");
+ $tabcontainer.append($tabs);
+ $tabcontainer.append($('div',self._popup));
+ $tabs.css("display","none");
+ self._popup.append($tabcontainer);
+ $tabcontainer.tabs();
+ // -1 because we need it zero based later
+ var tabcount = $tabcontainer.find(".ui-tabs-panel").size() -1;
+ $tabcontainer.find(".ui-tabs-panel").each(function(i){
- var $navbar = $("<div></div>");
- $(this).append($navbar);
- // add to first panel
- if(i == 0 ){
- var next = i+1;
- $navbar.append('<a style="float:right;" href="#" class="next-tab" rel="'+next+'">mehr</a>');
- }
- // add to all except the first panel
- if(i > 0 ){
- var prev = i-1;
- $navbar.append('<a href="#" class="prev-tab" rel="'+prev+'">zurück</a>');
- }
- // add to all except first and last panel
- if( tabcount > i && i > 0 ){
- var next = i+1;
- $navbar.append('<a style="float:right;" href="#" class="next-tab" rel="'+next+'">vor</a>');
- }
- });
- $tabcontainer.find(".next-tab, .prev-tab").click(function(){
- $tabcontainer.tabs("select",$(this).attr("rel"));
- return false;
- });
- }
- };})(feed.geomArray, pointGeometries)
- });
- req.send();
- requestGeometries = [];
- pointGeometries = {};
- }
- });
- self.element.bind('kml:loaded',function(event,obj){
- if(o.autoOpen){
- self._display(obj);
- }
- });
- self.element.bind('kml:error',function(event,message){
- alert(message);
- });
+ var $navbar = $("<div></div>");
+ $(this).append($navbar);
+ // add to first panel
+ if(i == 0 ){
+ var next = i+1;
+ $navbar.append('<a style="float:right;" href="#" class="next-tab" rel="'+next+'">mehr</a>');
+ }
+ // add to all except the first panel
+ if(i > 0 ){
+ var prev = i-1;
+ $navbar.append('<a href="#" class="prev-tab" rel="'+prev+'">zurück</a>');
+ }
+ // add to all except first and last panel
+ if( tabcount > i && i > 0 ){
+ var next = i+1;
+ $navbar.append('<a style="float:right;" href="#" class="next-tab" rel="'+next+'">vor</a>');
+ }
+ });
+ $tabcontainer.find(".next-tab, .prev-tab").click(function(){
+ $tabcontainer.tabs("select",$(this).attr("rel"));
+ return false;
+ });
+ }
+ };})(feed.geomArray, pointGeometries)
+ });
+ req.send();
+ requestGeometries = [];
+ pointGeometries = {};
+ }
+ });
+ self.element.bind('kml:loaded',function(event,obj){
+ if(o.autoOpen){
+ self._display(obj);
+ }
+ });
+ self.element.bind('kml:error',function(event,message){
+ alert(message);
+ });
- },
- _init: function(){
- var self = this, o = this.options;
- this._popup = $('<div></div>').dialog({autoOpen : false, height: 500, width: 500});
- if(o.url){
- self._load(o.url);
- }
- },
+ },
+ _init: function(){
+ var self = this, o = this.options;
+ this._popup = $('<div></div>').dialog({autoOpen : false, height: 500, width: 500});
+ if(o.url){
+ self._load(o.url);
+ }
+ },
addGeometry: function(pts) {
var $map = $(this.element).mapbender();
var self = this;
var tp = pts.closedPolygon ? geomType.polygon : (pts.closedLine ? geomType.line : geomType.point);
var itm;
- // todo select the one that's marked for editing
$.each(this._kmls, function(k, v) {
- itm = v;
+ if($('li[title="' + k + '"] > button[name="digitize-layer"]').hasClass('active')) {
+ itm = v;
+ }
});
for(var i in itm.highlightArray){
@@ -231,146 +232,146 @@
this.element.trigger('kml:loaded',{type:"geojson",data:itm.data,url:itm.url,display: itm.display, refreshing: true});
},
- _load : function(url){
- var self = this, o = this.options;
- var epsg = $(self.element).mapbender().epsg;
- epsg = epsg.split(":")[1];
- if(self._kmls[o.url]){
- //not adding feed twice
- return;
- }
- $.ajax({url: '../php/getOriginalKml.php',
- data: {url: o.url},
- type: 'POST',
- dataType: 'text/plain',
- success: function(data) {
- if(!self.originalKmls) {
- self.originalKmls = {};
- }
- self.originalKmls[o.url] = data;
- self.kmlOrder.push(o.url);
+ _load : function(url){
+ var self = this, o = this.options;
+ var epsg = $(self.element).mapbender().epsg;
+ epsg = epsg.split(":")[1];
+ if(self._kmls[o.url]){
+ //not adding feed twice
+ return;
+ }
+ $.ajax({url: '../php/getOriginalKml.php',
+ data: {url: o.url},
+ type: 'POST',
+ dataType: 'text/plain',
+ success: function(data) {
+ if(!self.originalKmls) {
+ self.originalKmls = {};
}
- });
+ self.originalKmls[o.url] = data;
+ self.kmlOrder.push(o.url);
+ }
+ });
- $.ajax({ url: '../php/kmlToGeoJSON.php',
- data: {url: o.url, targetEPSG: epsg},
- type: 'POST',
- dataType: "json",
- success : function(data,textStatus,xhr){
- if(!data){
- self.element.trigger('kml:error',"request returned no data");
- }
- else if(data.errorMessage){
- self.element.trigger('kml:error',data.errorMessage);
- }else{
- self._kmls[o.url] = {type:"geojson",data:data,url:o.url,display: o.autoDisplay};
- self.element.trigger('kml:loaded',{type:"geojson",data:data,url:o.url,display: o.autoDisplay});
- }
- },
- error: function(XMLHttpRequest, textStatus, errorThrown){
- self.element.trigger('kml:error',"Problem talking to server: " + errorThrown);
- }
- });
- var kmls = mb_getWmcExtensionData('KMLS');
+ $.ajax({ url: '../php/kmlToGeoJSON.php',
+ data: {url: o.url, targetEPSG: epsg},
+ type: 'POST',
+ dataType: "json",
+ success : function(data,textStatus,xhr){
+ if(!data){
+ self.element.trigger('kml:error',"request returned no data");
+ }
+ else if(data.errorMessage){
+ self.element.trigger('kml:error',data.errorMessage);
+ }else{
+ self._kmls[o.url] = {type:"geojson",data:data,url:o.url,display: o.autoDisplay};
+ self.element.trigger('kml:loaded',{type:"geojson",data:data,url:o.url,display: o.autoDisplay});
+ }
+ },
+ error: function(XMLHttpRequest, textStatus, errorThrown){
+ self.element.trigger('kml:error',"Problem talking to server: " + errorThrown);
+ }
+ });
+ var kmls = mb_getWmcExtensionData('KMLS');
// try{
- if(kmls) {
- kmls = JSON.parse(kmls);
- this._kmls = kmls;
- for(var k in kmls) {
- kmls[k].loadedOnStartup = true;
+ if(kmls) {
+ kmls = JSON.parse(kmls);
+ this._kmls = kmls;
+ for(var k in kmls) {
+ kmls[k].loadedOnStartup = true;
self._convertFromJson(kmls[k]);
- self.element.trigger('kml:loaded',kmls[k]);
- }
+ self.element.trigger('kml:loaded',kmls[k]);
}
- kmls = mb_getWmcExtensionData('ORIGINALKMLS');
- if(kmls) {
- this.originalKmls = kmls;
- }
- kmls = mb_getWmcExtensionData('KMLORDER');
- if(kmls) {
- this.kmlOrder = JSON.parse(kmls);
- }
+ }
+ kmls = mb_getWmcExtensionData('ORIGINALKMLS');
+ if(kmls) {
+ this.originalKmls = kmls;
+ }
+ kmls = mb_getWmcExtensionData('KMLORDER');
+ if(kmls) {
+ this.kmlOrder = JSON.parse(kmls);
+ }
// }catch(e){
// console.log(e)
// }
- },
+ },
- reload: function() {
- var self = this, o = this.options;
- var epsg = $(self.element).mapbender().epsg;
- epsg = epsg.split(":")[1];
+ reload: function() {
+ var self = this, o = this.options;
+ var epsg = $(self.element).mapbender().epsg;
+ epsg = epsg.split(":")[1];
- $.each(self.kmlOrder, function(k, url) {
- var o = self._kmls[url];
- if(!o) return;
- $('li[title="' + url + '"] > button[name="remove"]').click();
- $.ajax({ url: self._endpointURL + '?targetEPSG= ' + epsg,
- data: self.originalKmls[url],
- type: 'POST',
- dataType: "json",
- success : function(data,textStatus,xhr){
- if(!data){
- self.element.trigger('kml:error',"request returned no data");
- }
- else if(data.errorMessage){
- self.element.trigger('kml:error',data.errorMessage);
- }else{
- self._kmls[o.url] = {type:"geojson",data:data,url:o.url,display: o.display, loadedOnStartup: true};
- self.element.trigger('kml:loaded',{type:"geojson",data:data,url:o.url,display: o.display});
- }
- },
- error: function(XMLHttpRequest, textStatus, errorThrown){
- self.element.trigger('kml:error',"Problem talking to server: " + errorThrown);
- }
- });
- });
- },
+ $.each(self.kmlOrder, function(k, url) {
+ var o = self._kmls[url];
+ if(!o) return;
+ $('li[title="' + url + '"] > button[name="remove"]').click();
+ $.ajax({ url: self._endpointURL + '?targetEPSG= ' + epsg,
+ data: self.originalKmls[url],
+ type: 'POST',
+ dataType: "json",
+ success : function(data,textStatus,xhr){
+ if(!data){
+ self.element.trigger('kml:error',"request returned no data");
+ }
+ else if(data.errorMessage){
+ self.element.trigger('kml:error',data.errorMessage);
+ }else{
+ self._kmls[o.url] = {type:"geojson",data:data,url:o.url,display: o.display, loadedOnStartup: true};
+ self.element.trigger('kml:loaded',{type:"geojson",data:data,url:o.url,display: o.display});
+ }
+ },
+ error: function(XMLHttpRequest, textStatus, errorThrown){
+ self.element.trigger('kml:error',"Problem talking to server: " + errorThrown);
+ }
+ });
+ });
+ },
setOrder: function(order) {
this.kmlOrder = order;
this.reload();
},
- show : function(url){
- this._kmls[url].display = true;
- var $map = $(this.element).mapbender();
- var extent = $map.getExtentInfos();
- $map.calculateExtent(extent);
- $map.setMapRequest();
- $(this.element).mapbender().setMapRequest();
- },
+ show : function(url){
+ this._kmls[url].display = true;
+ var $map = $(this.element).mapbender();
+ var extent = $map.getExtentInfos();
+ $map.calculateExtent(extent);
+ $map.setMapRequest();
+ $(this.element).mapbender().setMapRequest();
+ },
- hide : function(url){
- this._kmls[url].display = false;
- var $map = $(this.element).mapbender();
- var extent = $map.getExtentInfos();
- $map.calculateExtent(extent);
- $map.setMapRequest();
- },
+ hide : function(url){
+ this._kmls[url].display = false;
+ var $map = $(this.element).mapbender();
+ var extent = $map.getExtentInfos();
+ $map.calculateExtent(extent);
+ $map.setMapRequest();
+ },
- remove: function(url){
- // nrgh there are still references to the highlightobjects somewhere!
- for(var i in this._kmls[url].highlightArray){
- this._kmls[url].highlightArray[i].clean();
- }
- delete(this._kmls[url]);
- var $map = $(this.element).mapbender();
- var extent = $map.getExtentInfos();
- $map.calculateExtent(extent);
- $map.setMapRequest();
- },
+ remove: function(url){
+ // nrgh there are still references to the highlightobjects somewhere!
+ for(var i in this._kmls[url].highlightArray){
+ this._kmls[url].highlightArray[i].clean();
+ }
+ delete(this._kmls[url]);
+ var $map = $(this.element).mapbender();
+ var extent = $map.getExtentInfos();
+ $map.calculateExtent(extent);
+ $map.setMapRequest();
+ },
_convertFromJson: function(mapitem) {
- var geojson = mapitem.data;
+ var geojson = mapitem.data;
var self = this;
- var $map = $(self.element).mapbender();
- var markers = [];
- var title = "";
- // we always transform _from_ 4326 KML use this as their default
- // var projSrc = new Proj4js.Proj('EPSG:4326');
- // var projDest = new Proj4js.Proj($map.epsg);
- var markeroptions = {width: "19px", height: "34px"};
- var g = null;
+ var $map = $(self.element).mapbender();
+ var markers = [];
+ var title = "";
+ // we always transform _from_ 4326 KML use this as their default
+ // var projSrc = new Proj4js.Proj('EPSG:4326');
+ // var projDest = new Proj4js.Proj($map.epsg);
+ var markeroptions = {width: "19px", height: "34px"};
+ var g = null;
for(var i in mapitem.highlightArray){
var h = mapitem.highlightArray[i].hide;
@@ -378,68 +379,68 @@
}
- mapitem.geomArray = new GeometryArray();
- mapitem.highlightArray = [];
- mapitem.geomArray.importGeoJSON(geojson);
- //get bbox for array
- var bbox = mapitem.geomArray.getBBox();
- var bufferFloat = parseFloat(0.1);
- var buffer = new Point(bufferFloat,bufferFloat);
- bbox[0] = bbox[0].minus(buffer);
- bbox[1] = bbox[1].plus(buffer);
- //
- for(var i =0; i < mapitem.geomArray.count(); i++){
- var h = new Highlight([self.element.attr('id')], "mapframe1_" + parseInt(Math.random()*100000,10),{
- "position":"absolute",
- "top": "0px",
- "left": "0px",
- "z-index": "80" },1);
- g = mapitem.geomArray.get(i);
- icon = g.e.getElementValueByName("Mapbender:icon");
- //title = g.e.getElementValueByName("title");
- name = g.e.getElementValueByName("name");
+ mapitem.geomArray = new GeometryArray();
+ mapitem.highlightArray = [];
+ mapitem.geomArray.importGeoJSON(geojson);
+ //get bbox for array
+ var bbox = mapitem.geomArray.getBBox();
+ var bufferFloat = parseFloat(0.1);
+ var buffer = new Point(bufferFloat,bufferFloat);
+ bbox[0] = bbox[0].minus(buffer);
+ bbox[1] = bbox[1].plus(buffer);
+ //
+ for(var i =0; i < mapitem.geomArray.count(); i++){
+ var h = new Highlight([self.element.attr('id')], "mapframe1_" + parseInt(Math.random()*100000,10),{
+ "position":"absolute",
+ "top": "0px",
+ "left": "0px",
+ "z-index": "80" },1);
+ g = mapitem.geomArray.get(i);
+ icon = g.e.getElementValueByName("Mapbender:icon");
+ //title = g.e.getElementValueByName("title");
+ name = g.e.getElementValueByName("name");
- if(name != "false" && name !== false){
- title = name; // use for tooltip
- }
- if(icon == "false" || icon === false){
- g.e.setElement("Mapbender:iconOffsetX", -10);
- g.e.setElement("Mapbender:iconOffsetY", -34);
- g.e.setElement("Mapbender:icon","../img/marker/red.png");
- }
+ if(name != "false" && name !== false){
+ title = name; // use for tooltip
+ }
+ if(icon == "false" || icon === false){
+ g.e.setElement("Mapbender:iconOffsetX", -10);
+ g.e.setElement("Mapbender:iconOffsetY", -34);
+ g.e.setElement("Mapbender:icon","../img/marker/red.png");
+ }
- h.add(g);
- mapitem.highlightArray.push(h);
- title = "";
- name = "";
- }
- if(mapitem.display){
- for(var j in mapitem.highlightArray){
- mapitem.highlightArray[j].paint();
- }
- }else{
- for(var j in mapitem.highlightArray){
- mapitem.highlightArray[j].hide();
- }
- }
- self.element.mapbender().events.afterMapRequest.register(function () {
- if(mapitem.display){
- for(var i in mapitem.highlightArray){
- mapitem.highlightArray[i].paint();
- }
- }else{
- for(var i in mapitem.highlightArray){
- mapitem.highlightArray[i].hide();
- }
- }
- });
- // set new bbox for mapframe
- if(!mapitem.loadedOnStartup) {
- $map.calculateExtent(
- new Mapbender.Extent(bbox[0], bbox[1])
- );
- }
- $map.setMapRequest();
+ h.add(g);
+ mapitem.highlightArray.push(h);
+ title = "";
+ name = "";
+ }
+ if(mapitem.display){
+ for(var j in mapitem.highlightArray){
+ mapitem.highlightArray[j].paint();
+ }
+ }else{
+ for(var j in mapitem.highlightArray){
+ mapitem.highlightArray[j].hide();
+ }
+ }
+ self.element.mapbender().events.afterMapRequest.register(function () {
+ if(mapitem.display){
+ for(var i in mapitem.highlightArray){
+ mapitem.highlightArray[i].paint();
+ }
+ }else{
+ for(var i in mapitem.highlightArray){
+ mapitem.highlightArray[i].hide();
+ }
+ }
+ });
+ // set new bbox for mapframe
+ if(!mapitem.loadedOnStartup) {
+ $map.calculateExtent(
+ new Mapbender.Extent(bbox[0], bbox[1])
+ );
+ }
+ $map.setMapRequest();
},
_display : function(mapitem){
@@ -448,32 +449,32 @@
mapitem = self._kmls[mapitem.url];
if(typeof(Mapbender) != "undefined"){
this._convertFromJson(mapitem);
- }
- }
+ }
+ }
};
var displayKML = $.extend({},displayFeatures, {
- _endpointURL: "../php/kml2transformedgeojson.php",
- _eventNamespace : "kml"
+ _endpointURL: "../php/kml2transformedgeojson.php",
+ _eventNamespace : "kml"
});
$.widget('ui.kml',displayKML);
var displayGeoJSON = $.extend({},displayFeatures,{
- _endpointURL: "",
- _load: function(){
- var self = this, o = this.options;
- $.ajax({ url: o.url,
- type: "GET",
- dataType: "json",
- success : function(data,textStatus,xhr){
- self._display(data);
- }
- });
+ _endpointURL: "",
+ _load: function(){
+ var self = this, o = this.options;
+ $.ajax({ url: o.url,
+ type: "GET",
+ dataType: "json",
+ success : function(data,textStatus,xhr){
+ self._display(data);
+ }
+ });
- }
+ }
});
$.widget('ui.geojson',displayKML);
More information about the Mapbender_commits
mailing list