[Mapbender-commits] r8865 - in trunk/mapbender: http/css http/plugins lib
svn_mapbender at osgeo.org
svn_mapbender at osgeo.org
Thu May 15 04:10:13 PDT 2014
Author: hwbllmnn
Date: 2014-05-15 04:10:13 -0700 (Thu, 15 May 2014)
New Revision: 8865
Modified:
trunk/mapbender/http/css/digitize_new.css
trunk/mapbender/http/plugins/mb_digitize_widget.php
trunk/mapbender/lib/mb.ui.displayKmlFeatures.js
Log:
added preview of style, cleaned up
Modified: trunk/mapbender/http/css/digitize_new.css
===================================================================
--- trunk/mapbender/http/css/digitize_new.css 2014-05-15 07:57:54 UTC (rev 8864)
+++ trunk/mapbender/http/css/digitize_new.css 2014-05-15 11:10:13 UTC (rev 8865)
@@ -151,3 +151,8 @@
.digitize-hidden {
display: none;
}
+
+.digitize-preview {
+ width: 40px;
+ height: 40px;
+}
Modified: trunk/mapbender/http/plugins/mb_digitize_widget.php
===================================================================
--- trunk/mapbender/http/plugins/mb_digitize_widget.php 2014-05-15 07:57:54 UTC (rev 8864)
+++ trunk/mapbender/http/plugins/mb_digitize_widget.php 2014-05-15 11:10:13 UTC (rev 8865)
@@ -81,7 +81,7 @@
'</fieldset></div>';
var editHtml = '<div title="Edit feature">' +
- '<div class="digitize-image digitize-polygon"></div>' +
+ '<div class="digitize-preview"></div>' +
'<span>my polygon</span><br></br>' +
'<div class="digitize-image digitize-style"></div>' +
'<div class="digitize-image digitize-attributes"></div>' +
@@ -268,23 +268,6 @@
};
};
- var renderStylePreview = function(feature, target) {
- var canvas = Raphael(target, 32, 32);
- switch(feature.geometry.type.toLowerCase()) {
- case 'point':
- canvas.image(markerSymbol, 0, 0, 32, 32);
- break;
- case 'linestring':
- var line = 'M 10 20 L 20 10';
- canvas.path(line).attr(feature.properties);
- break;
- case 'polygon':
- var poly = 'M 10 10 L 10 20 20 20 20 10 Z';
- canvas.path(poly).attr(feature.properties);
- break;
- };
- };
-
var editObject = function($link, menu) {
return function() {
$link.addClass('kmltree-selected').siblings().removeClass('kmltree-selected');
@@ -320,6 +303,8 @@
editDialog.find('.digitize-delete-vertex').bind('click', function() {
o.$target.mb_digitize('deleteVertexMode');
});
+ var preview = editDialog.find('.digitize-preview').html('').get(0);
+ kml.renderPreview(feature, preview);
menu.menu('destroy').remove();
};
Modified: trunk/mapbender/lib/mb.ui.displayKmlFeatures.js
===================================================================
--- trunk/mapbender/lib/mb.ui.displayKmlFeatures.js 2014-05-15 07:57:54 UTC (rev 8864)
+++ trunk/mapbender/lib/mb.ui.displayKmlFeatures.js 2014-05-15 11:10:13 UTC (rev 8865)
@@ -76,138 +76,9 @@
$('li[title="' + self.queriedLayer + '"] li[idx="' + matchedIds[0] + '"]').click();
}
});
-/* 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;
- }
-
- }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>');
-
- 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){
-
- 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.render();
- //self._display(obj);
}
});
self.element.bind('kml:error',function(event,message){
@@ -221,7 +92,6 @@
this._kmls = kmls;
for(var k in kmls) {
kmls[k].loadedOnStartup = true;
- self._convertFromJson(kmls[k]);
self.element.trigger('kml:loaded',kmls[k]);
}
}
@@ -325,7 +195,6 @@
h.add(geom);
itm.data.features.push(JSON.parse(multi.toString()));
- this._convertFromJson(itm);
this.element.trigger('kml:loaded',{type:"geojson",data:itm.data,url:itm.url,display: itm.display, refreshing: true});
$map.setMapRequest();
},
@@ -333,7 +202,6 @@
refresh: function(url) {
var $map = $(this.element).mapbender();
var itm = this._kmls[url];
- this._convertFromJson(itm);
this.element.trigger('kml:loaded',{type:"geojson",data:itm.data,url:itm.url,display: itm.display, refreshing: true});
$map.setMapRequest();
},
@@ -425,7 +293,6 @@
list.push(itm.data.features[v]);
});
itm.data.features = list;
- this._convertFromJson(itm);
var $map = $(this.element).mapbender();
$map.setMapRequest();
},
@@ -459,97 +326,6 @@
$map.setMapRequest();
},
- _convertFromJson: function(mapitem) {
- // 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;
-
- // for(var i in mapitem.highlightArray){
- // var h = mapitem.highlightArray[i].hide;
- // if(h) h();
- // }
-
- // 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(i =0; i < mapitem.geomArray.count(); i++){
- // var elemid = "mapframe1_" + parseInt(Math.random()*100000, 10);
- // var h = new Highlight([self.element.attr('id')], elemid,{
- // "position":"absolute",
- // "top": "0px",
- // "left": "0px",
- // "z-index": "80" },1);
-
- // $('#mapframe1').children('*[id*="' + elemid + '"]').attr('data-idx', i)
- // .attr('data-url', mapitem.url);
-
- // 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");
- // }
-
- // h.add(g);
- // mapitem.highlightArray.push(h);
- // title = "";
- // name = "";
- // }
- // if(mapitem.display){
- // for(var j in mapitem.highlightArray){
- // if(mapitem.data.features[j].display !== false) {
- // mapitem.highlightArray[j].paint();
- // }
- // }
- // }else{
- // for(var j in mapitem.highlightArray){
- // mapitem.highlightArray[j].hide();
- // }
- // }
-
- // self.element.mapbender().events.afterMapRequest.register(function () {
- // self.render();
- // // if(mapitem.display){
- // // for(var i in mapitem.highlightArray){
- // // if(mapitem.data.features[i].display !== false) {
- // // 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])
- // );
- // }
- },
-
getLayerBbox: function(url) {
var self = this;
var itm = this._kmls[url];
@@ -568,7 +344,7 @@
switch(feature.geometry.type.toLowerCase()) {
case 'point':
var map = $(this.element).mapbender();
- var res = map.getScale() / mb_resolution / 100;
+ var res = 10;
var minx = feature.geometry.coordinates[0] - 20 * res;
var miny = feature.geometry.coordinates[1] - 20 * res;
return [minx, miny, minx + 40 * res, miny + 40 * res];
@@ -609,6 +385,9 @@
y: feature.geometry.coordinates[1]};
if(isNaN(pt.x) || isNaN(pt.y)) return;
pt = $('#mapframe1').mapbender().convertRealToPixel(pt);
+ if(feature.preview) {
+ pt = {x: feature.geometry.coordinates[0], y: feature.geometry.coordinates[1]};
+ }
if(feature.properties['Mapbender:icon']) {
var img = canvas.image(feature.properties['Mapbender:icon'], pt.x, pt.y, 32, 32).node;
if(img.setAttributeNS) {
@@ -625,6 +404,9 @@
var path;
$.each(feature.geometry.coordinates, function(_, v) {
var pt = map.convertRealToPixel({x: v[0], y: v[1]});
+ if(feature.preview) {
+ pt = {x: v[0], y: v[1]};
+ }
if(isNaN(pt.x) || isNaN(pt.y)) return;
if(!path) {
path = 'M' + pt.x + ' ' + pt.y;
@@ -642,6 +424,9 @@
var path;
$.each(feature.geometry.coordinates[0], function(_, v) {
var pt = map.convertRealToPixel({x: v[0], y: v[1]});
+ if(feature.preview) {
+ pt = {x: v[0], y: v[1]};
+ }
if(isNaN(pt.x) || isNaN(pt.y)) return;
if(!path) {
path = 'M' + pt.x + ' ' + pt.y;
@@ -663,7 +448,6 @@
self.renderPoint(canvas, feature);
break;
case 'linestring':
- var line = 'M';
self.renderLine(canvas, feature);
break;
case 'polygon':
@@ -673,6 +457,32 @@
}
},
+ renderPreview: function(feature, target) {
+ var canvas = Raphael(target, 40, 40);
+
+ var feat = {
+ geometry: {
+ type: feature.geometry.type
+ },
+ properties: feature.properties,
+ preview: true
+ };
+
+ switch(feature.geometry.type.toLowerCase()) {
+ case 'point':
+ feat.geometry.coordinates = [0, 0];
+ break;
+ case 'linestring':
+ feat.geometry.coordinates = [[5, 35], [35, 5]];
+ break;
+ case 'polygon':
+ feat.geometry.coordinates = [[[5, 5], [5, 35], [35, 35], [35, 5]]];
+ break;
+ };
+
+ this.renderFeature(canvas)(null, feat);
+ },
+
render: function() {
var target = $('#kml-rendering-pane');
var map = $('#mapframe1').mapbender();
@@ -688,15 +498,6 @@
$.each(item.data.features, $.proxy(self, self.renderFeature(canvas)));
}
});
- },
-
- _display : function(mapitem){
- var self = this, o = this.options;
- // getting the mapitem from the events bre
- mapitem = self._kmls[mapitem.url];
- if(typeof(Mapbender) != "undefined"){
- this._convertFromJson(mapitem);
- }
}
};
@@ -706,19 +507,4 @@
_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);
- }
- });
-
- }
-});
$.widget('ui.geojson',displayKML);
More information about the Mapbender_commits
mailing list