[Mapbender-commits] r8943 - in trunk/mapbender: http/css http/plugins lib

[svn_mapbender at osgeo.org]

Author: hwbllmnn
Date: 2014-06-27 07:13:21 -0700 (Fri, 27 Jun 2014)
New Revision: 8943

Modified:
   trunk/mapbender/http/css/kmltree.css
   trunk/mapbender/http/plugins/kmlTree.js
   trunk/mapbender/lib/mb.ui.displayKmlFeatures.js
Log:
added kml file upload


Modified: trunk/mapbender/http/css/kmltree.css
===================================================================
--- trunk/mapbender/http/css/kmltree.css	2014-06-27 14:12:03 UTC (rev 8942)
+++ trunk/mapbender/http/css/kmltree.css	2014-06-27 14:13:21 UTC (rev 8943)
@@ -31,7 +31,7 @@
 /*	margin-left: 1em;*/
 }
 
-ul.kmlTree button {
+ul.kmlTree button,#kml-load-tabs button {
 	padding: 0;
 	margin-left: 0;
 	background-color: transparent;
@@ -58,7 +58,7 @@
 	margin-left:  0.2em;
 }
 
-ul.kmlTree li.kml > button.add{
+ul.kmlTree li.kml > button.add,#kml-load-tabs .add {
 	background-image:  url("../img/add.png");
 	background-repeat: no-repeat;
 	background-position: 50% 50%;

Modified: trunk/mapbender/http/plugins/kmlTree.js
===================================================================
--- trunk/mapbender/http/plugins/kmlTree.js	2014-06-27 14:12:03 UTC (rev 8942)
+++ trunk/mapbender/http/plugins/kmlTree.js	2014-06-27 14:13:21 UTC (rev 8943)
@@ -45,15 +45,51 @@
 
     $addButton = $('<button class="add" name="addkml" value="addkml"></button>');
     $addButton.click(function(){
-        $('<div ><input class="kmlurl" /></div>').dialog({
+        var dlg = $('<div ></div>').dialog({
             "title": "KML hinzufügen",
-            "buttons":{
-                "OK": function(){
-                    $('#mapframe1').kml({ url: $(this).find('.kmlurl').val()});
-                    $(this).dialog('destroy');
-                }
-            }
+            width: 450,
+            height: 210
         });
+        var dlgcontent = '<div id="kml-load-tabs">'
+                         + '<ul><li><a href="#kml-from-wmc">Stored data</a></li>'
+                         + '<li><a href="#kml-from-upload">Upload</a></li>'
+                         + '<li><a href="#kml-from-url">External source</a></li></ul>'
+                         + '<div id="kml-from-wmc">wmc</div>'
+                         + '<div id="kml-from-upload">'
+                         + '<iframe name="kml-upload-target" style="width: 0; height: 0; border: 0px;"></iframe>'
+                         + '<form action="../php/uploadKml.php" method="post" enctype="multipart/form-data" target="kml-upload-target">'
+                         + '<input type="file" name="kml"></input>'
+                         + '<input type="submit" class="upload" value="Upload"></input><br>'
+                         + 'You can upload local KML, GPX and geoJSON files here. The filename should'
+                         + ' have the typical file extension (.kml, .gpx or .geojson) and the size'
+                         + ' is limited to 250kb of data.'
+                         + '</div>'
+                         + '</form>'
+                         + '<div id="kml-from-url">URL: <input class="kmlurl" /><button class="add" name="add" value="add"></button><br>'
+                         + 'You can give an url to a datafile which is located somewhere in the www. '
+                         + 'Only KML, geoJSON and GPX files are supported. The files will be validated before they'
+                         + ' are loaded into the mapviewer.'
+                         + '</div>'
+                         + '</div>';
+        $(dlg).append(dlgcontent);
+        $('#kml-load-tabs').tabs();
+        $('#kml-load-tabs').find('button.add').bind('click', function() {
+            $('#mapframe1').kml({ url: $('#kml-load-tabs').find('.kmlurl').val()});
+            $(dlg).dialog('destroy');
+        });
+
+        $('#kml-from-upload form').bind('submit', function() {
+            $('iframe[name="kml-upload-target').bind('load', function() {
+                $(this).unbind('load');
+                var data = JSON.parse($(this).contents().find('pre').text());
+                var kml = $('#mapframe1').data('kml');
+                var name = $('#kml-from-upload input[type="file"]').val();
+                name = name.match(/[\\]([^\\]+)/g);
+                name = name[name.length-1];
+                kml.addLayer(name, data);
+                $(dlg).dialog('destroy');
+            });
+        });
     });
     $KMLfolder.find("a").after($addButton);
 

Modified: trunk/mapbender/lib/mb.ui.displayKmlFeatures.js
===================================================================
--- trunk/mapbender/lib/mb.ui.displayKmlFeatures.js	2014-06-27 14:12:03 UTC (rev 8942)
+++ trunk/mapbender/lib/mb.ui.displayKmlFeatures.js	2014-06-27 14:13:21 UTC (rev 8943)
@@ -244,6 +244,13 @@
                });
     },
 
+    addLayer: function(url, data) {
+        this.kmlOrder.push(url);
+        this._kmls[url] = {type:"geojson",data:data,url:url,display: true};
+        this.zoomToLayer(url);
+        this.element.trigger('kml:loaded',{type:"geojson",data:data,url:url,display: true});
+    },
+
     setOrder: function(order) {
         this.kmlOrder = order;
         this.render();