none
Zoom questions and map drawing

    Question

  • We have a crop and field scouting app for agriculture. We've recently added the ability for our customers to add field shapes. However, our customers are frustrated for a couple of reasons:

    • Zooming in and out is very frustrating. This is because you can pinch/zoom on a touch device and the map looks like it will respect your choice of zoom level, but as soon as you let up, it zooms an entirely different level. 
    • Inconsistent zoom levels for devices. We've noticed that on some devices the max zoom is 25ft resolution (12 in iPad Pro), 50 ft resolution and others it is 100 ft. I think our customers would like it to be 25 ft. 
    • When editing a shape, the handles are too small for touch.
    • When creating a polygon, again not very touch friendly since it depends on hover to show the proposed line.

    Here is what I would like to see happen:

    1. Size of handles for editing a shape are configurable by the developer. Might be nice to have a "touch" size and the visible size as separate properties. 
    2. Show a point for first touch of a polygon, just like the points when editing a shape. 
    3. Make the maximum zoom level defined by the developer. Then we can control if the device should show 25 ft or whatever. At extreme zoom levels, just scale the last tile you displayed. We need this because when people are dropping points they will need more precision than the map has. This is fine, they will understand. 
    4. Allow developer defined zoom increments. Again, scale the images if needed. 

    Thanks,

    Brian 

    Thursday, April 25, 2019 8:08 PM

All replies

  • Hi Brian,

    Can you give us an idea of what environment you are in?  We don't have control over browser scenarios so you may need to play with the OS settings for mouse or touch sensitivity but I am only guessing as you have not given me exact repro steps and environment details.

    Sincerely,

    IoTGirl

    Friday, April 26, 2019 7:54 PM
    Owner
  • Related to the max zoom, here are some specifics we are seeing:

    • iPhoneX: 100 ft
    • iPad Pro 12", Chrome Desktop, Safari Desktop: 25 ft

    The pinch zoom is a bit more nuanced. To repro, pull up a page with the Bing Maps Control on an iPad. Make sure that you're not zoomed to max. Now pinch in just a little, but don't let go. You should see the map zoom in. Now, let go. The map will now jump to way further than the user had pinched to, which is probably the next zoom level of images. However, native apps such as Google will let you drop at the in-between points. 


    Monday, April 29, 2019 9:02 PM
  • Hi Brian,

    iPhonex with a website? App? How is the map being displayed?  Note that again, the map is responding to the directives it is being given through the hosting ui.  What browser etc would also be relevant for example.

    Sinbcerely,

    IoTGirl

    Tuesday, April 30, 2019 8:15 PM
    Owner
  • Can you explain the directives you are referring to? 

    A bit more background on our implementation. We are using the BingMaps V8 Web Control in our single page web. We also use this control in a Cordova mobile application. We implement the control just like the samples. Removing the Cordova mobile application from the mix, the Bing Maps control behaves the same on our main application when shown on an iPhoneX vs a desktop. Namely the max zoom level is considerably different when running the same application between an iPhone X and a desktop browser and iPad. This is frustrating because our users need the same max zoom level regardless of device. 

    Our code to initialize the Bing map is:

    this.map = new Microsoft.Maps.Map(this.mapCanvas, {
    credentials: this._mapService.apiKey,
    disableBirdseye: true,
    disableStreetside: true,
    enableClickableLogo: false,
    showDashboard: false,
    showLocateMeButton: false,
    showMapTypeSelector: false,
    showTrafficButton: false,
    navigationBarMode: 'minified',
    mapTypeId: baselayerId,
    center: { latitude: centerLat, longitude: centerLng },
    zoom: zoom,
    });

    I can repro this behavior when browsing to the samples. https://bingmapsv8samples.azurewebsites.net/#GeoJson%20Shape%20Events Again, the iPhone X (and probably the other phones) have a max zoom level of 100 ft while the desktop browsers have a max zoom of 25 ft. We need this to be consistent across all of the platforms we run on. 

    Thanks, Brian



    Wednesday, May 1, 2019 4:18 PM
  • Hi Brian,

    Thanks for the further detail.  In any environment the control gets it's directives from the host, in this case the apple browser?  Trying other samples like say https://www.bing.com/api/maps/sdk/mapcontrol/isdk/mapviewevents to see what events might be failing to get through?  As we are a competing platform to the built in maps there might be some limits imposed that are outside of our control.

    Note: Does FarmQA have a direct contact at Microsoft?  Can you reach out to us directly?  Will you be at Build?

    Sincerely,

    IoTGirl


    Wednesday, May 1, 2019 5:37 PM
    Owner
  • What directives directives would the control get from the host? My assumption is that the Bing Maps control is a <canvas> object, so any drawing is done entirely inside of the <canvas> and the host would not interfere with the max zoom. For example, the Azure Maps demos zoom (https://azuremapscodesamples.azurewebsites.net/Controls/Map%20Style%20Picker.html) is really deep and consistent on all platforms.

    I also notice that the pinch to zoom gesture is implemented well on Azure Maps.

    Thursday, May 2, 2019 1:13 PM
  • Hi Brian,

    The Bing Maps WEB control is optimized for HTML 5 and would get the pan and zoom from the browser that hosts the control.  I will get the team to take a look and see why there is a difference between the two experiences.

    For styling, you can take a look at https://bingmapsv8samples.azurewebsites.net/#New%20Map%20Styleshttps://blogs.bing.com/maps/2019-02/add-custom-styling-and-sparkle-with-map-style-sheet-editor

    UPDATE:  the key difference is vector versus raster.  The Azure Maps control uses a vector based image rather than a raster tile.  Each have their pluses and minuses but what you are seeing is the ability for a vector to use intermediate zooms while a raster tile only has the tile zoom levels available.  

    You can take a look at the first few articles in this search result to find out more https://www.bing.com/search?q=bing+maps+tile+system

    and, suspenseful foreshadowing aside, we do have some new features that will be announced at Build on May 6th that might interest you.

    Sincerely,

    IoTGirl





    Friday, May 3, 2019 4:18 PM
    Owner