[Mapbender-commits] r6983 - in trunk/mapbender: http/css http/img
http/plugins lib
svn_mapbender at osgeo.org
svn_mapbender at osgeo.org
Thu Sep 30 07:28:04 EDT 2010
Author: kmq
Date: 2010-09-30 11:28:04 +0000 (Thu, 30 Sep 2010)
New Revision: 6983
Added:
trunk/mapbender/http/css/feedtree.css
trunk/mapbender/http/img/georss_logo.png
trunk/mapbender/http/img/georss_logo_folder.png
trunk/mapbender/http/img/kml_logo.png
trunk/mapbender/http/plugins/feedTree.js
Modified:
trunk/mapbender/lib/mb.ui.displayFeatures.js
Log:
New feature: A treeview for GeoRSS feeds
Added: trunk/mapbender/http/css/feedtree.css
===================================================================
--- trunk/mapbender/http/css/feedtree.css (rev 0)
+++ trunk/mapbender/http/css/feedtree.css 2010-09-30 11:28:04 UTC (rev 6983)
@@ -0,0 +1,126 @@
+/*
+li{ border: 1px solid black; }
+ul{ border: 1px dotted blue; }
+a{ border: 1px dotted red; }
+*/
+
+
+/* The Whole feed Tree */
+
+ul.feedtree {
+ overflow: auto;
+ width: 10em;
+/* background-image: url("http://localhost:8888/vertical_dots.png");*/
+ background-repeat: repeat-y ;
+ background-position: 20px;
+
+}
+ul.feedtree, ul.feedtree ul {
+ list-style-type: none;
+ margin-left: 0;
+ padding-left: 0;
+}
+
+ul.feedtree a{
+ font-size: x-small;
+}
+
+
+ul.feedtree li{
+ padding-left: 16px;
+ margin-left: 1em;
+}
+
+ul.feedtree button {
+ padding: 0;
+ margin-left: 0;
+ background-color: transparent;
+ width: 20px;
+ height: 20px;
+ vertical-align: middle;
+ border: none;
+}
+
+ul.feedtree a:link, ul.feedtree a:visited, ul.feedtree a:hover, ul.feedtree a:active {
+ background-color: transparent;
+ text-decoration: none;
+ color: black;
+}
+
+
+/* a Root Node */
+
+ul.feedtree li.rss.open{
+ padding-left: 0;
+}
+
+ul.feedtree li.rss ul li{
+ margin-left: 0.2em;
+}
+
+ul.feedtree li.open.rss > button.toggle{
+ background-image: url("../img/georss_logo_folder.png");
+ background-repeat: no-repeat;
+ background-position: 0 0;
+}
+
+ul.feedtree li.closed.rss > button.toggle{
+ background-image: url("../img/georss_logo_folder.png");
+ background-repeat: no-repeat;
+ background-position: 0 0;
+}
+ul.feedtree li.rss.open, ul.feedtree li.rss.closed {
+ background-image: none;
+}
+
+
+/* a Feed Node */
+
+ul.feedtree li.open > button.toggle{
+ background-image: url("../img/tree_new/expanded_folder.png");
+ background-repeat: no-repeat;
+ background-position: 0 0;
+}
+
+ul.feedtree li.closed > button.toggle{
+ background-image: url("../img/tree_new/closed_folder.png");
+ background-repeat: no-repeat;
+ background-position: 0 0;
+}
+
+ul.feedtree li button.remove{
+ background-image: url("../img/button_digitize/geomRemove.png");
+ background-repeat: no-repeat;
+ background-position: 0 0;
+}
+
+ul.feedtree li.open, ul.feedtree li.closed {
+/* background-image: url("http://localhost:8888/vertical_dots.png");*/
+ background-repeat: repeat-x ;
+ background-position: 10px 10px;
+}
+
+ul.feedtree li.closed >ul{
+ display: none;
+}
+
+
+
+ul.feedtree li.rss li input{
+ vertical-align: middle;
+}
+
+
+/* a FeedItem Node */
+
+ul.feedtree ul ul {
+ padding: 0;
+}
+
+ul.feedtree ul ul li {
+ padding: 0;
+ border: 1px solid transparent;
+}
+ul.feedtree ul ul li:hover {
+ border: 1px dotted gray;
+}
Added: trunk/mapbender/http/img/georss_logo.png
===================================================================
(Binary files differ)
Property changes on: trunk/mapbender/http/img/georss_logo.png
___________________________________________________________________
Added: svn:mime-type
+ application/octet-stream
Added: trunk/mapbender/http/img/georss_logo_folder.png
===================================================================
(Binary files differ)
Property changes on: trunk/mapbender/http/img/georss_logo_folder.png
___________________________________________________________________
Added: svn:mime-type
+ application/octet-stream
Added: trunk/mapbender/http/img/kml_logo.png
===================================================================
(Binary files differ)
Property changes on: trunk/mapbender/http/img/kml_logo.png
___________________________________________________________________
Added: svn:mime-type
+ application/octet-stream
Added: trunk/mapbender/http/plugins/feedTree.js
===================================================================
--- trunk/mapbender/http/plugins/feedTree.js (rev 0)
+++ trunk/mapbender/http/plugins/feedTree.js 2010-09-30 11:28:04 UTC (rev 6983)
@@ -0,0 +1,117 @@
+var $feedTree = $(this);
+var FeedTree = function(o){
+ $feedTree.children().remove();
+ $feedTree.addClass('feedtree');
+
+ $addButton = $("<button>addGeoRSS</button>");
+ $feedTree.after($addButton);
+ $addButton.after('<input id="feedurl" value="http://localhost:8888/georss.example.xml" />');
+ $addButton.click(function(){
+ $('#mapframe1').georss({ url: $('#feedurl').val()});
+ });
+
+
+
+ var $RSSfolder = $('<li class="open rss"><button class="toggle" name="toggle" value="toggle"></button><a href="#">RSS</a><ul></ul></li>');
+ $feedTree.append($RSSfolder);
+
+// var $KMLfolder = $('<li class="open rss"><img src="../img/kml_logo.png" /><a href="#">KML</a><ul></ul></li>');
+// $feedTree.append($KMLfolder);
+
+
+
+ o.$target.bind('georss: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) + "...";
+ $rssEntry = $('<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>');
+ $RSSfolder.children("ul").append($rssEntry);
+ $rssEntry.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 />");
+ $rssEntry.append($featureList);
+ for(var i = 0;i < obj.data.features.length;i++){
+
+ title = obj.data.features[i].properties.title;
+ abbrevTitle = title.length < 20 ? title : title.substr(0,17) + "...";
+ $feature = $('<li title="'+ title +'"><a href="#" >'+ abbrevTitle + '</li>');
+ $featureList.append($feature);
+ title = obj.data.features[i].properties.title;
+ $feature.bind('click',(function(jsonFeature){return function(){
+
+ var map = o.$target.mapbender();
+ var g = new GeometryArray();
+ g.importGeoJSON(jsonFeature,false);
+ 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]));
+
+
+ }
+
+ $("*:checkbox",$rssEntry).bind('click', function(){
+ if($(this).attr('checked')){
+ o.$target.georss('show',obj.url);
+ }else{
+ o.$target.georss('hide',obj.url);
+ }
+ });
+
+ $("button.toggle",$rssEntry).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",$rssEntry).bind('click', function(){
+ o.$target.georss('remove',obj.url);
+ $(this).parent().remove();
+ });
+
+
+ });
+
+};
+
+Mapbender.events.init.register(function(){
+ $feedTree.mapbender(new FeedTree(options));
+});
Modified: trunk/mapbender/lib/mb.ui.displayFeatures.js
===================================================================
--- trunk/mapbender/lib/mb.ui.displayFeatures.js 2010-09-30 10:19:19 UTC (rev 6982)
+++ trunk/mapbender/lib/mb.ui.displayFeatures.js 2010-09-30 11:28:04 UTC (rev 6983)
@@ -1,3 +1,6 @@
+// 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",
@@ -23,22 +26,25 @@
};
-var translatedI18nObject = Mapbender.cloneObject(originalI18nObject);
+//var translatedI18nObject = Mapbender.cloneObject(originalI18nObject);
+var translatedI18nObject = originalI18nObject;
var displayFeatures = {
options: {
url: "",
- position: 'right'
+ position: 'right',
+ autoOpen: true,
+ autoDisplay: true
},
_feeds: {},
_popup : null,
_create: function(){
- var that = this, o = this.options;
- this.element.click( function(e){
- var map = that.element.mapbender();
+ 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;
@@ -49,10 +55,10 @@
// after that's finished the results are merged and displayed in a box
var pointGeometries = {};
var g,h,nodes = null;
- $("*",that._popup).remove();
+ $("*",self._popup).remove();
var $tabs = $("<ul></ul>");
- for (var i in that._feeds){
- feed = that._feeds[i] ;
+ for (var i in self._feeds){
+ feed = self._feeds[i] ;
requestGeometries = [];
for(var j = 0; j < feed.geomArray.count(); j++){
@@ -115,15 +121,15 @@
}
description = g.e.getElementValueByName("description");
$tabs.append('<li><a href="#rsspopup_'+ i +'">'+ title + '</a></li>');
- that._popup.append('<div id="rsspopup_'+ i +'"><h1>'+ title +'</h1><p>'+ description +'</p></h1>');
+ self._popup.append('<div id="rsspopup_'+ i +'"><h1>'+ title +'</h1><p>'+ description +'</p></h1>');
if($tabs.children().size() > 1){
var $tabcontainer = $("<div><div>");
$tabcontainer.append($tabs);
- $tabcontainer.append($('div',that._popup));
- that._popup.append($tabcontainer);
+ $tabcontainer.append($('div',self._popup));
+ self._popup.append($tabcontainer);
$tabcontainer.tabs();
}
- that._popup.dialog('open');
+ self._popup.dialog('open');
}
@@ -134,155 +140,168 @@
pointGeometries = {};
}
});
-
-
+ self.element.bind('georss:loaded',function(event,obj){
+ if(o.autoOpen){
+ self._display(obj);
+ }
+ });
+ self.element.bind('georss:error',function(event,message){
+ alert(message);
+ });
+
},
_init: function(){
- var that = this, o = this.options;
+ var self = this, o = this.options;
this._popup = $('<div></div>').dialog({autoOpen : false, height: 500, width: 500});
if(o.url){
- that._load(o.url);
+ self._load(o.url);
}
},
_load : function(url){
- var that = this, o = this.options;
- var loadError = function(message){
- $("<div class='labelLoadError'>"+ translatedI18nObject.labelLoadError +"</div>").dialog({ buttons: {"OK":function(){ $(this).dialog("close"); }} });
- };
- $.ajax({ url: that._endpointURL,
+ var self = this, o = this.options;
+ if(self._feeds[o.url]){
+ //not adding feed twice
+ return;
+ }
+ $.ajax({ url: self._endpointURL,
data: {url: o.url},
type: 'POST',
dataType: "json",
success : function(data,textStatus,xhr){
if(!data){
- loadError('request returned no data');
- };
- if(data.errorMessage){
- loadError(data.errorMessage);
- return;
+ self.element.trigger('georss:error',"request returned no data");
}
- that._display(data,url);
+ else if(data.errorMessage){
+ self.element.trigger('georss:error',data.errorMessage);
+ }else{
+ self._feeds[o.url] = {type:"geojson",data:data,url:o.url,display: o.autoDisplay};
+ self.element.trigger('georss:loaded',{type:"geojson",data:data,url:o.url,display: o.autoDisplay});
+ }
},
error: function(XMLHttpRequest, textStatus, errorThrown){
- loadError("could not load "+o.url);
+ self.element.trigger('georss:error',"Problem talking to server: " + errorThrown);
}
});
},
+ show : function(url){
+ this._feeds[url].display = true;
+ var $map = $(this.element).mapbender();
+ var extent = $map.getExtentInfos();
+ $map.calculateExtent(extent);
+ $map.setMapRequest();
+ $(this.element).mapbender().setMapRequest();
+ },
- _display : function(geoJSON,url){
+ hide : function(url){
+ this._feeds[url].display = false;
+ var $map = $(this.element).mapbender();
+ var extent = $map.getExtentInfos();
+ $map.calculateExtent(extent);
+ $map.setMapRequest();
+ },
- var that = this, o = this.options;
- var $map = $(that.element).mapbender();
- var markers = [];
- var title = "";
- var $table = $("<table><thead><tr><th class='labelName'>"+ translatedI18nObject.labelName +"</th></tr></thead><tbody></tbody></table>");
+ remove: function(url){
+ // nrgh there are still references to the highlightobjects somewhere!
+ for(var i in this._feeds[url].highlightArray){
+ this._feeds[url].highlightArray[i].clean();
+ }
+ delete(this._feeds[url]);
+ var $map = $(this.element).mapbender();
+ var extent = $map.getExtentInfos();
+ $map.calculateExtent(extent);
+ $map.setMapRequest();
+ },
- if(geoJSON.features){
- // we always transform _from_ 4326 geoRSS and 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 geomArray = new GeometryArray();
- var highlightArray = [];
- geomArray.importGeoJSON(geoJSON);
- for(var i =0; i < geomArray.count(); i++){
- var h = new Highlight([this.element.attr('id')], "mapframe1_" + parseInt(Math.random()*100000,10),{
- "position":"absolute",
- "top": "0px",
- "left": "0px",
- "z-index": "80" },1);
- g = geomArray.get(i);
- icon = g.e.getElementValueByName("Mapbender:icon");
- title = g.e.getElementValueByName("title");
- name = g.e.getElementValueByName("name");
+ _display : function(mapitem){
+ var self = this, o = this.options;
+ // getting the mapitem from the events bre
+ var mapitem = self._feeds[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 geoRSS and 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;
- if(name != "false" && name !== false){
- title = name;
- }
- 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");
- }
+ 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");
+ }
- description = g.e.getElementValueByName("description");
- $row = $("<tr><td>"+ title +"</td></tr>");
- $row.css("cursor","pointer");
- $row.click((function(title,description){
- return function(){
- $("*",that._popup).remove();
- description = description.replace('<a ','<a target="_new" ');
- that._popup.append($("<div><h1>"+title+"</h1><p>"+description +"</p></div>")).dialog('open');
- };
- })(title,description));
- $("tbody",$table).append($row);
- h.add(g);
- highlightArray.push(h);
-
- title = "";
- name = "";
- }
- for(var i in highlightArray){
- highlightArray[i].paint();
- }
- $map.events.afterMapRequest.register(function () {
- for(var i in highlightArray){
- highlightArray[i].paint();
+ h.add(g);
+ mapitem.highlightArray.push(h);
+ title = "";
+ name = "";
}
- });
-
- that._feeds[url] = {
- geomArray: geomArray,
- highlightArray: highlightArray
- };
-
-
- }
-
- var $tableDialog = $("<div></div>").dialog({
- width: "450",
- height: "500",
- autoOpen: true,
- position: o.position,
- beforeclose: (function(url){
- return function(){
- delete that._feeds[url];
- for(var i in highlightArray){
- highlightArray[i].clean();
+ if(mapitem.display){
+ for(var j in mapitem.highlightArray){
+ mapitem.highlightArray[j].paint();
}
- };
- })(url),
- buttons: {"Close": function(){
- $(this).dialog('close');
- $(this).dialog('destroy');
+ }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();
+ }
+ }
+ });
+
}
- });
- $tableDialog.append($table);
-
- $table.dataTable({"bJQueryUI": true ,
- "oLanguage":{
- "sUrl":"../extensions/dataTables-1.5/lang/"+Mapbender.languageId +".txt"
- } });
+ }
}
+
+
};
var displayGeoRSS = $.extend({},displayFeatures,{
- _endpointURL: "../php/geoRSSToGeoJSON.php"
+ _endpointURL: "../php/geoRSSToGeoJSON.php",
+ _eventNamespace : "georss"
+
});
$.widget('ui.georss',displayGeoRSS);
var displayKML = $.extend({},displayFeatures, {
- _endpointURL: "../php/kmlToGeoJSON.php"
+ _endpointURL: "../php/kmlToGeoJSON.php",
+ _eventNamespace : "kml"
});
$.widget('ui.kml',displayKML);
More information about the Mapbender_commits
mailing list