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; } } }

Table of Contents - Legend Widget for FlexViewer 2.x

RobertScheitlin__GISP

All,

Here is the next in my line of widgets for the FlexViewer 2.x.

The legend portion of this widget is the same code as my dynamic legend widget so,

IT IS FOR ARCGIS SERVER 10 OR GREATER ONLY

This is just a simple TOC Widget that includes my dynamic legend component.
This widget also includes my enhancement for map service transparency,
right click context menu for zoom to make layer visible, and my scale
dependent renderer for the TOC checkboxes.

Finde mehr Beiträge mit dem Tag

Accepted answers

All comments

RobertScheitlin__GISP

Rhett,

You have something in the Description element but if you are clicking on the meta button on a Map service and not an individual layer then it use the SERVICE DESCRIPTION.

RhettZufelt

Hmm, I must be missing something. I do not see a meta button, and thought it was supposed to be the Description tab under the dropdown.

Doesn't seem to matter if I put load a service with individual layer or not, I only get the drop down arrow for the initial layer. If I expand it, the layers under it do not have a drop down arrow.

If I load just the mapservice, I get the mapservice directory, if I load as mapservice/0, then I get the rest endpoint directory.

I am still on 10, is this a 10.1 requirement or something?

R_

RobertScheitlin__GISP

Rhett,

You can see what the Description button (meaning metadata) is suppose to do on my live preview site:

http://gis.calhouncounty.org/FlexViewer3.0/index.html?config=config-toc.xml

Checkout the parcel data layer and you will see that the map service layer and the individual layer gets different data displayed for their description.

RhettZufelt

OK, got it working now.

I could get it to report for the service, but the dropdown arrow for the individual layer would not respond. If I click on it, nothing happens.

Then, I set

<disablezoomtomenuoption>false</disablezoomtomenuoption>

and it is working now.

Apparently, when the zoomtomenuoption is disabled, it disables the Description (or drop down option) for the individual layer as well.

R_

MayJeff

How do you expand just specific map service (Maybe one or two map services) instead of "expand all" the map services?

Thanks.

RobertScheitlin__GISP

May Jeff,

There is no option for that.

PaulFerro1

Hi Robert,

Thanks for your reply. I tried adding:

cssStyleDeclarationPopUpRendererLink.setStyle("linkActiveColor", titleColor);
            cssStyleDeclarationPopUpRendererLink.setStyle("linkNormalColor", textColor);
            cssStyleDeclarationPopUpRendererLink.setStyle("linkHoverColor", titleColor);

also tried

cssStyleDeclarationPopUpRendererLink.setStyle("linkActiveColor", titleColor);
            cssStyleDeclarationPopUpRendererLink.setStyle("linkNormalColor", titleColor);
            cssStyleDeclarationPopUpRendererLink.setStyle("linkHoverColor", titleColor);

I recompiled and ran but the default blue for hyperlinks still persists. I also looked in the DetailsWindow.mxml, but didn't see anything in there? Any ideas?

Paul,

That color is just the default that come from Adobe Flex in general for hyperlinks. To fix that you will have to modify the UIManager.as.

UNTESTED changes:

        //Style RichEditableText
        if (numberOfStyleColors > 4)
        {
            var cssStyleDeclarationRET:CSSStyleDeclaration = new CSSStyleDeclaration();
            cssStyleDeclarationRET.setStyle("focusedTextSelectionColor", rolloverColor);
            cssStyleDeclarationRET.setStyle("unfocusedTextSelectionColor", rolloverColor);
            
            cssStyleDeclarationPopUpRendererLink.setStyle("linkActiveColor", titleColor);
            cssStyleDeclarationPopUpRendererLink.setStyle("linkNormalColor", textColor);
            cssStyleDeclarationPopUpRendererLink.setStyle("linkHoverColor", titleColor);
            
            topLevelStyleManager.setStyleDeclaration("spark.components.RichEditableText", cssStyleDeclarationRET, false);

            var cssStyleDeclarationTI:CSSStyleDeclaration = new CSSStyleDeclaration();
            cssStyleDeclarationTI.setStyle("chromeColor", textColor);
            topLevelStyleManager.setStyleDeclaration("spark.components.TextInput", cssStyleDeclarationTI, false);
            topLevelStyleManager.setStyleDeclaration("spark.components.TextArea", cssStyleDeclarationTI, false);
            topLevelStyleManager.setStyleDeclaration("mx.controls.TextInput", cssStyleDeclarationTI, false);
            topLevelStyleManager.setStyleDeclaration("mx.controls.TextArea", cssStyleDeclarationTI, false);
            topLevelStyleManager.setStyleDeclaration("mx.controls.VSlider", cssStyleDeclarationTI, false);
            topLevelStyleManager.setStyleDeclaration("spark.components.VSlider", cssStyleDeclarationTI, false);
            topLevelStyleManager.setStyleDeclaration("mx.controls.HSlider", cssStyleDeclarationTI, false);
            topLevelStyleManager.setStyleDeclaration("spark.components.HSlider", cssStyleDeclarationTI, false);
        }

