AnsweredAssumed Answered

How to keep graphic facing up with MapView rotation?

Question asked by o.raadopenware-com-kw-esridist Employee on Sep 17, 2018

I have a POI marker drawn on the map as a balloon. When I rotate the MapView, the POI marker rotates with the map which is undesired behavior. As a work around, I used a FeatureLayer with SimpleRenderer coupled with rotation visualVariables.

let POIFeatureLayer = new FeatureLayer({
    id: 'POIFeature',
    source: [],
    fields: [
        {
            name: "ObjectID",
            alias: "ObjectID",
            type: "oid"
        }
    ],
    renderer: {
        type: "simple",
        symbol: POIMarker,
        visualVariables: [{
            type: "rotation",
            field: (graphic) => -view.rotation,
            rotationType: "geographic"
        }]
    },
    objectIdField: "ObjectID",
    spatialReference: view.spatialReference,
    geometryType: "point"
});

But I faced an issue that the renderer does not render on rotation.

To solve this issue I added a MapView rotation watcher where I remove then add the features on the FeatureLayer

view.watch('rotation', (event) => {
    let featureLayer = map.findLayerById('POIFeature')
    let source = featureLayer.source;
    let items = source.clone();
    source.removeAll()
    source.addMany(items)
})

The watcher allows the graphic rotation to be reset to up direction, but it only happens at the end of the rotation. So the graphic currently rotates with the MapView until the rotation is done the reset to facing up.

 

You can find a working example on the link below.

MapView Rotation with POI 

 

My question is, is there a better / smoother way of keeping the graphic always facing up with the MapView rotation?

Outcomes