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

Moveable Static Image Widget

NinaRihn

Has anybody developed a widget that can simply hold a static image, but where the widget window can be moved around on the page? Sometimes I just want to use a static legend (don't need a dynamic one) but I don't want to use an image that has to stay in one place on the page, like the StaticImageWidget.

Find more posts tagged with

Accepted answers

BenKane

Here is a widget that I built does what you ask for, and allows a few configurations in the .xml file.
Tags you can use in the xml file are:
<text> - text/label that appears above the image
<imageurl> - image source
<scaleX> - to scale image width
<scaleY> - to scale image height
<height> - for widget
<width> - for widget

Hope this is helpful.

MoveableImage.zip

All comments

BenKane

I have not tried it, but I have not recompiled the widget to work with FlexViewer 3.1. I will post here when I compile a new version of the widget.

I'm glad it was helpful in 3.0.

ChristinaGonzales

Is there a 3.1 version of this widget? I used the MoveableImageWidget in 3.0 and it worked fantastic, I would like to upgrade the viewer to 3.1.
Thanks so much!!

Here is a widget that I built does what you ask for, and allows a few configurations in the .xml file.
Tags you can use in the xml file are:
<text> - text/label that appears above the image
<imageurl> - image source
<scaleX> - to scale image width
<scaleY> - to scale image height
<height> - for widget
<width> - for widget

Hope this is helpful.

NinaRihn

Thanks Ben! That Flexviewer widget is exactly what I needed, and it is very simple and works great.. it does make my image quality degrade quite a bit, but I will work on the image, as it is just a basic legend image I made using Paint.

BenKane

That widget is for FlexViewer. If you are using the api to fully develop your application you can simply add drag functionality to your image control using the mouseDown and mouseUp events as triggers to start and end the dragging:

protected function _startDrag(event:MouseEvent):void
{
     event.currentTarget.startDrag();
}

protected function _stopDrag(event:MouseEvent):void
{
     event.currentTarget.stopDrag();
}

BenKane

MoveableImage.zip

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

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