RobertScheitlin__GISP

Paul,

As I mentioned it was untested code. So here are the necessary changes:

        //Style RichEditableText
        if (numberOfStyleColors > 4)
        {
            var cssStyleDeclarationRET:CSSStyleDeclaration = new CSSStyleDeclaration();
            cssStyleDeclarationRET.setStyle("focusedTextSelectionColor", rolloverColor);
            cssStyleDeclarationRET.setStyle("unfocusedTextSelectionColor", rolloverColor);
            cssStyleDeclarationRET.setStyle("linkActiveColor", titleColor);
            cssStyleDeclarationRET.setStyle("linkNormalColor", textColor);
            cssStyleDeclarationRET.setStyle("linkHoverColor", titleColor);
            topLevelStyleManager.setStyleDeclaration("spark.components.RichEditableText", cssStyleDeclarationRET, false);            

            var cssStyleDeclarationTI:CSSStyleDeclaration = new CSSStyleDeclaration();
            cssStyleDeclarationTI.setStyle("chromeColor", textColor);
            topLevelStyleManager.setStyleDeclaration("spark.components.TextInput", cssStyleDeclarationTI, false);
            topLevelStyleManager.setStyleDeclaration("spark.components.TextArea", cssStyleDeclarationTI, false);
            topLevelStyleManager.setStyleDeclaration("mx.controls.TextInput", cssStyleDeclarationTI, false);
            topLevelStyleManager.setStyleDeclaration("mx.controls.TextArea", cssStyleDeclarationTI, false);
            topLevelStyleManager.setStyleDeclaration("mx.controls.VSlider", cssStyleDeclarationTI, false);
            topLevelStyleManager.setStyleDeclaration("spark.components.VSlider", cssStyleDeclarationTI, false);
            topLevelStyleManager.setStyleDeclaration("mx.controls.HSlider", cssStyleDeclarationTI, false);
            topLevelStyleManager.setStyleDeclaration("spark.components.HSlider", cssStyleDeclarationTI, false);
        }

And replace the whole content of the DetailsWindow.mxml with this:

