ThinkGeo.com    |     Documentation    |     Premium Support

Smoother map zooming

#1

Hi,

I’m trying to improve zooming experience, especially with touch screen and pinch zooming. The default 20 zoom levels are very coarse and after pinch zooming the map snaps to the closest predefined zoom level. I’ve tried to overcome this by partitioning the zoom levels further as in the example at https://wiki.thinkgeo.com/wiki/source_code_desktopeditionsample_zoomlevelpartitioning_cs_091023.zip

This is the code that I changed in the tutorial:

private void mapView_Loaded(object sender, RoutedEventArgs e)
{
    // Set the Map Unit.
    mapView.MapUnit = GeographyUnit.Meter;

    // Add a base map overlay.
    var cloudVectorBaseMapOverlay = new ThinkGeoCloudRasterMapsOverlay("USlbIyO5uIMja2y0qoM21RRM6NBXUad4hjK3NBD6pD0~", "f6OJsvCDDzmccnevX55nL7nXpPDXXKANe5cN6czVjCH0s8jhpCH-2A~~", ThinkGeoCloudRasterMapsMapType.Light);
    mapView.Overlays.Add(cloudVectorBaseMapOverlay);

    mapView.ZoomLevelSet = PartitionZoomLevelSet(10, new ZoomLevelSet());
    mapView.Refresh();
}

// https://wiki.thinkgeo.com/wiki/source_code_desktopeditionsample_zoomlevelpartitioning_cs_091023.zip
// This code will take the zoom level set you pass in and add
// the number of intermediate levels you specify.
public ZoomLevelSet PartitionZoomLevelSet(int stepsBetweenZoomLevels, ZoomLevelSet referenceZoomLevelSet)
{
    ZoomLevelSet partitionedZoomLevelSet = new ZoomLevelSet();
    Collection<ZoomLevel> zoomLevels = referenceZoomLevelSet.GetZoomLevels();
    partitionedZoomLevelSet.CustomZoomLevels.Add(new ZoomLevel(zoomLevels[0].Scale));
    foreach (ZoomLevel zoomLevel in zoomLevels)
    {
        double lowerScale = ZoomLevelSet.GetLowerZoomLevelScale(zoomLevel.Scale, referenceZoomLevelSet);
        if (lowerScale != zoomLevel.Scale)
        {
            for (int x = 1; x < stepsBetweenZoomLevels + 2; x++)
            {
                double steppedScale = zoomLevel.Scale - (((zoomLevel.Scale - lowerScale) / (stepsBetweenZoomLevels + 1)) * x);
                partitionedZoomLevelSet.CustomZoomLevels.Add(new ZoomLevel(steppedScale));
            }
        }
    }
    return partitionedZoomLevelSet;
}

The result is quite ok, but I noticed quite a lot of flickering, when e.g. zooming fast in and out with mouse wheel. Sometimes when you zoom only a little, you don’t see that flickering. But when you zoom quicker, then you start seeing white tiles being drawn before the actual map data gets drawn instead.

Is there some “double buffering” feature or similar that could be enabled to reduce the flickering?

Thanks,
Rasmus

#2

Hi Rasmus,

The problem is that the “ThinkGeoCloudRasterMapsOverlay” only has 20 zoom levels , even we have added 210 new zoom levels to the map. When doing the request with “ThinkGeo Cloud”, the map’s scale still needs to snap to one of “ThinkGeoCloudRasterMapsOverlay” zoom levels. so we have the “Flickering” issue when zooming fast, because the map needs to change from one of 20 zoom levels to the next, they maybe have a big difference.

The ThinkGeo control doesn’t support this feature now. A workaround is overwrite “ExtentInteractiveOverlay” and “TileView”, the “ExtentInteractiveOverlay” is for any interactive with the map, such as mouse, keyboard etc. There we can try supporting “Smooth zoom in/out”, while in “TileView”, we have to stretch the tile image if the map’s scale is between 2 predefined zoom levels. It’s a bit complicated, it may need several days to make it supported, could you please create an ticket or contact sales@thinkgeo.com for this requirement?

Thanks,
Johnny

#3

Thanks Johnny,

The flickering issue is currently a only small issue, we’ll still evaluate and to figure out if we feel that it requires some fixes. If so, we will create a ticket or contact support.

