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

Add button to PopupInfo

lavoillottenicolas

Hello
is it possible to add components to PopUpInfo : e.g a simple button ?

like for the link "zoom on" I would like add a button that open the widget "google street" on the current location of my map

Finde mehr Beiträge mit dem Tag

Accepted answers

All comments

RobertScheitlin__GISP

Lavoillette,

That would involve getting the PopUpRendererSkin.mxml from the Flex API download in the arcgis_api_for_flex_2_4\ArcGIS_Flex\skins\src\com\esri\ags\skins folder and adding a new button to the Declarations section and in the commitProperties function adding to the popup just like the zoom to button.

MarcoPoetsch3_0-1610503838019.png

lavoillottenicolas

Thanks Roberts,

is it possible to override class PopupRendererSkin with my own renderer, instead of change the class PopupRendererSkin ?

RobertScheitlin__GISP

Lavoillette,

Sure just use that as your starting point, for can use any skin you want with the PopUp.

lavoillottenicolas

Hi Roberts,

I created my own skin "CustomPopUpRendererSkin" with the source : PopUpRenderer, and my component "CustomPopUpRenderer" derived from PopupRenderer

When I Use my component : PopupRenderer, my skin : CustomPopUpRendererSkin is never called ? only the PopUpRendererSkin is called

Into the widget "LocateWidget" :

private function showLocation(data:Object):void
            {
                hideInfoWindow();
                graphicsLayer.clear();
                var ptGraphic:Graphic = new Graphic();
                ptGraphic.geometry = data.point;
                graphicsLayer.add(ptGraphic);

                var popUpInfo:PopUpInfo = new PopUpInfo();
                popUpInfo.title = data.title;
                popUpInfo.description = data.content;

//
// My component
                var infoWindowRenderer:ClassFactory = new ClassFactory(CustomPopUpRenderer);

                infoWindowRenderer.properties = { popUpInfo: popUpInfo };
                graphicsLayer.infoWindowRenderer = infoWindowRenderer;

                popUpRenderer.popUpInfo = popUpInfo;
                popUpRenderer.graphic = ptGraphic;

                if (map.scale > zoomScale)
                {
                    map.scale = zoomScale;
                }
                map.centerAt(data.point);

                infoWindowShow();
            }

My CustomPopUpRenderer.as
-------------------------
package com.esri.viewer.components
{
import com.esri.ags.webmap.PopUpRenderer;

public class CustomPopUpRenderer extends PopUpRenderer
{
public function CustomPopUpRenderer()
{
   //TODO: implement function
   super();
}
}
}

My CustomPopUpRendererSkin.mxml
-------------------------------
<s:SparkSkin 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:esri="http://www.esri.com/2008/ags"
             xmlns:supportClasses="com.esri.ags.skins.supportClasses.*"
             width="270"
             maxHeight="300"
             preinitialize="skin_preinitializeHandler(event)">
<fx:Metadata>[HostComponent("com.esri.viewer.components.CustomPopUpRenderer")]</fx:Metadata>

    <fx:Script>
        <![CDATA[
        ..... currently the source of PopUpRendererSkin.mxml

Nicolas

Regards

RobertScheitlin__GISP

Nicolas,

The way use a particular PopUpRenederSkin is just one line of code. You do not need a CustomPopUpRenderer.as all you need is your CustomPopUpRendererSkin.mxml and this line in your widget.

popUpRenderer.setStyle("skinClass", Class(widgets.MyPopUps.PopUpRendererSkin));

So your whole function would look like this:

            private function showLocation(data:Object):void
            {
                hideInfoWindow();
                graphicsLayer.clear();

                var ptGraphic:Graphic = new Graphic();
                ptGraphic.geometry = data.point;
                graphicsLayer.add(ptGraphic);

                var popUpInfo:PopUpInfo = new PopUpInfo();
                popUpInfo.title = data.title;
                popUpInfo.description = data.content;

                var infoWindowRenderer:ClassFactory = new ClassFactory(PopUpRenderer);
                infoWindowRenderer.properties = { popUpInfo: popUpInfo };
                graphicsLayer.infoWindowRenderer = infoWindowRenderer;

                popUpRenderer.popUpInfo = popUpInfo;
                popUpRenderer.graphic = ptGraphic;
                popUpRenderer.setStyle("skinClass", Class(widgets.MyPopUps.PopUpRendererSkin));

                if (map.scale > zoomScale)
                {
                    map.scale = zoomScale;
                }
                map.centerAt(data.point);

                infoWindowShow();
            }

Of course you will need to import your PopUpRendererSkin as well:

import widgets.MyPopUps.PopUpRendererSkin;

lavoillottenicolas

thanks Roberts,

it works

nicolas
regards

TroySchmidt

When I do this I am trying to access this.hostcomponent in the SkinClass and it is giving me null. I am trying to do additional processing by overriding the commitProperties function. Is this methodology wrong?

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.