<?xml version="1.0" encoding="utf-8"?>
<TOC:ResizeTitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009" 
                       xmlns:s="library://ns.adobe.com/flex/spark" 
                       xmlns:mx="library://ns.adobe.com/flex/mx" 
                       xmlns:TOC="widgets.TOC.*" 
                       width="400" height="300"
                       title="{_detailsTitle}"
                       close="closeMe()"  
                       cornerRadius="6"
                       skinClass="widgets.TOC.ResizeTitleWindowSkin"
                       initialize="resizetitlewindow1_initializeHandler(event)">
    <TOC:layout>
        <s:VerticalLayout horizontalAlign="center" verticalAlign="middle" />
    </TOC:layout>
    
    <fx:Script>
        <![CDATA[
            import flashx.textLayout.formats.TextLayoutFormat;
            import flashx.textLayout.conversion.TextConverter;
            import flashx.textLayout.elements.Configuration;
            import flashx.textLayout.formats.TextDecoration;
            
            import mx.events.FlexEvent;
            import mx.managers.PopUpManager;
            
            [Bindable] private var _content:String;
            
            [Bindable] private var _detailsTitle:String;
            
            [Bindable] private var textLayoutConfiguration:Configuration;
            
            private function closeMe():void
            {
                PopUpManager.removePopUp(this);
            }
            
            public function set windowDetails(value:String):void
            {
                _content = value;
            }
            
            public function set detailsTitle(value:String):void
            {
                _detailsTitle = value;
            }
            
            protected function resizetitlewindow1_initializeHandler(event:FlexEvent):void
            {
                textLayoutConfiguration = new Configuration();
                var textLayoutFormat:TextLayoutFormat = new TextLayoutFormat();
                textLayoutFormat.color = getStyle("linkActiveColor")
                textLayoutFormat.textDecoration = TextDecoration.UNDERLINE;
                textLayoutConfiguration.defaultLinkActiveFormat = textLayoutFormat;
                textLayoutFormat = new TextLayoutFormat();
                textLayoutFormat.color = getStyle("linkHoverColor")
                textLayoutFormat.textDecoration = TextDecoration.UNDERLINE;
                textLayoutConfiguration.defaultLinkHoverFormat = textLayoutFormat;
                textLayoutFormat = new TextLayoutFormat();
                textLayoutFormat.color = getStyle("linkNormalColor")
                textLayoutFormat.textDecoration = TextDecoration.UNDERLINE;
                textLayoutConfiguration.defaultLinkNormalFormat = textLayoutFormat;
            }
            
        ]]>
    </fx:Script>
    
    <s:Scroller width="100%" height="100%"
                hasFocusableChildren="false"
                measuredSizeIncludesScrollBars="false"
                minViewportInset="1">
        <s:RichEditableText editable="false"
                            paddingLeft="5"
                            paddingRight="5"
                            paddingTop="10"
                            backgroundAlpha="{getStyle('backgroundAlpha')}"
                             backgroundColor="{getStyle('backgroundColor')}"
                            textFlow="{TextConverter.importToFlow(_content, TextConverter.TEXT_FIELD_HTML_FORMAT, textLayoutConfiguration)}"/>
    </s:Scroller>
    <TOC:controlBarContent>
    </TOC:controlBarContent>
    <TOC:controlBarLayout>
        <s:HorizontalLayout horizontalAlign="right" paddingTop="3" paddingBottom="2" paddingRight="5" clipAndEnableScrolling="true" />
    </TOC:controlBarLayout>
</TOC:ResizeTitleWindow>

PaulFerro1

Thanks Robert, that worked.

However, If I wanted the "linkNormalColor" to match my UI title color would I replace "text" in the DetailsWindow.mxml with "title"?

protected function resizetitlewindow1_initializeHandler(event:FlexEvent):void
            {
                textLayoutConfiguration = new Configuration();
                var textLayoutFormat:TextLayoutFormat = new TextLayoutFormat();
                textLayoutFormat.color = getStyle("linkActiveColor")
                textLayoutFormat.textDecoration = TextDecoration.UNDERLINE;
                textLayoutConfiguration.defaultLinkActiveFormat = textLayoutFormat;
                textLayoutFormat = new TextLayoutFormat();
                textLayoutFormat.color = getStyle("linkHoverColor")
                textLayoutFormat.textDecoration = TextDecoration.UNDERLINE;
                textLayoutConfiguration.defaultLinkHoverFormat = textLayoutFormat;
                textLayoutFormat = new TextLayoutFormat();
                textLayoutFormat.color = getStyle("linkNormalColor")
                textLayoutFormat.textDecoration = TextDecoration.UNDERLINE;
                textLayoutConfiguration.defaultLinkNormalFormat = textLayoutFormat;
            }

as well as here? Thanks again for the help!!

 cssStyleDeclarationRET.setStyle("linkNormalColor", titleColor);

RobertScheitlin__GISP

Paul,

It should be just a change in the UIManager and nothing in the DetailsWindow.

FrankRoberts