But actually we are more interested in getting the user experience with touch screen pinch zooming better. With the above code, the pinch zooming with two fingers behaves strangely. Please see the attached video. pinch_zooming.zip (3.1 MB)

  • With the above code, it at first seems that during the interactive zooming part, the user is zooming quite much in or out, but when the zooming is released, the zoom level jumps back quite a lot. So only a smaller zooming step was taken than it originally seemed.

  • Also while zooming with two fingers, the zoom origin remains at the same coordinates, so panning doesn’t happen if user pans with two fingers. But when zooming is released, then the map jumps into new location. (Unfortunately this was not recorded, so not visible in the video) It seems as if the panning happens there somewhere in the background, but becomes visible only after the pinch zooming is released. Is there some way to improve this? E.g. enable simultaneous zooming and panning with two fingers?

We would appreciate some tips how to make the zooming (and simultaneous panning) with touch screen more user-friendly. Should we contact support or create a ticket about this?

Thanks, Rasmus

#4

Hi Rasmus,

The biggest problem is that “ThinkGeoCloudRasterMapsOverlay” only has 20 zoom levels on server side, besides, the touch/pinch is not supported in “ExtentInteractiveOverlay” now, which is used to track the operations on map, such as pan, zoom, touch, pinch etc. and then change properties of the map for drawing. It’s unable to support it by increasing the number of zoom levels, I have logged this requirement in our task list, and have a talk with our manager and see if we can support it in the SDK in near future. I will keep the progress updated here.

Thanks,
Johnny

#5

Thanks Johnny,

Just to mention that we are using also other overlay types than “ThinkGeoCloudRasterMapsOverlay” as the background map. E.g. “LayerOverlay”, “WmsOverlay” and “WmtsTiledOverlay”. So this is not specific to the cloud raster overlay, but touch screen zooming more generally.

Also the insertion of extra intermediate zoom levels was my hacking for trying to improve the touch screen UX and I tried to make the jumping to nearest zoom level less noticeable. But I’m not sure if this is the best way to achieve this or are there better alternatives…

BR, Rasmus

#6

Hi Rasmus，

Here we have a couple samples showing how to use 2 fingers to pinch/stretch the WPF map on a touchable Windows device with Map Suite 10.

samples/wpf/TouchEventsSample · support/v10 · ThinkGeo / Public / Desktop Maps · GitLab

samples/wpf/RotateEventsSample · support/v10 · ThinkGeo / Public / Desktop Maps · GitLab

We also transported the Stylus/Touch related events to Map Suite 12 but frankly speaking, we didn’t really test it too much though because of the unpopularity of Windows touch devices. So I suggest you play with the above touch events sample first and if that meets your requirement, you can upgrade the sample to Map Suite 12, and use it in your application if that works.

Thanks,
Ben

#7

Hi Ben,

Thanks, I can try those.

But if we can’t get the zooming experience better, then we may need to disable the zoom feature with two fingers. Is there some configuration option to disable that?

Thanks, Rasmus

#8

Hi Rasmus,

The following line should disable the two fingers zooming.
map.IsManipulationEnabled = false;

Thanks,
Ben

#9

Hi,

I’m returning to this question as I’ve noticed a couple of problems with very basic touch UI.

The below zip file contains a simple test application that can be used to test the touch zooming:
TouchTest.zip (11.4 KB)

There are two problems:

  1. When user uses two fingers to zoom in, the map jumps eastward after zoom is complete. So if you are for example in global scale and zooming in to USA, the interactive zoom suggests that you are zooming into USA, but after you release your fingers, the map abruptly pans to Africa. Similarly if you zoom out from Africa, then after you release your fingers the map pans westward and might get centered to USA… This is very easily seen in the test application, where the map is located on the right half of the screen. (If the map covers the whole window, the symptoms are not that severe, but still noticeable)

  2. If window is maximized (or back to floating window from maximized state), then you loose touch control totally. Panning doesn’t work or zooming doesn’t work. The touch functionality might come back after clicking elsewhere on the application a few times, but I don’t know what exactly triggers this…

The touch handling seems to be private feature in the MapView and I could not find easy way to override functionality.

Is there something you can do to make these use cases work?

BR, Rasmus

#10

Hi Ben,

I tried using mapView.IsManipulationEnabled = false; in the example application, but it doesn’t have any effect… Pinching still causes zoom to happen. Is there any other workaround?

BR, Rasmus

#11

Hi Rasmus,

Sorry this post is not tracked in the system for some reason. Not very sure if you are still interested but here we greatly enhanced the pinch issue in the newer version. Attached is a quick sample and here below is a video about it.
ThinkGeo Desktop V13 on Touch Screen (youtube.com)
WpfApp_TouchScreen.zip (3.5 KB)

Thanks,
Ben