How to change the shape of the pin?

3 posts, 0 answers
  1. Joel
    Joel avatar
    2 posts
    Member since:
    Apr 2015

    Posted 27 Mar Link to this post

    how to change the shape of the default pin to the user created shape pin?
  2. Dimitar
    Admin
    Dimitar avatar
    1871 posts

    Posted 27 Mar Link to this post

    Hello Joel,

    Thank you for writing.

    By default, the MapPin has a fixed shape and is manually drawn on the map surface. In this case, you can create a custom MapVisualElement and draw an image for example:
    class MapMarker : MapVisualElement
    {
        private Image image;
        private PointL pixelLocation;
        private RectangleL drawRect;
     
        public Image Image
        {
            get
            {
                return image;
            }
            set
            {
                this.image = value;
            }
        }
     
        public override bool IsInViewport
        {
            get { return true; }
        }
     
        public override void Paint(IGraphics graphics, IMapViewport viewport)
        {
            if (this.image == null)
            {
                return;
            }
     
            object state = graphics.SaveState();
            graphics.TranslateTransform(drawRect.X, drawRect.Y);
            Graphics g = graphics.UnderlayGraphics as Graphics;
     
            long mapSize = MapTileSystemHelper.MapSize(viewport.ZoomLevel);
     
            for (int i = -1; i <= viewport.NumberOfWraparounds; i++)
            {
                g.DrawImage(this.Image, new RectangleF(i * mapSize, 0, this.Size.Width, this.Size.Height));
            }
     
            graphics.RestoreState(state);
        }
     
        public override void ViewportChanged(IMapViewport viewport, ViewportChangeAction action)
        {
            long mapSize = MapTileSystemHelper.MapSize(viewport.ZoomLevel);
     
            if ((action & ViewportChangeAction.Zoom) != 0)
            {
                this.pixelLocation = MapTileSystemHelper.LatLongToPixelXY(this.Location, viewport.ZoomLevel);
            }
     
            if ((action & ViewportChangeAction.Pan) != 0)
            {
                this.drawRect = new RectangleL(pixelLocation.X - this.Size.Width / 2, pixelLocation.Y - this.Size.Height, this.Size.Width, this.Size.Height);
            }
        }
     
        public override bool HitTest(PointG pointG, PointL pointL, IMapViewport viewport)
        {
            return this.drawRect.Contains(pointL);
        }
    }

    Here is how you can add the marker:
    this.radMap1.Layers.Add(new MapLayer("L1"));
    MapMarker marker = new MapMarker();
    marker.Location = new PointG(60, -120);
    marker.Size = new Size(50, 50);
    marker.Image = Image.FromFile(@"C:\img\delete.png");
    this.radMap1.Layers["L1"].Add(marker);

    I hope this will be useful. Let me know if you have additional questions.

    Regards,
    Dimitar
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Joel
    Joel avatar
    2 posts
    Member since:
    Apr 2015

    Posted 28 Mar in reply to Dimitar Link to this post

    Thanks, it works.
Back to Top