nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Offset SimpleLineSymbol

Sheng-TeTsai

Hi -

I used QueryTask to get features from a map server's line feature layer and choose SimpleLineSymbol as graphics' symbol to display these returned line features on a graphic layer. Everything works well so far.

Now I need to display both the original line feature layer and query results on my web map. I would like to know if it is possible to offset these query-returned line features or graphics so they will not overlay my original line feature layer.

Please advise.

Thanks,

Sheng-Te Tsai

Vind meer berichten getagd met

Accepted answers

All comments

Sheng-TeTsai

I modified your code to

SimpleLineSymbol linesymbol_Measure = new SimpleLineSymbol() { ControlTemplate = Resources["offsetLine"] as ControlTemplate, Width=_lineWidth, Color=brushList[brushIndex], Style = SimpleLineSymbol.LineStyle.Solid };

but I can not see any lines on my map. Then I tried to add a SimpleLineSymbol named "TranslatedLineSymbol", which is using "offsetLine" ControlTemplate, in Grid Resource and changed

ControlTemplate = Resources["offsetLine"] as ControlTemplate

to

ControlTemplate = TranslatedLineSymbol.ControlTemplate

, it works good.

Below are the code that I am using in XAML and code-behind. Thank you very much, Morten and Dominique.

<!-- in XAML file -->
 <Grid x:Name="LayoutRoot">
         <Grid.Resources>
                         .....
                         .....
                  <ControlTemplate x:Key="offsetLine">
                        <Path x:Name="Element" Stroke="{Binding Symbol.Color}" StrokeThickness="{Binding Symbol.Width}">
                                 <Path.RenderTransform>
                                         <TranslateTransform X="-3" Y="3" />
                                 </Path.RenderTransform>
                           </Path>
                       </ControlTemplate>


                    <esriSymbols:SimpleLineSymbol x:Name="TranslatedLineSymbol" ControlTemplate="{StaticResource offsetLine}" /> 

        </Grid.Resources>
            


//in code-behind code
........
........
SimpleLineSymbol linesymbol_Measure = new SimpleLineSymbol
                    {
                        ControlTemplate = TranslatedLineSymbol.ControlTemplate,
                        Width = _lineWidth,
                        Color = brushList[brushIndex],
                        Style = SimpleLineSymbol.LineStyle.Solid
                    };

Graphic graphic = new Graphic();
                   .....
                   .....
                    graphic.Symbol = linesymbol_Measure;

SomeGISGuy

Anything you do in XAML you can do in code-behind. You could for instance create the control template in xaml (since this is usually easier to do there), and instantiate the symbol in codebehind:
new LineSymbol() { ControlTemplate = Resources["offsetLine"] as ControlTemplate, Width=3, Color=new SolidColorBrush(Colors.Red) };

Sheng-TeTsai

Thanks for the revised code. However, I think the way to make the custom line symbols still does not "dynamic" enough. The line symbol properties (width. color,...) still need to be predefined in XAML page, right?

Maybe I did not explain my required task clearly. I have a window panel, and there are a classes combox (3,4,5), a color combox (red, green, blue, yellow), and a width combox (1,2,3,4,5) on the panel. On my map, I have a highway system layer, which is a line feature set. The layer has a traffic volume column that contains each route segemnt's traffic value. When user select classes, width, and color on the panel, a task like class break renderer will be performed on the highway system layer by the traffic values. I want the returned features to be offset so the referenced highway system will not be overlaid.

To make the flexible class break renderer function, the "Rendering in Code" sample fits my need. However, the offset properties are not available in SimpleLineSymbol. If I can assign the selected line properties on your custom line symbol (or template) in code behind, that would solve my problem. But I don't know if this is doable.

Thanks,

Sheng-Te

SomeGISGuy

