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

Symbol with a sprite or flex component

MattStrum

I would like to have a marker that is just a sprite or a flex component. InfoSymbol looks promising but I don't want a bubble around my component. Is there any support for this?

Vind meer berichten getagd met

Accepted answers

RobertScheitlin__GISP

Matt,

You might want to look at this thread where I helped Hannes with a FXP project that extends the APIs sybmbol and draws stacked bar chart based on the attributes of two fields.

http://forums.arcgis.com/threads/49695-Help-Drawing-bar-or-pie-charts-on-the-map-from-feature-layer!

Don't forget to click the Mark as answer check and to click the top arrow (promote) as shown below:

All comments

MattStrum

Thanks for the help, that looks like what I need. I wanted to extend the symbol class but couldn't find any documentation on how to do it so perhaps this might be something to add to the examples 🙂

RobertScheitlin__GISP

MattStrum

Without being able to create an instance I'm not sure it's useful to me. I generate a lot of different symbols which have numbers, colors, etc. based on various values. I'm coming from the Google Maps API for Flash which had this ability so I'm trying to find something which can do something similar.

SarthakDatt

Matt,

Here is another thought, looking at the PictureMarkerSymbol.source(http://help.arcgis.com/en/webapi/flex/apiref/com/esri/ags/symbols/PictureMarkerSymbol.html), you could try setting your UIComponent and/or sprite as source of the PMS.

Something like:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:esri="http://www.esri.com/2008/ags"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               initialize="application1_initializeHandler(event)">

    <fx:Script>
        <![CDATA[
            import com.esri.ags.symbols.PictureMarkerSymbol;
            
            import mx.controls.CheckBox;
            import mx.events.FlexEvent;
           
            [Bindable]
            private var tempSymbol1:PictureMarkerSymbol;
            
            protected function application1_initializeHandler(event:FlexEvent):void
            {
                tempSymbol1 = new PictureMarkerSymbol();
                tempSymbol1.source = CheckBox;   // has to be the class itself, right now it cannot be an instance of the class
                tempSymbol1.width = 50;
                tempSymbol1.height = 50;
            }

        ]]>
    </fx:Script>
    
    <esri:Map>
        <esri:ArcGISTiledMapServiceLayer url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Physical_Map/MapServer"/>
        <esri:GraphicsLayer symbol="{tempSymbol1}">
            <esri:Graphic>
                <esri:MapPoint x="0" y="0"/>
            </esri:Graphic>
        </esri:GraphicsLayer>
    </esri:Map>
</s:Application>

or alternatively:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:esri="http://www.esri.com/2008/ags"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               initialize="application1_initializeHandler(event)">

    <fx:Script>
        <![CDATA[
            import com.esri.ags.symbols.PictureMarkerSymbol;
            
            import mx.controls.CheckBox;
            import mx.events.FlexEvent;
           
            [Bindable]
            private var tempSymbol1:PictureMarkerSymbol;
            
            protected function application1_initializeHandler(event:FlexEvent):void
            {
                tempSymbol1 = new PictureMarkerSymbol();
                tempSymbol1.source = TestGraphics;  
                tempSymbol1.width = 50;
                tempSymbol1.height = 50;
            }

        ]]>
    </fx:Script>
    
    <esri:Map>
        <esri:ArcGISTiledMapServiceLayer url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Physical_Map/MapServer"/>
        <esri:GraphicsLayer symbol="{tempSymbol1}">
            <esri:Graphic>
                <esri:MapPoint x="0" y="0"/>
            </esri:Graphic>
        </esri:GraphicsLayer>
    </esri:Map>
</s:Application>

where TestGraphics.mxml is:


<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx" width="30" height="50">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <s:Ellipse height="100%" width="100%">
        <s:fill>
            <s:SolidColor color="0xff0000"/>
        </s:fill>
    </s:Ellipse>
</s:Group>

Hope that helps.

MattStrum

No, I'm looking to add a UIComponent to the map. EDIT: Or even just a sprite

Swatches do look very useful though, thanks for pointing me to that.

SarthakDatt

Hey,

Are looking to add this marker on the map(as part of a graphic)?
If not, you can call Symbol.createSwatch()(http://help.arcgis.com/en/webapi/flex/apiref/com/esri/ags/symbols/Symbol.html#createSwatch()).It returns a UIComponent.

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.