topic Re: Dynamic layers not showing after map rotation in ArcGIS API for Flex Questions

Dynamic layers not showing after map rotation

RolandChu — Tue, 19 Mar 2013 02:12:07 GMT

Hi all,

I tried to integrate the new map rotation function in API 3.1 into the FV. It works perfect for the tiled layers.

However, the dynamic layers didn't show unless the angle of rotation is around 0+/-5, 90+/-5, 180+/-5 or 270+/-5 degree.

Did anyone know what's the problem? Thank you.

Here is my code:

<?xml version="1.0" encoding="utf-8"?> <viewer:BaseWidget 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:viewer  ="com.esri.viewer.*"        xmlns:components ="com.esri.ags.components.*">    <components:RotationWheel id="wheel"          width="75" height="75"          left="20" top="20"          change="map.rotateTo(wheel.mapRotation, wheel.mapRotation == 0)"          mapRotation="{map.mapRotation}"          skinClass="com.esri.ags.skins.RotationWheelSkin"/> </viewer:BaseWidget>

I just copied this from the sample and please find the RotationWheel and RotationWheelSkin from the samples come with the API.

Re: Dynamic layers not showing after map rotation

YannCabon — Sat, 11 Dec 2021 06:13:55 GMT

Hi,

I can't reproduce the issue with the following code:

<?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:mx="library://ns.adobe.com/flex/mx"
               xmlns:esri="http://www.esri.com/2008/ags"
               xmlns:components="com.esri.ags.components.*"
               minHeight="600"
               minWidth="955">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>


    <esri:Map id="map">
        <esri:ArcGISTiledMapServiceLayer/>
        <esri:ArcGISDynamicMapServiceLayer url="http://sampleserver6.arcgisonline.com/arcgis/rest/services/SF311/MapServer"/>
    </esri:Map>

    <components:RotationWheel id="wheel"
                              left="48" top="24"
                              change="map.rotateTo(wheel.mapRotation, wheel.mapRotation == 0)"
                              mapRotation="{map.mapRotation}"/>

</s:Application>

What is the version of your server?

Re: Dynamic layers not showing after map rotation

RolandChu — Wed, 20 Mar 2013 09:05:06 GMT

What is the version of your server?

You're right. In 10.0 sp4 it doesn't work. And then I publish the service to a 10.1 sp1 machine and now it works. Thank you.

Re: Dynamic layers not showing after map rotation

YannCabon — Wed, 20 Mar 2013 16:26:34 GMT

Cool!

You could fix it actually by setting on the dynamic layers the maxImageHeight and maxImageWidth values to 2048.
This property are automatically set by 10.1 servers' layers.

Re: Dynamic layers not showing after map rotation

RolandChu — Thu, 21 Mar 2013 00:40:07 GMT

Cool!

You could fix it actually by setting on the dynamic layers the maxImageHeight and maxImageWidth values to 2048.
This property are automatically set by 10.1 servers' layers.

You got the point again. I am using a full HD screen. And when I resize the viewer size smaller, the service on 10.0 can properly shown as well. Thank you so much.

Re: Dynamic layers not showing after map rotation

DilsonKitoko — Fri, 09 Jun 2017 10:07:38 GMT

Hello Roland Chu,

Did you managed to integrate the rotate to your Flex Viewer? I'm trying to implent to 3.6 version (AGS 10.2.2), using the Esri sample.

I just copied the code from sample into Flash builder, but I've an error saying that :

Error 1046:Type was not found or was not a compile-time constant:RotationWheel. Below is my code

<?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:components="com.esri.ags.samples.components.*"

pageTitle="Explore map rotation">

<fx:Script>

import com.esri.ags.samples.skins.RotationWheelSkin

import com.esri.ags.Map;

</fx:Script>

<fx:Declarations>

<s:Rotate id="rotateEffect"

duration="100"

target="{wheel}">

</s:Rotate>

</fx:Declarations>

<s:controlBarContent>

<s:RichText width="100%">

This sample demonstrates how to rotate the map using the

ArcGIS API for Flex. Rotate the wheel to rotate the map.

To reset the map rotation, click the "N" North button on the wheel.

</s:RichText>

</s:controlBarContent>

<esri:Map id="map"

crosshairVisible="true"

level="17"

middleButtonRotationEnabled="true"

wrapAround180="true"

zoomSliderVisible="false">

<esri:center>

<esri:MapPoint x="-10051125" y="4669530"/>