Robert, I have a 3.0 viewer running off 10.0 Sp4 AGS services. The services are secured with AGS, and a tokken has been generated and put in the config file. The viewer loads just fine and I can view the map layers using the "more" button. However when I launch the TOC widget I get a login prompt. However, the login prompt doesn't seem to recognize the logins provided (I assume it wan'ts the ArcGISServer accounts I created). Not sure why it would want me to login. Here is the error it throws after I type the login/pass.

[ATTACH=CONFIG]17846[/ATTACH]

Any ideas?

Thanks,
Frank

LoginErrorFlexFirefox.JPG

RobertScheitlin__GISP

Frank,

Is the token included in the url of the map services that you have configured in the main config.xml?

FrankRoberts

Thanks for your quick reply!

It is set up as such:

<layer label="Status" type="feature" visible="false"
     token="A90av3k6cC75HbsYVMqpVfulDk3UsfhnZb1TDx0KBesmAIfjCf7puQU6gAQ25fnVpQ2RX6KQxQVwOie9B6nMVw.." 
                   url="http://orator-s.epa.gov/ArcGIS/rest/services/R9ER/EPAR9RemovalWOaklandOpsR9ER/FeatureServer/4"/>

RobertScheitlin__GISP

Frank,

So that is my widgets issue. One I don't work with secure services so my support for them is pretty minimal... What I have in place right now for this widget, it is looking for the token to be part of the url:

<layer label="Status" type="feature" visible="false"" 
                   url="http://orator-s.epa.gov/ArcGIS/rest/services/R9ER/EPAR9RemovalWOaklandOpsR9ER/FeatureServer/4?token=A90av3k6cC75HbsYVMqpVfulDk3UsfhnZb1TDx0KBesmAIfjCf7puQU6gAQ25fnVpQ2RX6KQxQVwOie9B6nMVw.."/>

FrankRoberts

Ok I added the ?token=... after the url for the service but still it is prompting me for the Sign In when I trigger the widget. I can supply a testing url if that would be handy. Just a side note, is that I didn't see this with your widget till I switched to 3.0 of the Viewer, and the associated version of the TOC Widget.

Another thing to mention is that I seem to get this behavior when I have a feature service added (type="feature"). So a full dynamic service doesn't seem to cause the behavior.

Any other ideas?

RobertScheitlin__GISP

Frank,

Yes a test url would be great.

PaulFerro1

Paul,

It should be just a change in the UIManager and nothing in the DetailsWindow.

Hi Robert,

I've tested

cssStyleDeclarationRET.setStyle("linkNormalColor", titleColor);

and hyperlinks still come out like

cssStyleDeclarationRET.setStyle("linkNormalColor", textColor);

Would I have to change this to "title" in the DetailsWindow.mxml?

textLayoutFormat.color = getStyle("linkNormalColor")
    textLayoutFormat.textDecoration = TextDecoration.UNDERLINE;
    textLayoutConfiguration.defaultLinkNormalFormat = textLayoutFormat;

Thanks in advance

JeffersonFerreira_Ferreira

Hi Robert;

A little question. I'm trying to use two TOCs in my application: one for dozens of features and other only for satellite images. But they are synchronized in some aspects. When I click "move down" or "move up" in popup menu at right of each layer (TOC Images) there are changes in the other TOC. Do you think there is a way to "detach" an action made at one TOC from another?

Thanks in advance

AlexanderBrown1

Hi Robert,

I am utilizing your widget with Flex 2.5. I was wondering if there was a way to automatically reload the legend at dependent time intervals?

I have two layers that get updated every few minutes, and I was able to get the display map to reflect these changes. For example:

At minute 1: layer A - ON layer B - OFF
At minute 2: layer A - OFF layer B - ON
ETC.

I just cannot figure out how to have the legend refresh to show which layers are properly turned on/off.

Thanks,

Alex

DaleSmith1

Hi Robert,

I'm using your TOC widget for Flex viewer 3.0. I have a dynamic service with a number of sublayers. Each sublayer is symbolised into classes based on a year attribute. If there are two or more classes, the symbols and their respective class names are listed below the name of the sublayer in the TOC - as you'd expect. But if a sublayer has only one class, the name of the sublayer is displayed next to the symbol and the name of the class is not included anywhere (screen shot attached). The same thing happens if I add the sublayer as a feature service instead.

