ThinkGeo.com    |     Documentation    |     Premium Support

Adding Text attribute on Client-side

#1

I am trying to incorporate a feature attributes onto the 'EditOverlay' layer on client-side. I attempted to follow an Openlayers example (openlayers.org/dev/examples/vector-features-with-text.html). However, I can't seem to get it to work completely. My question, it's possible to incorporate this functionality with WebEdition 3.1.16. If yes, It's possible to retrieve those attribute values on server-side. 


Currently, I could add shape text attributes by feature.fieldValues. However, I would have to do a postback to display the feature's label/description. Ideally, I would like to handle all features manipulation on the client-side if possible. 


Below is the code I use to add the attribute and set the vector layer style. Please advice. Thanks




    //Add point with a description on client-side

    function AddShapeDesc(latlon, strDesc) {

        var map = Map1.GetOpenLayersMap();

        var layerFeatures = map.getLayersByName('EditOverlay');

        var point = new OpenLayers.Geometry.Point(latlon.lon, latlon.lat);



        var ptTextFeature = new OpenLayers.Feature.Vector(point);

        

        ptTextFeature.attributes = {

            name: "45 ft",                        

            age: "dd"

        };

        layerFeatures[0].addFeatures(ptTextFeature);        

    }





/*

Set default and select properties of drawn shape

*/

function SetVectorStyle() 

{

    OpenLayers.Feature.Vector.style['default']['fillColor'] = '#EEEEEE';

    OpenLayers.Feature.Vector.style['default']['strokeColor'] = '#FFFFFF';

    OpenLayers.Feature.Vector.style['default']['pointRadius'] = '4';

    OpenLayers.Feature.Vector.style['default']['fillOpacity'] = '0.6';

    OpenLayers.Feature.Vector.style['default']['strokeWidth'] = '4';

    OpenLayers.Feature.Vector.style['default']['strokeOpacity'] = '0.75';

    OpenLayers.Feature.Vector.style['default']['label'] = "name: ${name}, age: ${age}",



    

    OpenLayers.Feature.Vector.style['select']['fillColor'] = '#FF9900';

    OpenLayers.Feature.Vector.style['select']['strokeColor'] = '#000066';

    OpenLayers.Feature.Vector.style['select']['pointRadius'] = '4';

    OpenLayers.Feature.Vector.style['select']['fillOpacity'] = '0.6';

    OpenLayers.Feature.Vector.style['select']['strokeWidth'] = '4';

    OpenLayers.Feature.Vector.style['select']['strokeOpacity'] = '0.75';



}



function OnMapCreating(map) {



    SetVectorStyle();



}

 



#2

Ttd,  
  
 Sorry, TextAttribute is a new feature in OpenLayers 2.8 while we are using 2.7. OpenLayers 2.8 just released for couple days, so we want to evaluate these days to see if it’s stable to integrate it in Map Suite Web Edition. It’s a good feature though. 
  
 Thanks for reporting it, we will discuss it and please keep an eye on our web site for new information. 
  
 Any questions please let me know. 
  
 Thanks, 
 Howard

#3

Thanks for the quick response. Any recommendations suggestions on a workaround on adding "label description" on client-side without postback.

#4

Ttd, 
  
 I think with OpenLayers2.7, we can only add popup with transparent background instead to work around; how do you think? 
  
 Thanks, 
 Howard

#5

I know this might not be recommendated way. It’s possible to pass webedition … Openlayer.js file.  
  
 About a few months back, I tried to create a pop-up feature. But could never made it fully transparent. What properties would I need to set to make transparent. I try to set the alpha value but with no luck 
  
   var map = Map1.GetOpenLayersMap(); 
     if (map) { 
         var megBox = new OpenLayers.Popup(featureID, 
                                         bounds.getCenterLonLat(), 
                                         new OpenLayers.Size(100, 50), true); 
         //var message = “” + bounds.toString() + “” 
         //var message = shapeDesc; 
         megBox.contentHTML = ‘Test Message’; 
         mobjPopupMsg = megBox; 
         map.addPopup(megBox); 
     }

#6

Ttd, 


Actually, you can implement it use this JavaScript function:function add() {
            popup = new OpenLayers.Popup("chicken", 
                                         new OpenLayers.LonLat(5,40),
                                         new OpenLayers.Size(200,200),
                                         "example popup",
                                         false);
popup.backgroundColor = "transparent";
            map.addPopup(popup);
        }      


Any questions please let me know.


Thanks,


Howard



#7

Hi, 
  
 I am trying to put some text on the map too…  
 is the TextAttribute working now?  If so, how do we use it on the client side? 
  
 Thanks a lot! 
  
 Roson

#8

Add to the previous post: 
 I want to display the measured distance on the lower corner of the map when I draw a line on the map… 
 Is that doable? 
  
 Thanks a lot! 
 Roson

#9

Hi Roson,


Yes, this is doable. We have a sample to demonstrate how to do this and I attached it to this post, please take a look.
Any more questions please let me know.
Thanks,
Sun

1306-Post5990Demo.zip (178 KB)

#10

Thank you! 
  
 Roson

#11

You are welcome, and please feel free to let me know if you have any more questions. 
  
 Thanks, 
  
 Sun