ThinkGeo.com    |     Documentation    |     Premium Support

Custom adornment layer drawing or redrawing issue on refresh in mapsuite iOS

#1

Hi there,
We are using the MapSuite for iOS using xamarin.forms. Due to our need we had to create to custom adornment layers using the available samples for thinkgeo map suite for wpf.
We created one custom unit scalebar and a north arrow display adornment layer. Then we add them to the MapViewAdornment layer using the following api. For the first time when it draws they are drawn fine, but if I zoom-in or refresh then the new scale bar or the north arrow is drawn on top of the last scale or north arrow. We tried to refresh the adornment layer when the current context changes, but did not work either.

screen shot of the draw/redraw/ refresh issue

2017-01-19_13h33_22.png869×1161 185 KB

For convenience I includes the draw core method of our compass adornment layer

protected override void DrawCore(GeoCanvas canvas, Collection<SimpleCandidate> labelsInAllLayers)
        {
            // Draws the scaled images of needle and frame images according to the percentage size. For example with a PercentageSize of 80,  
            // the compass size will be 80% of the size of needle image.  
            //Sets the position of the compass.  
            int margin = 10;
            int Xloc = 0;
            int Yloc = 0;
            int imageWidth = (sizePercentage * needleImage.GetWidth()) / 100;
            int imageHeight = (sizePercentage * needleImage.GetHeight()) / 100;
            switch (Position)
            {
                case AdornmentPosition.UpperLeft:
                    Xloc = (imageWidth / 2) + margin;
                    Yloc = (imageHeight / 2) + margin;
                    break;
                case AdornmentPosition.UpperRight:
                    Xloc = ((int)canvas.Width - (imageWidth / 2)) - margin;
                    Yloc = (imageHeight / 2) + margin;
                    break;
                case AdornmentPosition.LowerLeft:
                    Xloc = (imageWidth / 2) + margin;
                    Yloc = ((int)canvas.Height - (imageHeight / 2)) - margin;
                    break;
                case AdornmentPosition.LowerRight:
                    Xloc = ((int)canvas.Width - (imageWidth / 2)) - margin;
                    Yloc = ((int)canvas.Height - (imageHeight / 2)) - margin;
                    break;

                case AdornmentPosition.LowerCenter:
                    Xloc = ((int)canvas.Width / 2 - (imageWidth / 2)) - margin;
                    Yloc = ((int)canvas.Height - (imageHeight / 2)) - margin;
                    break;
                //case AdornmentPosition.Center:
                //    Xpos = ((int)canvas.Width / 2) - margin;
                //    Ypos = ((int)canvas.Height / 2) - margin;
                //    break;
                case AdornmentPosition.UpperCenter:
                    Xloc = ((int)canvas.Width / 2 + (imageWidth / 2)) + margin;
                    Yloc = margin + (imageHeight / 2);
                    break;
            }

            // canvas.Clear(new GeoSolidBrush(GeoColor.SimpleColors.Transparent));

            //Draws the needle image at the size according to the percentage size and rotate the image according to RotateAngle property.  
            canvas.DrawScreenImage(needleImage, Xloc, Yloc, imageWidth, imageHeight, DrawingLevel.LevelFour, 0, 0, rotateAngle);
            //If the frame image has been set, draws image at the size according to the percentage size with no rotation.  
            if (frameImage != null)
            {
                canvas.DrawScreenImage(frameImage, Xloc, Yloc, imageWidth, imageHeight, DrawingLevel.LevelFour, 0, 0, 0);
            }
        }
#2

Hi Syed,

Thanks for your code, but our developer hadn’t reproduce that via this code, could you please upload a simple sample which can reproduce this problem so we can go on working on it?

Regards,

Don

#3

Dear Don,
First of all please note this is a xamarin Forms help question. Here is the file with CompassAdornmentLayerCompassAdornmentLayer.cs (6.1 KB)

And here is the usages of this class

var image = new GeoImage(@"north_arrow.png");                
var compassAdornmentLayer = new CompassAdornmentLayer(image, northArrowLocation, 70);
MapView.AdornmentOverlay.Layers.Add(MapEngineHelper.NorthRowLayerKey, compassAdornmentLayer);

Everything else is standard thinkgeo code.
Please Note: When I use the build in scale bar then there is no refresh/rendering issue. Its for custom adornment layers! For reference my code is based on the sample from ThinkGeo How to.

I have put together a sample project where you can see the drawing issue if you zoom in and out and look at the custom scale bar.

Regards,
Murshed

#4

Hi Murshed,

It seems that I can’t reach it dropbox to get the sample. Please append it here or send it to forumsupport@thinkgeo.com.

I viewed the source code of AdornmentOverlay. It should be refreshed while mapview is refreshing. You can insert a breakpoint at CompassAdornmentLayer to see if it can be hit. If it can be hit, please make sure the new scale bar is calculate dynamically like our built-in scalebar while map zoom in/out.

Thanks,
Peter

#5

Hi Peter,
It draws and recalculates all properly. The problem is with the UI Refresh. I also tried to refresh the overlay.
But My problem is the new scalebar or north arrow is drawn on top of the previous north arrow or scale bar.
Please see the first forum entry screen shot and notice the text and north arrow gets darker and darker because of the redraw issue!

Note: the sample I cannot attach here because its 22MB and the email I will try.
Regards,
Mushed

#6

Hi Mushed,

It seems that the sample does not reached. Could you please resend it?

Thanks,
Peter

#7

Here is it. We had to create a support ticket because we need the solution urgently!! CustomAdornmentLayerProblem.zip (2.1 MB)

#8

Hi Mushed,

Please see the updates in the ticket thread.

Thanks,
Peter