Is there a way to get around this? I'd like to have all sublayers displaying in a consistent manner in the TOC regardless of how many class symbols the layer has.

Thanks,
Marianna

TOC.png

RobertScheitlin__GISP

Alex,

The widget is designed to create the TOC item at initalization and there is nothing that attempts to update the TOC short of add a new layer to the map, removing, or reordering layers.

RobertScheitlin__GISP

Marianna,

That is just the way it is right now by design. I will add it to my enhancement request list but I don't have much free time right now.

AlexanderBrown1

Robert,

Great to know! Thanks for your quick response.

Alex

KimberlyEdmunds1

Hi,

I recently downloaded the TOC widget, which I was able to add in the Flex Viewer. I am inexperienced with widgets and xml code, but I would really like to build a web map application that utilizes this functionality. I read the ReadMe file and scanned the forum but still do not know what to do next. Right now in preview mode the TOC is blank except for the words "Layer Visibility." I'm assuming that's because I haven't modified the xml code. I am using arcgis for organizations/hosted services thru arcgis.com. I would appreciate any feedback or links re: next steps, e.g., what lines of code I need to address. Thank you

Kim

JeffersonFerreira_Ferreira

Hi,

I recently downloaded the TOC widget, which I was able to add in the Flex Viewer. I am inexperienced with widgets and xml code, but I would really like to build a web map application that utilizes this functionality. I read the ReadMe file and scanned the forum but still do not know what to do next. Right now in preview mode the TOC is blank except for the words "Layer Visibility." I'm assuming that's because I haven't modified the xml code. I am using arcgis for organizations/hosted services thru arcgis.com. I would appreciate any feedback or links re: next steps, e.g., what lines of code I need to address. Thank you

Kim

Hi Kim;

All you need is add the lines to your config file. Are you using Flexviewer 2.5 or 3.0? Remark you cannot use this widget with the LayerListWidget and or MapSwitcherWidget with the layerlist visible="true". If post here your config and TOCWidget I can take a look.

KimberlyEdmunds1

Hi Kim;

All you need is add the lines to your config file. Are you using Flexviewer 2.5 or 3.0? Remark you cannot use this widget with the LayerListWidget and or MapSwitcherWidget with the layerlist visible="true". If post here your config and TOCWidget I can take a look.

Hi Jefferson - Thank you for your reply. I am using Flexviewer 3.0. I turned off the MapSwitcherWidget and am not using the LayerListWidget. Please see attached image of TOC widget settings. Is this the config that you refer to?

Kim

TOC_Config_ke.JPG

JeffersonFerreira_Ferreira

Hi Jefferson - Thank you for your reply. I am using Flexviewer 3.0. I turned off the MapSwitcherWidget and am not using the LayerListWidget. Please see attached image of TOC widget settings. Is this the config that you refer to?

Kim

Kim;

Note you have in <excludelayers></excludelayers> two child tags. One of them have an syntax error. The first one must be <excludelayer mapservice="Symbols"></excludelayer>, instead <excludelayer mapservice="Symbols"/>

Maybe it will be enough

Regards

KimberlyEdmunds1

I tried to make the edit in the configure window of the App Builder, but the change doesn't hold. When I save and return to the config window, it shows that it has reverted back. Is there someplace else where I should be making the edit?

Thanks

PetraKrsnik

Hi,

I'm using TOC widget 3.0 uncompiled version. Some of my layers have long names and therefore title text is not visible entirely. It is covered by menu items (zoom to, transpareny...etc). How can I fix that? I'm attaching an image so the issue would be clearer. Thaqnks for your help.
Best regards,
Petra

[ATTACH=CONFIG]18318[/ATTACH]

MissingText.jpg

JeffersonFerreira_Ferreira

I tried to make the edit in the configure window of the App Builder, but the change doesn't hold. When I save and return to the config window, it shows that it has reverted back. Is there someplace else where I should be making the edit?

Thanks

Kim;

Please attach your xml here, thus I can take a look.

Nimm an der Diskussion teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

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