[Mapbender-commits] r8226 - in trunk/mapbender: http/classes
http/css http/plugins lib
svn_mapbender at osgeo.org
svn_mapbender at osgeo.org
Tue Dec 6 09:57:06 EST 2011
Author: armin11
Date: 2011-12-06 06:57:06 -0800 (Tue, 06 Dec 2011)
New Revision: 8226
Added:
trunk/mapbender/http/css/kmltree.css
trunk/mapbender/http/plugins/kmlTree.js
trunk/mapbender/lib/mb.ui.displayKmlFeatures.js
Modified:
trunk/mapbender/http/classes/class_weldMaps2PNG_rotate.php
Log:
Draft for integrating kmls into mapbender and little bugfix.
Modified: trunk/mapbender/http/classes/class_weldMaps2PNG_rotate.php
===================================================================
--- trunk/mapbender/http/classes/class_weldMaps2PNG_rotate.php 2011-12-05 10:52:58 UTC (rev 8225)
+++ trunk/mapbender/http/classes/class_weldMaps2PNG_rotate.php 2011-12-06 14:57:06 UTC (rev 8226)
@@ -75,7 +75,7 @@
$imagick->cropImage($width, $height, ($imgWidth-$width)/2, ($imgHeight-$height)/2);
//write modified image
- $imagick->writeImage();
+ $imagick->writeImage($filename);
$image = imagecreatefrompng($filename);
imagepng($image,$filename);
}
Added: trunk/mapbender/http/css/kmltree.css
===================================================================
--- trunk/mapbender/http/css/kmltree.css (rev 0)
+++ trunk/mapbender/http/css/kmltree.css 2011-12-06 14:57:06 UTC (rev 8226)
@@ -0,0 +1,134 @@
+/*
+li{ border: 1px solid black; }
+ul{ border: 1px dotted blue; }
+a{ border: 1px dotted red; }
+*/
+
+
+/* The Whole kml Tree */
+
+ul.kmlTree {
+ overflow: auto;
+ width: 10em;
+/* background-image: url("http://localhost:8888/vertical_dots.png");*/
+ background-repeat: repeat-y ;
+ background-position: 20px;
+
+}
+ul.kmlTree, ul.kmlTree ul {
+ list-style-type: none;
+ margin-left: 0;
+ padding-left: 0;
+}
+
+ul.kmlTree a{
+ font-size: x-small;
+}
+
+
+ul.kmlTree li{
+ padding-left: 2px;
+/* margin-left: 1em;*/
+}
+
+ul.kmlTree button {
+ padding: 0;
+ margin-left: 0;
+ background-color: transparent;
+ width: 20px;
+ height: 20px;
+ vertical-align: middle;
+ border: none;
+}
+
+ul.kmlTree a:link, ul.kmlTree a:visited, ul.kmlTree a:hover, ul.kmlTree a:active {
+ background-color: transparent;
+ text-decoration: none;
+ color: black;
+}
+
+
+/* a Root Node */
+
+ul.kmlTree li.kml.open{
+ padding-left: 0;
+}
+
+ul.kmlTree li.kml ul li{
+ margin-left: 0.2em;
+}
+
+ul.kmlTree li.kml > button.add{
+ background-image: url("../img/add.png");
+ background-repeat: no-repeat;
+ background-position: 50% 50%;
+}
+
+ul.kmlTree li.open.kml > button.toggle{
+ background-image: url("../img/geokml_logo_folder.png");
+ background-repeat: no-repeat;
+ background-position: 50% 50%;
+}
+
+ul.kmlTree li.closed.kml > button.toggle{
+ background-image: url("../img/geokml_logo_folder.png");
+ background-repeat: no-repeat;
+ background-position: 50% 50%;
+}
+ul.kmlTree li.kml.open, ul.kmlTree li.kml.closed {
+ background-image: none;
+}
+
+
+/* a kml Node */
+
+ul.kmlTree li.open > button.toggle{
+ background-image: url("../img/tree_new/expanded_folder.png");
+ background-repeat: no-repeat;
+ background-position: 0 0;
+}
+
+ul.kmlTree li.closed > button.toggle{
+ background-image: url("../img/tree_new/closed_folder.png");
+ background-repeat: no-repeat;
+ background-position: 0 0;
+}
+
+ul.kmlTree li button.remove{
+ background-image: url("../img/button_digitize/geomRemove.png");
+ background-repeat: no-repeat;
+ background-position: 0 0;
+}
+
+ul.kmlTree li.open, ul.kmlTree li.closed {
+/* background-image: url("http://localhost:8888/vertical_dots.png");*/
+ background-repeat: repeat-x ;
+ background-position: 10px 10px;
+ padding-bottom: 0.5em;
+}
+
+ul.kmlTree li.closed >ul{
+ display: none;
+}
+
+
+
+ul.kmlTree li.kml li input{
+ vertical-align: middle;
+ margin: 0;
+}
+
+
+/* a kmlItem Node */
+
+ul.kmlTree ul ul {
+ padding: 0;
+}
+
+ul.kmlTree ul ul li {
+ padding: 0;
+ border: 1px solid transparent;
+}
+ul.kmlTree ul ul li:hover {
+ border: 1px dotted gray;
+}
Added: trunk/mapbender/http/plugins/kmlTree.js
===================================================================
--- trunk/mapbender/http/plugins/kmlTree.js (rev 0)
+++ trunk/mapbender/http/plugins/kmlTree.js 2011-12-06 14:57:06 UTC (rev 8226)
@@ -0,0 +1,185 @@
+ /**
+ * 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', '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);
+
+ $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"':'';
+
+
+ title = obj.url;
+ 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="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(0.1);
+ 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();
+
+ };
+ })(obj.data));
+
+ $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(){
+
+ 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(0.1);
+ 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();
+
+ };
+ })(obj.data.features[i]));
+
+ $feature.bind('mouseout',(function(jsonFeature){return function(){
+ var me = $kmlTree.mapbender();
+ me.resultHighlight.clean();
+ me.resultHighlight.paint();
+ }})());
+ $feature.bind('mouseover',(function(jsonFeature){return function(){
+ var me = $kmlTree.mapbender();
+ var g = new GeometryArray();
+ g.importGeoJSON(jsonFeature,false);
+ var feature = g.get(0);
+
+ if(feature.geomType != "point"){
+ 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"){
+
+ }
+
+ };
+ })(obj.data.features[i]));
+
+
+ }
+
+ $("*: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.remove",$kmlEntry).bind('click', function(){
+ o.$target.kml('remove',obj.url);
+ $(this).parent().remove();
+ });
+
+
+ });
+
+};
+
+Mapbender.events.init.register(function(){
+ $kmlTree.mapbender(new KmlTree(options));
+});
Added: trunk/mapbender/lib/mb.ui.displayKmlFeatures.js
===================================================================
--- trunk/mapbender/lib/mb.ui.displayKmlFeatures.js (rev 0)
+++ trunk/mapbender/lib/mb.ui.displayKmlFeatures.js 2011-12-06 14:57:06 UTC (rev 8226)
@@ -0,0 +1,352 @@
+// events
+// geojson:loaded - a georssfeed was loaded from a server and is now available: function(url,geojson)
+// 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"
+ }
+
+
+};
+
+//var translatedI18nObject = Mapbender.cloneObject(originalI18nObject);
+var translatedI18nObject = originalI18nObject;
+
+
+var displayFeatures = {
+
+ options: {
+ url: "",
+ position: 'right',
+ autoOpen: true,
+ autoDisplay: true
+ },
+ _kmls: {},
+ _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._kmls){
+ feed = self._kmls[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._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);
+ }
+ },
+
+ _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: self._endpointURL,
+ 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);
+ }
+ });
+
+ },
+ 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();
+ },
+
+ 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();
+ },
+
+ _display : function(mapitem){
+ var self = this, o = this.options;
+ // getting the mapitem from the events bre
+ var mapitem = self._kmls[mapitem.url];
+ var geojson = mapitem.data;
+ if(typeof(Mapbender) != "undefined"){
+ var $map = $(self.element).mapbender();
+ var markers = [];
+ var title = "";
+
+ if(geojson.features){
+ // 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;
+
+ mapitem.geomArray = new GeometryArray();
+ mapitem.highlightArray = [];
+ mapitem.geomArray.importGeoJSON(geojson);
+ 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");
+ }
+
+ 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();
+ }
+ }
+ });
+
+ }
+ }
+
+ }
+
+
+};
+
+
+var displayKML = $.extend({},displayFeatures, {
+ _endpointURL: "../php/kmlToGeoJSON.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);
+ }
+ });
+
+ }
+});
+$.widget('ui.geojson',displayKML);
More information about the Mapbender_commits
mailing list