ThinkGeo.com    |     Documentation    |     Premium Support

Smoother map zooming

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

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

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

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

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

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

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

Hi Rasmus,

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

Thanks,
Ben