My version does not have any static symbology in there, since it uses binding expressions to the template.
So you new up a new instance of the line symbol, set the color/width properties and lastly set the controltemplate to the one above.
It's probably more clear like this:

  <ControlTemplate x:Key="offsetLine">
    <Path x:Name="Element" Stroke="{Binding Symbol.Color}" StrokeThickness="{Binding Symbol.Width}" >
      <Path.RenderTransform>
        <TranslateTransform X="5" Y="-5" />
      </Path.RenderTransform>
    </Path>
  </ControlTemplate>

<esri:LineSymbol x:Key="TranslatedLineSymbol1" ControlTemplate="{StaticResource offsetLine}" Width="3" Color="Red" />

<esri:LineSymbol x:Key="TranslatedLineSymbol2" ControlTemplate="{StaticResource offsetLine}" Width="2" Color="Blue" />

Sheng-TeTsai

Hi Morten,

I appreciated your effort to find solutions for most of questioner. The custom line symbol you and Dominique demonstrated are declared in XAML page. Therefore, the attributes such as width, style, and color of it are static. (Please correct me if I am wrong).

My tool needs to dynamically render lines based on selected classes, width, and color as "Rendering with the code" sample. I wonder how I can use this predefined custom line symbol in my tool.

Please advise.

Thanks,

Sheng-Te

SomeGISGuy

Dominique's sample is not flex but silverlight, however both of your samples are not correct. Line and polygon templates requires the root element to be a path element.
It also demonstrates how to bind to properties of the symbol for stroke and thickness:

<esri:LineSymbol x:Key="TranslatedLineSymbol">
 <esri:LineSymbol.ControlTemplate>
  <ControlTemplate>
    <Path x:Name="Element" Stroke="{Binding Symbol.Color}" StrokeThickness="{Binding Symbol.Width}" >
      <Path.RenderTransform>
        <TranslateTransform X="5" Y="-5" />
      </Path.RenderTransform>
    </Path>
  </ControlTemplate>
 </esri:LineSymbol.ControlTemplate>
</esri:LineSymbol>

If you need to bind to attributes the expression would be: "{Binding Attributes[SymbolWidthKeyName]}"
Note that the above syntax only works with Silverlight 4. If you are still using Silverlight 3, you need to use the DictionaryConverter like it is done in the maptips.

Sheng-TeTsai

Dominique,

Thanks for the possible solution. The purpose of tool that I am working on is dynamically rendering the line features by using class break renderer. The way I made it is some kind like the "Rendering with the code" in ESRI's Interactive Samples http://resources.esri.com/help/9.3/arcgisserver/apis/silverlight/samples/start.htm#Thematic_Interactive

The custom line symbol that you mentioned was declared in XAML. My question about it is how I can dynamically set the width, color, and style for this custom line symbol?

By the way, I think your code is with flex. I modified it for silverlight as below.

<esriSymbols:LineSymbol x:Name="TranslatedLineSymbolRightUP">
                <esriSymbols:LineSymbol.ControlTemplate>
                    <ControlTemplate>
                        <Grid>
                            <Grid.RenderTransform>
                                <TranslateTransform X="5" Y="-5" />
                            </Grid.RenderTransform>
                        </Grid>
                    </ControlTemplate>
                </esriSymbols:LineSymbol.ControlTemplate>
            </esriSymbols:LineSymbol>

Thanks,

Sheng-Te Tsai

DominiqueBroux

You might use a custom line symbol and apply a TranslateTransform to this custom symbol.

Something like :

<esri:LineSymbol x:Key="TranslatedLineSymbol">
 <esri:LineSymbol.ControlTemplate>
  <ControlTemplate>
   <Grid>
    <Grid.RenderTransform>
     <TranslateTransform X="5" Y="-5" />
    </Grid.RenderTransform>
       <Path x:Name="Element" Stroke="Blue" StrokeThickness="1" />
   </Grid>
  </ControlTemplate>
 </esri:LineSymbol.ControlTemplate>
</esri:LineSymbol>

/Dominique

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.