Marker drag and drop with panning enabled

[MS]

Hi,

The KB article here describes how to move a marker, that's great when you want panning disabled, but doesn't work well if you want to be able to move markers and also be able to pan as well.

My solution to this issue was to have a custom marker template and handle pointer down event to set a flag.

Basically if pointer is down on the marker, then disable panning in Layer_Panning method and move markers, otherwise just pan the map.

Problem is the events are not raised, what am i doing wrong?

<sfmaps:MapTileLayer.MarkerTemplate>

    <DataTemplate>

        <Grid>

            <Image Source="map_marker_green.png">

                <Image.GestureRecognizers>

                    <PointerGestureRecognizer PointerPressed="PointerGestureRecognizer_PointerPressed" PointerReleased="PointerGestureRecognizer_PointerReleased" />

                </Image.GestureRecognizers>

            </Image>

        </Grid>

    </DataTemplate>

</sfmaps:MapTileLayer.MarkerTemplate>

[Priyadharshni Murugan]

Hi Rebin,

Thank you for sharing your observations regarding the interaction between marker dragging and map panning in the Syncfusion .NET MAUI SfMaps control.

Based on the information you provided, we understand that you are facing challenges when trying to allow both marker movement and map panning simultaneously.

The original Knowledge Base sample was intended for scenarios where only marker movement is required and map panning is disabled during the operation. As you pointed out, this approach prevents users from both dragging markers and panning the map — an experience that is often needed in interactive map applications.

To address this, we have improved the logic to dynamically enable or disable map panning based on whether the user is interacting with a marker — specifically, panning is disabled and the marker is moved when the pointer interacts with the marker. Otherwise, map panning remains enabled for smooth navigation.

Using this approach, you can achieve seamless coexistence of marker dragging and map panning functionalities.

We have prepared an example sample to achieve your requirement and attached it below for your reference. Please check the sample and let us know whether this meets your requirement.

If you have any further questions or require assistance with any other aspect, please let us know. We are happy to help!

Regards,

Priyadharshni M

Attachment: MauiMapMarker_98e3be72.zip

[MS]

Hi  Priyadharshni,

Thanks for the solution, at a glance it seems to be working as expected.

But after a close look, it seems like it does not work when zoomed in, if you try zoom level > 9 you can click anywhere and it will move the marker.

[Jeyasri M]

Hi Rebin,

 

Thank you for your feedback and for thoroughly testing the provided solution.

We have analyzed the reported scenario “the marker moves when clicking anywhere at higher zoom levels” using our provided sample and identified that the scenario can be resolved at the sample level. In the previously shared sample, the marker's location was only considered based on latitude and longitude coordinates, without accounting for changes in different zoom levels.

To address this, we have updated the sample by introducing a custom method (ConvertLatLngToPixel) that converts geographical coordinates to pixel coordinates, ensuring accurate marker detection across zoom levels, as shown in the following code snippet:

 

[C#]:

private void layer_Panning(object sender, PanningEventArgs e)

{

   var position = layer.GetLatLngFromPoint(e.Position);

   var tappedPixel = ConvertLatLngToPixel(position, this.zoomLevel);

   foreach (var marker in layer.Markers)

   {

 

       var markerPixel = ConvertLatLngToPixel(new MapLatLng(marker.Latitude, marker.Longitude), this.zoomLevel);

       var halfWidth = marker.IconWidth / 2;

       var halfHeight = marker.IconHeight / 2;

       if (tappedPixel.X >= (markerPixel.X - halfWidth) &&

           tappedPixel.X <= (markerPixel.X + halfWidth) &&

           tappedPixel.Y >= (markerPixel.Y - halfHeight) &&

           tappedPixel.Y <= (markerPixel.Y + halfHeight))

       {

 

           this.mapZoomPanBehavior.EnablePanning = false;

           marker.Latitude = position.Latitude;

           marker.Longitude = position.Longitude;

           break;

       }

       else

       {

           this.mapZoomPanBehavior.EnablePanning = true;

       }

   }

 

}

 

private void layer_ZoomLevelChanging(object sender, ZoomLevelChangingEventArgs e)

{

   this.zoomLevel = e.NewZoomLevel;

}

 

private Point ConvertLatLngToPixel(MapLatLng location, double zoom)

{

   double latitude = location.Latitude;

   double longitude = location.Longitude;

 

   double x = (longitude + 180.0) / 360.0 * (tileSize << (int)zoom);

   double y = (1 - Math.Log(Math.Tan(Math.PI / 4 + Math.PI * latitude / 180.0 / 2)) / Math.PI) / 2.0 * (tileSize << (int)zoom);

 

   return new Point(x, y);

 

}

 

 We have modified our previously shared sample and attached below for your reference. Please check the sample and let us know whether this meets your requirements.

 

We hope that this helps you. Please let us know if you need further assistance.

Regards,

Jeyasri M

Attachment: MauiMapMarker_1_fdc1ae40.zip

[MS]

Hi  Jeyasri,

The new solution works better but still moves the map layer.

Please see attached.

Thanks for all your help.

Attachment: Recording_20250709_095717_4ac64933.zip

[Vishal Omprasad]

Hi Rebin,

Thank you for sharing the video and your feedback.

Upon reviewing the recording, we noticed that when dragging the marker very quickly, the map begins to pan. This occurs because, at higher speeds, the cursor can move outside the bounds of the marker, allowing the map to register the drag gesture and initiate panning. This behavior is expected behavior.

If you have further questions or need assistance, please feel free to let us know. We are always happy to help!

Regards,
Vishal O.

[MS]

Hi Vishal,

Though this might be "expected" behavior it's really not a desired one, best would be to able to tell when mouse/touch is down on marker, set a flag and move marker at whatever speed.

Won't be good to tell the end user to move the marker slowly.

Thank you.

[Priyadharshni Murugan]

Hi Rebin,

In our shared workaround, dragging a marker currently conflicts with map panning, especially during quick movements when the pointer moves outside the marker area. So we have created a feature request to support proper drag-and-drop functionality for markers.

 

We plan to implement this feature in any of our upcoming releases. During the planning stage for each release cycle, we review all open features and identify implementations based on parameters such as product vision, technological feasibility, and customer interest. Please upvote this feature to prioritize it.

 

We will notify you when this feature is implemented. However, you can communicate with us regarding any open features at any time using our Feature Report page.

 

Feedback link: https://www.syncfusion.com/feedback/68895/drag-and-drop-support-for-markers-in-net-maui-sfmaps

 

If you have any more specification/suggestions to the feature request, you can add it as a comment in the portal and cast your vote to make it count.

 

Regards,

Priyadharshni M

[MS]

Hi  Priyadharshni,

Thank you for considerin