</esri:center>

<esri:ArcGISTiledMapServiceLayer url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer"/>

</esri:Map>

<components:RotationWheel id="wheel"

width="75" height="75"

left="20" top="20"

change="map.rotateTo(wheel.mapRotation, wheel.mapRotation == 0)"

mapRotation="{map.mapRotation}"

skinClass="com.esri.ags.samples.skins.RotationWheelSkin"/>

</s:Application>

Thanks in advance,

Dilson

Re: Dynamic layers not showing after map rotation

DilsonKitoko — Fri, 09 Jun 2017 14:51:20 GMT

Hello Sorry,

I posted the code in wrong why, I was trying to directly use the sample example application as widget structure.

Below is me code for the widget that 'm trying to do. By the way I getting 2 errors:

Syntax error 1084: expecting rightbrace before end of program (below)

</fx:Script>

"1131: Classes must not be nested." (below)

public class RotationWheel extends SkinnableComponent

<?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:esri="http://www.esri.com/2008/ags"

xmlns:RotateMap="widgets.RotateMap">

<fx:Script>

<![CDATA[

import com.esri.ags.Map;

import com.esri.viewer.AppEvent;

import com.esri.viewer.utils.LocalizationUtil;

import flash.events.Event;

import flash.events.MouseEvent;

import flash.geom.Point;

import flash.geom.Vector3D;

import mx.binding.utils.BindingUtils;

import mx.binding.utils.ChangeWatcher;

import mx.core.UIComponent;

import spark.components.Group;

import spark.components.supportClasses.SkinnableComponent;

[Event(name="change", type="flash.events.Event")]

[SkinState("up")]

[SkinState("overNorth")]

[SkinState("downNorth")]

[SkinState("overWheel")]

[SkinState("downWheel")]

[SkinState("disabled")]

public class RotationWheel extends SkinnableComponent

{

public static const DEG_PER_RAD:Number = 180 / Math.PI;

public function RotationWheel()

{

super();

buttonMode = true;

addEventListener(MouseEvent.MOUSE_OVER, mouseOverOutHandler);

addEventListener(MouseEvent.MOUSE_OUT, mouseOverOutHandler);

addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);

addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);

}

private var m_globalWheelCenter:Vector3D = new Vector3D();

private var m_originVector:Vector3D = new Vector3D();

private var m_wheelCenterVector:Vector3D = new Vector3D();

private var m_originMapRotation:Number = 0;

private var m_overWheel:Boolean;

private var m_mouseOverNorth:Boolean;

private var m_mouseDown:Boolean;

[SkinPart(required="false")]

public var wheel:Group;

[SkinPart(required="false")]

public var north:UIComponent;

private var m_mapRotation:Number = 0;

[Bindable("mapRotationChanged")]

public function get mapRotation():Number

{

return m_mapRotation;

}

public function set mapRotation(value:Number):void

{

if (m_mapRotation != value)

{

m_mapRotation = value;

if (skin)

{

skin.invalidateProperties();

}

dispatchEvent(new Event("mapRotationChanged"));

}

private var m_map:Map;

private var m_mapRotationWatcher:ChangeWatcher;

public function get map():Map

{

return m_map;

}

public function set map(value:Map):void

{

if (m_map !== value)

{

if (m_mapRotationWatcher)

{

m_mapRotationWatcher.unwatch();

}

m_map = value;

if (m_map)

{

mapRotation = m_map.mapRotation;

if (m_mapRotationWatcher)

{

m_mapRotationWatcher.reset(m_map);

}

else

{

m_mapRotationWatcher = BindingUtils.bindProperty(this, "mapRotation", m_map, "mapRotation");

}

override protected function getCurrentSkinState():String

{

var state:String = "up";

if (m_overWheel)

{

state = m_mouseDown ? "down" : "over";

state += "Wheel";

}

else if (m_mouseOverNorth)

{

state = m_mouseDown ? "down" : "over";

state += "North";

}

return state;

}

private function stop():void

{

stage.removeEventListener(Event.ENTER_FRAME, enterFrameHandler);

stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);

m_mouseDown = false;

}

private function mouseOverOutHandler(event:MouseEvent):void

{

if (!m_mouseDown)

{

m_overWheel = m_mouseOverNorth = false;

if (event.target === north)

{

m_mouseOverNorth = true;

}

else

{

m_overWheel = true;

}

invalidateSkinState();

}

private function mouseDownHandler(event:MouseEvent):void

{

var globalCenter:Point = wheel.localToGlobal(new Point(wheel.transformX, wheel.transformY));

m_globalWheelCenter.setTo(globalCenter.x, globalCenter.y, 0.0);

m_wheelCenterVector.setTo(m_globalWheelCenter.x, m_globalWheelCenter.y, 0.0);

m_originVector.setTo(event.stageX, event.stageY, 0.0);

m_originVector = m_originVector.subtract(m_wheelCenterVector);

m_originVector.normalize();

m_originMapRotation = m_mapRotation;

stage.addEventListener(Event.ENTER_FRAME, enterFrameHandler);

stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);

m_mouseDown = true;

invalidateSkinState();

}

private function enterFrameHandler(event:Event):void

{

var mousePosition:Point = wheel.localToGlobal(new Point(wheel.mouseX, wheel.mouseY));

var newVector:Vector3D = new Vector3D(mousePosition.x, mousePosition.y);

newVector = newVector.subtract(m_wheelCenterVector);

newVector.normalize();

var n:Vector3D = m_originVector.crossProduct(newVector);

var newAngle:Number = Vector3D.angleBetween(m_originVector, newVector) * DEG_PER_RAD;

if (n.z < 0)

{

newAngle = -newAngle;

}

newAngle += m_originMapRotation;

if (isNaN(newAngle))

{

newAngle = 0;

}

if (Math.abs(mapRotation - newAngle) > 1)

{

mapRotation = newAngle;

dispatchEvent(new Event(Event.CHANGE));

}

private function mouseUpHandler(event:MouseEvent):void

{

stop();

invalidateSkinState();

if (m_mouseOverNorth)

{

if (Math.abs(mapRotation - m_originMapRotation) < 3)

{

mapRotation = 0;

dispatchEvent(new Event(Event.CHANGE));

}

]]>

</fx:Script>

<s:Group enabled="{map.loaded}"

includeInLayout="{panwheelItem.toolVisible}"

layoutDirection="ltr"

visible="{panwheelItem.toolVisible}">

<s:Button id="wheel"

width="75" height="75"

left="20" top="20"

change="map.rotateTo(wheel.mapRotation, wheel.mapRotation == 0)"

mapRotation="{map.mapRotation}"

skinClass="widgets.RotateMap.RotationWheelSkin"/>

</s:Group>

Re: Dynamic layers not showing after map rotation

DilsonKitoko — Fri, 09 Jun 2017 16:33:56 GMT

I almost there. I managed to implement the sample into a widget! By the way, the tool is not interacting with the map. I can rotate the "wheel" , I can click on "N" to center the weehl. But nothing happens in the map. I suspect that it's because I've ommitted the following line from the sample (I didn't figure out how to implement this part into the widget):

<esri:center>
            <esri:MapPoint x="-10051125" y="4669530"/>
        </esri:center>
        <esri:ArcGISTiledMapServiceLayer url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer"/>
    </esri:Map>

Here is my code :

<?xml version="1.0" encoding="utf-8"?>

<viewer:BaseWidget 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:viewer="com.esri.viewer.*"

xmlns:components="widgets.RotateMap.components.*">

<fx:Script>

<![CDATA[

import com.esri.ags.Map;

import com.esri.ags.geometry.MapPoint;

import com.esri.viewer.AppEvent;

import com.esri.viewer.utils.LocalizationUtil;

import mx.collections.ArrayCollection;

import mx.events.FlexEvent;

]]>

</fx:Script>

<fx:Declarations>

</fx:Declarations>

<esri:Map id="map"

crosshairVisible="true"

level="17"

middleButtonRotationEnabled="true"

wrapAround180="true"

zoomSliderVisible="false">

</esri:Map>

<components:RotationWheel id="wheel"

width="75" height="75"

left="20" top="20"

change="map.rotateTo(wheel.mapRotation, wheel.mapRotation == 0)"

mapRotation="{map.mapRotation}"

skinClass="widgets.RotateMap.skins.RotationWheelSkin"/>

</viewer:BaseWidget>

Any tip on this issue?

Thanks in advance

Dilson

Re: Dynamic layers not showing after map rotation

DilsonKitoko — Tue, 13 Jun 2017 10:24:44 GMT

Question solved, I was totally misunderstanding the concept between a sample and passing into a widget format. I just had to remove the class esr:map and voila, the Rotate Wheel interacts with the my WebGIS application.