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

Dynamic layers not showing after map rotation

RolandChu

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.

Trouver plus de publications taguées avec

Accepted answers

YannCabon

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.

All comments

DilsonKitoko

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

DilsonKitoko

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>

DilsonKitoko

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

RolandChu

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.

YannCabon

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.

RolandChu

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.

YannCabon

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?

Rejoindre la conversation

Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.

Liens rapides

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