ThinkGeo.com    |     Documentation    |     Premium Support

Changing the color of the editable features on the client?

Hi,



The features entered into EditOverlay server-side is made editable on the client, but always in a pale blue color afaik.



I assume this color schema is stored in some OpenLayers style sheet, that is being served up by Map Suite.



Is it possible to change those colors in runtime. I would like to swap between red, blue, yellow and green, preferably from server-side.



Cheers

Lars

Hi again,



I’m looking at the page below, but can’t quite see how to add this without breaking the JS/OpenLayers code served up by Map Suite.



gis.stackexchange.com/questi…or-editing



And I would like to change the colors of both vertex, line, and polygon.



Cheers

Lars

Correct link

Hi Lars, 
  
 It looks your first thread meant you want to make the feature in EditOverlay with different style. 
  
 That can be easily implemented in server side like this: 
  
  
Map1.EditOverlay.Style.FillColor = GeoColor.StandardColors.Red;
 
  
 But your link shows another scenario, that meant you want to modify the vertex style when track but not in EditOverlay. 
 If you want to implement that, you have to use JavaScript code for modify something in client side, because MapSuite is using the default setting from OpenLayers when track. 
  
 It’s not very easy, but if you think this is your scenario, please let me know I will help you to implemented that. 
  
 Regards, 
  
 Don

Hi Don,



Yes, I know how to handle styling server-side, but as you’ve guessed, I want to change the colors on client-side when the user is editing.



The reason is that I want to provide the user with 4 differently colored layers of drawn features, and would like to have the user interface reflect which color/layer is being edited.



After editing I’ll add the proper style, probably on the layer displaying the features.



Any help and pointers you can give are appreciated.



Cheers.

Lars

Hi Lars, 
  
 I think you can add this code in the head of aspx, then you can directly modify the element from OpenLayers. 
  
 
 <script type=“text/javascript”>
     var myMap;
     function OnMapCreated(map) {
         myMap = map;         
     }
 </script>
 
  
 Or you can get the map in other function like this:  
  
 var map = Map1.GetOpenLayersMap() 
  
 You can see all elements when debug JavaScript now. 
  
 Wish that’s helpful. 
  
 Regards, 
  
 Don

Hi Don,



Yes, I know how to get a reference to the OpenLayers map object, but that doesn’t really help me.



I still don’t know how to change the color of the editable features.



As all OpenLayers code is embedded in and published from Map Suite, I need to know how / where to set the colors.



Please advise.


Hi Lars,



You can modify that like this:



<script language=“javascript” type=“text/javascript”>

   function OnMapCreated(map) {
        OpenLayers.Feature.Vector.style[‘default’].fillColor = “#000000”;
    }
</script>


The style is here:

OpenLayers.Feature.Vector.style[‘select’]
OpenLayers.Feature.Vector.style[‘default’]



And you can view more items from browser debug:





Regards,



Don


Hi Lars,



I guess there are 2 options for you, the first one is coding on server side and another one is on client side. Just shown them as following:



Server Side: (Limitation is that it’s unable to change the style for selection)




                Map1.EditOverlay.Style.FillColor = GeoColor.SimpleColors.Black;
                Map1.EditOverlay.Style.OutlineColor = GeoColor.SimpleColors.Yellow;
                …



Client Side:




var OnMapCreated = function (map) {
    // The default style
    OpenLayers.Feature.Vector.style[‘default’][‘fillColor’] = #000000;
    OpenLayers.Feature.Vector.style[‘default’][‘pointRadius’] = ‘10’;
    // Todo: please add more here
 
    // The selected style
    OpenLayers.Feature.Vector.style[‘default’][‘fillColor’] = #0f0f0f;
    OpenLayers.Feature.Vector.style[‘default’][‘pointRadius’] = ‘20’;
    // Todo: please add more here
}



Thanks,

Johnny