locked
Flyout dismiss issue with bing map in HTML/JS RRS feed

  • Question

  • Im added bing map in to flyout. Once click on the map flyout always dismiss. Any solution for this. previous threads are not work for me.

    <body>   
        <button id="demoFloyoutButton" class="action">
       Show Demo Flyout</button>   
          <div id="demoFlyout" data-win-control="WinJS.UI.Flyout">      
           <div id="testmap"></div>  
       </div>
    </body>   

    Page.html

      app.onactivated = function (args) {
            if (args.detail.kind === activation.ActivationKind.launch) {
                if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                } else {
                }
                args.setPromise(WinJS.UI.processAll().then(function () {
                    Microsoft.Maps.loadModule('Microsoft.Maps.Map', { callback: initMap });
                }))
                args.setPromise(WinJS.UI.processAll());
                initializeSettings();
            }
    
        };
     
    
        function initializeSettings() {
            // Initialize all settings flyouts and WinJS controls.
            WinJS.UI.processAll();
    
            // Populate settings pane and tie commands to settings flyouts.
            WinJS.Application.onsettings = function (e) {
                e.detail.applicationcommands = {
                    "defaultsDiv": { href: "DefaultsUI.html", title: "Defaults" },
                    "helpDiv": { href: "HelpUI.html", title: "Help" }
                };
                WinJS.UI.SettingsFlyout.populateSettings(e);
            }
    
    
            WinJS.Application.start();
        }
    
        (function () {
            "use strict";
            var page = WinJS.UI.Pages.define("default.html", {
                ready: function (element, options) {
                    document.getElementById("demoFloyoutButton").addEventListener("click", showDemoFlyout, false);
                }
            });
    
            // Show the flyout
            function showDemoFlyout() {
                var formatTextButton = document.getElementById("demoFloyoutButton");
                document.getElementById("demoFlyout").winControl.show(formatTextButton);
            }
        })();
    
        //var map = null;
        function initMap() {
            //var md = new Windows.UI.Popups.MessageDialog("in Map");
            //md.showAsync();
            try {
                var mapOptions =
                {
                    credentials: " 	Ai5r7K1Jy95BfrDbOV9PPvoBqYicNNe3Bapi7PczGda-l30CjbpHeLnK8XQmYcKl",
                    center: new Microsoft.Maps.Location(7, 80),
                    mapTypeId: Microsoft.Maps.MapTypeId.road,
                    zoom: 7,
                };
                var mapDiv = document.querySelector("#testmap");
                map = new Microsoft.Maps.Map(mapDiv, mapOptions);
                setLoc(7,80,12, 300,500);            
            }
            catch (e) {
                var md = new Windows.UI.Popups.MessageDialog(e.message);
                md.showAsync();
            }
        }
    
    
        //add pushpin and center, zoom map//////////////
        function addPushPin(location) {
            map.entities.clear();
            var pushpin = new Microsoft.Maps.Pushpin(location, null);
            map.entities.push(pushpin);
        }
    
        function setLoc(la, lo, zoom, w, h) {
            var geolocator = new Windows.Devices.Geolocation.Geolocator();
    
            var elem = document.getElementById("testmap");//use map div id as testmap
            elem.style.width = w + "px";
            elem.style.height = h + "px";
    
            geolocator.getGeopositionAsync().then(function (loc) {
                var mapCenter = map.getCenter();
                mapCenter.latitude = la;
                mapCenter.longitude = lo;
                map.setView({ center: mapCenter, zoom: zoom });
                addPushPin(mapCenter);
            });
        }

    Tuesday, May 14, 2013 6:19 AM

Answers

  • You probably don't want to put your map on a flyout if you intend the user to interact with it significantly. Per the  Guidelines and checklist for Flyouts:
    If an experience is one that requires prolonged interaction, multiple screens, or lots of UI, then you should integrate the UI into the canvas of the app.

    See Laying out your UI for other suggestions for different scenarios.

    Is the behavior you see unique to using the map control? If so, I'd check in the Bing Maps for Windows Store apps forum to see if this is a known scenario. Flyouts are designed to dismiss when the user clicks off of them, and it looks like the map uses an overlay div that isn't part of the flyout. This means that clicking on the map is not clicking on the Flyout and so dismisses the flyout. Jeff posted a solution in this thread.

    --Rob

    Tuesday, May 14, 2013 5:46 PM
    Moderator

All replies

  • You may want to post this in Building Windows Store apps with HTML5/JavaScript(http://social.msdn.microsoft.com/Forums/en-US/winappswithhtml5/threads)

    Thanks,
    Sachin
    My Samples | Personal Website


    • Edited by Sachin S Tuesday, May 14, 2013 2:40 PM
    Tuesday, May 14, 2013 2:39 PM
  • you might want to post this on the other tread for Windows Store Apps with JavaScript and html, probably you will find more qualified people there. 

    Maybe @Matt can help you move it there...


    Can Bilgin
    Blog Samples CompuSight

    Tuesday, May 14, 2013 2:40 PM
  • You probably don't want to put your map on a flyout if you intend the user to interact with it significantly. Per the  Guidelines and checklist for Flyouts:
    If an experience is one that requires prolonged interaction, multiple screens, or lots of UI, then you should integrate the UI into the canvas of the app.

    See Laying out your UI for other suggestions for different scenarios.

    Is the behavior you see unique to using the map control? If so, I'd check in the Bing Maps for Windows Store apps forum to see if this is a known scenario. Flyouts are designed to dismiss when the user clicks off of them, and it looks like the map uses an overlay div that isn't part of the flyout. This means that clicking on the map is not clicking on the Flyout and so dismisses the flyout. Jeff posted a solution in this thread.

    --Rob

    Tuesday, May 14, 2013 5:46 PM
    Moderator