[Mapbender-commits] r9338 - in trunk/mapbender: http/css http/plugins lib
svn_mapbender at osgeo.org
svn_mapbender at osgeo.org
Tue Dec 22 01:33:55 PST 2015
Author: pschmidt
Date: 2015-12-22 01:33:55 -0800 (Tue, 22 Dec 2015)
New Revision: 9338
Modified:
trunk/mapbender/http/css/digitize_new.css
trunk/mapbender/http/plugins/mb_digitize_widget.php
trunk/mapbender/lib/mb.ui.displayKmlFeatures.js
Log:
add labelling for kml
Modified: trunk/mapbender/http/css/digitize_new.css
===================================================================
--- trunk/mapbender/http/css/digitize_new.css 2015-12-16 16:48:02 UTC (rev 9337)
+++ trunk/mapbender/http/css/digitize_new.css 2015-12-22 09:33:55 UTC (rev 9338)
@@ -236,3 +236,50 @@
.exportDataLink {
cursor: pointer;
}
+
+.labelling-common >div{
+ display:block;
+}
+
+.labelling-common >div input,.labelling-common >div label{
+ display:inline-block;
+}
+
+.labelling-exclusive >div{
+ display:block;
+}
+.labelling-exclusive >div input,.labelling-exclusive >div label{
+ display:inline-block;
+}
+
+.labelling-exclusive >div .featureList {
+ background-image: url('../img/osgeo_graphics/geosilk/application_view_columns.png');
+ position: relative;
+ width: 16px;
+ height: 16px;
+ display: inline-block;
+ margin-left: 10px;
+}
+
+.labelling-exclusive >div .featureList .items {
+ position: absolute;
+ padding: 0px;
+ top: 0px;
+ left: 20px;
+ display: block;
+ background-color: white;
+ border: 1px black solid;
+ min-width: 100px;
+ z-index: 1;
+ display: table;
+}
+.labelling-exclusive >div .featureList .items .featureItem {
+ display: table-row;
+ width: auto;
+ vertical-align: middle;
+}
+
+.labelling-exclusive >div .featureList .items .featureItem div,.labelling-exclusive >div .featureList .items .featureItem span {
+ display: table-cell;
+ vertical-align: middle;
+}
\ No newline at end of file
Modified: trunk/mapbender/http/plugins/mb_digitize_widget.php
===================================================================
--- trunk/mapbender/http/plugins/mb_digitize_widget.php 2015-12-16 16:48:02 UTC (rev 9337)
+++ trunk/mapbender/http/plugins/mb_digitize_widget.php 2015-12-22 09:33:55 UTC (rev 9338)
@@ -99,7 +99,23 @@
'<span>my polygon</span><br></br>' +
'<div title="<?php echo _mb("Paste");?>" class="digitize-image digitize-paste bottom-right-20"></div>' +
'</div>';
+ var labelHtml = '<div title="<?php echo _mb("Feature\'s labelling");?>">' +
+ '<div class="digitize-preview selfFeature"></div>' +
+ '<span>my polygon</span><br></br><form>' +
+ '<input id="label-0" type="radio" name="label" value=""><label for="label-0"><?php echo _mb("No labelling");?></label>'+
+ '<fieldset class="labelling-common"><legend><?php echo _mb("Common attributes");?></legend></fieldset>' +
+ '<fieldset class="labelling-exclusive"><legend><?php echo _mb("Exclusive attributes");?></legend></fieldset>' +
+ '</form></div>';
+ var labelCommonInput = function(num, val) {
+ return '<div><input id="label-'+num+'" type="radio" name="label" value="'+val+'"><label for="label-'+num+'">'+val+'</label></div>';
+ };
+ var labelExclusiveInput = function(num, val) {
+ return '<div><input id="label-'+num+'" type="radio" name="label" value="'+val+'"><label for="label-'+num+'">'+val+'</label><div class="featureList"><ul class="items"></ul></div></div>';
+ };
+ var labelExclusivePreview = function(id, title) {
+ return '<li class="featureItem"><div id="'+id+'" class="digitize-preview"></div><span>'+title+'</span></li>';
+ };
var editAttributesHtml = '<div title="<?php echo _mb("Feature attributes");?>">' +
'<div class="digitize-image digitize-style"></div>' +
'<div class="digitize-preview"></div><br></br>' +
@@ -158,6 +174,7 @@
'<li><div class="digitize-image digitize-zoomto"></div><?php echo _mb("Zoom to");?></li>' +
// '<li><div class="digitize-image digitize-add"></div><?php echo _mb("New");?></li>' +
'<li><div class="digitize-image digitize-copy"></div><?php echo _mb("Kopieren");?></li>' +
+ '<li><div class="digitize-image digitize-label"></div><?php echo _mb("Labelling");?></li>' +
'<li><div class="digitize-image digitize-export"></div><?php echo _mb("Export");?></li>' +
'<li><div class="digitize-image digitize-remove"></div><?php echo _mb("Delete");?></li>' +
'<li><div class="digitize-image digitize-style"></div><?php echo _mb("Styling");?></li>' +
@@ -194,6 +211,7 @@
var digitizeDialog,
editDialog,
copyDialog,
+ labelDialog,
attributesDialog,
editStyleDialog,
icons = null,
@@ -272,17 +290,19 @@
position: [o.$target.offset().left, o.$target.offset().top]
}).bind("dialogclose", function () {
button.stop();
-/*
- $(this).find('.digitize-image').unbind('click');
-*/
that.destroy();
$('#kmlTree li.kmltree-selected').removeClass('kmltree-selected');
-/*
- attributesDialog.dialog('close');
- editStyleDialog.dialog('close');
- editDialog.dialog('close');
-*/
});
+ labelDialog = $(labelHtml);
+ labelDialog.dialog({
+ autoOpen: false,
+ position: [o.$target.offset().left, o.$target.offset().top]
+ }).bind("dialogclose", function () {
+ button.stop();
+ that.destroy();
+ labelDialog.find('input[name="label"]').unbind('click', function(){});
+ $('#kmlTree li.kmltree-selected').removeClass('kmltree-selected');
+ });
attributesDialog = $(editAttributesHtml);
attributesDialog.dialog({
autoOpen: false,
@@ -600,6 +620,7 @@
});
menu.children('li:has(.digitize-pencil)').bind('click', editObject($link, menu));
menu.children('li:has(.digitize-copy)').bind('click', copyObject($link, menu));
+ menu.children('li:has(.digitize-label)').bind('click', labelObject($link, menu));
menu.children('li:has(.digitize-export)').bind('click', function() {
var kml = $('#mapframe1').data('kml');
var url = $link.parent().parent().attr('title');
@@ -632,7 +653,6 @@
var editAttributes = function(feature, kml, url) {
return function() {
-
if ($(this).hasClass('editFeatureCollection')) {
// kml = $('#mapframe1').data('kml');
var oldCollectionName;
@@ -945,6 +965,82 @@
};
};
+ var labelObject = function($link, menu) {
+ return function(e) {
+ labelDialog.find('*').unbind();
+ if($link.hasClass('kmltree-selected')) {
+ labelDialog.dialog('close');
+ return;
+ }
+ labelDialog.dialog('close');
+ $link.addClass('kmltree-selected').siblings().removeClass('kmltree-selected');
+ labelDialog.find('.labelling-common >div').remove();
+ labelDialog.find('.labelling-exclusive >div').remove();
+ var idx = $link.attr('idx');
+ var kml = $('#mapframe1').data('kml');
+ var url = $link.parent().parent().attr('title');
+ var feature = kml._kmls[url].data.features[idx];
+ var preview = labelDialog.find('.digitize-preview.selfFeature').html('').get(0);
+ labelDialog.find('span').text(feature.properties.name);
+ kml.renderPreview(feature, preview);
+ for(var k in feature.properties){
+ if(k.toLowerCase().indexOf('stroke') !== 0 && k.toLowerCase().indexOf('fill') !== 0){
+ var features = [];
+ var labels = [];
+ var k_not = false;
+ for(var i = 0; i < kml._kmls[url].data.features.length; i++){
+ if(i !== parseInt(idx)){
+ var fi = kml._kmls[url].data.features[i];
+ if(fi.properties[k]){
+ features.push(fi);
+ }else{
+ k_not = true;
+ }
+ }
+ }
+ var $exclDiv = $(labelDialog.find('.labelling-exclusive').get(0));
+ var num = labelDialog.find('input[name="label"]').length;
+ if(k_not){ // add axclusive
+ var $exclInput = $(labelExclusiveInput(num, k));
+ $exclDiv.append($exclInput);
+ var $items = $exclInput.find('.featureList .items');
+ for(var i = 0; i < features.length; i++){
+ var a = labelExclusivePreview(k+i, features[i].properties.name);
+ var $item = $(labelExclusivePreview(k+i, features[i].properties.name));
+ $items.append($item);
+ kml.renderPreview(features[i], $item.find('.digitize-preview').html('').get(0));
+ }
+ $('.featureList .items', $exclInput).hide();
+ $('.featureList', $exclInput).bind('mouseover', function(e){
+ $(this).find('.items').show();
+ });
+
+ $('.featureList', $exclInput).bind('mouseout', function(e){
+ $(this).find('.items').hide();
+ });
+ $exclDiv.show();
+ } else { // add common
+ var $commonDiv = $(labelDialog.find('.labelling-common').get(0));
+ $commonDiv.append($(labelCommonInput(num, k)));
+ $commonDiv.show();
+ }
+ }
+ }
+ labelDialog.find('input[name="label"][value="'+(feature.label ? feature.label : "")+'"]').attr("checked",true);
+ labelDialog.dialog('open');
+ labelDialog.find('input[name="label"]').bind('click', function() {
+ feature.label = $(this).val();
+ feature.properties.updated = new Date().toISOString();
+ if($('#mapframe1').data('kml')._kmls[url].data.hasOwnProperty('updated')){
+ $('#mapframe1').data('kml')._kmls[url].data.updated = new Date().toISOString();
+ }
+ kml.refresh(url);
+ });
+ if(menu)
+ menu.menu('destroy').remove();
+ };
+ };
+
var contextmenuLayer = function() {
var $link;
@@ -1243,7 +1339,6 @@
};
this.closeEditDialog = function() {
- console.log( editDialog );
editDialog.dialog('close');
};
Modified: trunk/mapbender/lib/mb.ui.displayKmlFeatures.js
===================================================================
--- trunk/mapbender/lib/mb.ui.displayKmlFeatures.js 2015-12-16 16:48:02 UTC (rev 9337)
+++ trunk/mapbender/lib/mb.ui.displayKmlFeatures.js 2015-12-22 09:33:55 UTC (rev 9338)
@@ -538,8 +538,8 @@
copyFeature: function(feature) {
var temp = $.extend(true, {}, feature);
temp.properties.name = temp.properties.name + '_copied';
- temp.properties.created = feature.properties.updated = new Date().toISOString();
- temp.properties.uuid = UUID.genV4().toString();
+ temp.properties.created = feature.properties.updated = temp.properties.uuid = null;
+ this.fixupFeature(temp);
return temp;
},
@@ -1044,7 +1044,18 @@
});
canvas.path(path + 'Z').attr(feature.properties);
},
-
+ renderLabel: function(canvas, feature) {
+ var label;
+ if(feature.label && (label=feature.properties[feature.label])){
+ var map = $('#mapframe1').mapbender();
+ var self = this;
+ var path;
+ var centroid = this.getCentroid(feature);
+ var pt = map.convertRealToPixel(centroid);
+ canvas.text(pt.x, pt.y, label);
+ }
+ },
+
renderFeature: function(canvas) {
var self = this;
return function(_, feature) {
@@ -1063,6 +1074,7 @@
self.renderPolygon(canvas, feature);
break;
};
+ self.renderLabel(canvas, feature);
} catch (e) {
console && console.log('Problem rendering feature', feature, e)
}
More information about the Mapbender_commits
mailing list