Show popup on top of a map view

How-to Discussions
1

Hi I had some code working on 0.35 (i was stuck here as there was a problem with old mac processors) and now I have updated to 1.1 and there is a part of my code that stopped working as I expected:

I have a navigator where one of the pages contains a map view:

<Router ux:Name="router" />
<Navigator>
    
    <FirstPage ux:Template="cardPage" router="router" />
    <MapPage ux:Template="profilePage" router="router" />
    <SecondPage ux:Template="userPlacesPage" router="router" />
</Navigator>

Clicking on the map page i want to be able to navigate to the second page. On 0.35 that was working but now (on 1.1) once the map is shown it’s always shown on top of everything forever wherever I navigate.

to solve it on 0.35 i did the following trick (dunno if it was correct but it worked):

<DockPanel ux:Class="MapPage"> 
    <Router ux:Dependency="router" />
    <JavaScript File="map.js" />

    <Panel>
        <NativeViewHost ux:Name="NativeView">
            <MapView Latitude="{uxMapPageLat}" Longitude="{uxMapPageLng}" ShowMyLocation="true" Zoom="{uxMapPageZoom}" MarkerTapped="{uxMapOnMapMarkerTapped}" ShowMyLocationButton="true"> 
                <Each Items="{uxMapPageMapMarkers}">
                    <MapMarker Latitude="{lat}" Longitude="{lng}" Label="{name}"/> 
                </Each>
            </MapView>
        </NativeViewHost>
    </Panel>

    <WhileActive>
        <Change NativeView.RenderToTexture="false"/>
    </WhileActive>
    <WhileInactive>
        <Change NativeView.RenderToTexture="true"/>
    </WhileInactive>
</DockPanel>

so my question is: how should i do it on 1.1 ?

2 
<App>
	<ClientPanel>
		<Page ux:Class="PageWithTitle" ux:Name="self" HitTestMode="LocalBoundsAndChildren">
			<DockLayout />
			<float4 ux:Property="HeaderColor" />
			<float4 ux:Property="HeaderTextColor" />
			<string ux:Property="Instructions" />
			<StackPanel Dock="Top">
				<Panel Color="{Property self.HeaderColor}" Height="45">
					<Text Value="{Property self.Title}" FontSize="22"
						  Alignment="Center" TextColor="{Property self.HeaderTextColor}"/>
				</Panel>
			</StackPanel>
			<Panel Height="10%" Color="#0008" Alignment="Bottom">
				<WhileActive Invert="true" Threshold="0.4">
					<Move RelativeTo="Size" Y="1" Duration="0.4" Easing="CircularInOut"/>
				</WhileActive>
				<Text Value="{Property self.Instructions}" Margin="20" TextColor="#fff" Alignment="Center" />
			</Panel>
		</Page>

		<PageWithTitle Title="Logic with JavaScript" HeaderColor="#F68FD7" HeaderTextColor="#FFF" Color="#FFF" Instructions="Tap the screen to add items" >

			<Router ux:Name="router" BackButtonAction="None"/>
            <Navigator DefaultPath="pageOne">
                <Page1 ux:Template="pageOne" router="router"/>
                <Page2 ux:Template="pageTwo" router="router" >
                	<Transition To="pageThree"/>
                </Page2>
                <Page3 ux:Template="pageThree" router="router" />
            </Navigator>

            <Page ux:Class="Page1" HitTestMode="LocalBoundsAndChildren" Background="#fff">
            	<Router ux:Dependency="router" />
            	<JavaScript>
            		var Observable = require("FuseJS/Observable");

            		function goto2(){
            			router.push("pageTwo");
            		}

            		module.exports = {
            			goto2: goto2
            		}
				</JavaScript>

            	<StackPanel>
                	<Text Value="first page"/>
                	<Button Text="go to 2">
                		<Clicked>
                			<Callback Handler="{goto2}"/>
                		</Clicked>

                	</Button>
                	<Button Text="go back">
                		<Clicked>
                			<Callback Handler="{goback}"/>
                		</Clicked>

                	</Button>
            	</StackPanel>
            </Page>

            <Page ux:Class="Page2" HitTestMode="LocalBoundsAndChildren" Background="#fff">
            	<Router ux:Dependency="router" />
            	<JavaScript>
            		var Observable = require("FuseJS/Observable");

            		function goback(){
            			router.goBack();
            		}

            		function goto3(){
            			router.push("pageThree");
            		}

            		module.exports = {
            			goback: goback,
            			goto3: goto3
            		}
				</JavaScript>
				
				<WhileActive>
			    	<Change NativeView.RenderToTexture="false"/>
			    	<Change render.Value="false"/>
			    </WhileActive>
			    <WhileInactive>
			    	<Change NativeView.RenderToTexture="true"/>
			    	<Change render.Value="true"/>
			    </WhileInactive>

            	<DockPanel>
                	<Text Value="map page" Dock="Top"/>
                	<Text Value="" Dock="Top" ux:Name="render"/>
               		<Button Text="go to 3">
                		<Clicked>
                			<Callback Handler="{goto3}"/>
                		</Clicked>

                	</Button>
                	<Button Text="go back" Dock="Top">
                		<Clicked>
                			<Callback Handler="{goback}"/>
                		</Clicked>

                	</Button>
                	<Panel>
                	</Panel>
					<Panel Height="60%" Dock="Bottom">
				        <NativeViewHost ux:Name="NativeView">
				            <MapView ShowMyLocation="true" ShowMyLocationButton="true"> 
				                
				            </MapView>
				        </NativeViewHost>
				   	</Panel>	                	
            	</DockPanel>
            </Page>

            <Page ux:Class="Page3" HitTestMode="LocalBoundsAndChildren" Background="#f0f" Height="70%" Width="70%">
            	<Transition Direction="ToActive">
					<Scale Factor="0" Duration="0.6" Easing="BackIn"/>
				</Transition>

				<Transition Direction="ToInactive">
					<Move X="-1" RelativeTo="Size" Duration="0.6" Easing="BackIn"/>
				</Transition>

				<Transition Direction="ToFront"/>
				
				<Transition Direction="FromBack">
					<Move X="-1" RelativeTo="Size" Duration="0.6" Easing="BackIn"/>
				</Transition>

            	<Router ux:Dependency="router" />
            	<JavaScript>
            		var Observable = require("FuseJS/Observable");

            		function goback(){
            			router.goBack();
            		}

            		module.exports = {
            			goback: goback
            		}
				</JavaScript>

            	<StackPanel Background="#f0f">
                	<Text Value="pop up page"/>
                	<Button Text="go back">
                		<Clicked>
                			<Callback Handler="{goback}"/>
                		</Clicked>

                	</Button>
            	</StackPanel>
            </Page>

		</PageWithTitle>
	</ClientPanel>
</App>

Note:

if u remove the:

            <WhileActive>
                <Change NativeView.RenderToTexture="false"/>
                <Change render.Value="false"/>
            </WhileActive>
            <WhileInactive>
                <Change NativeView.RenderToTexture="true"/>
                <Change render.Value="true"/>
            </WhileInactive>

the popup is covered by the mapview but at least it hides when navigating back

3

Do you happen to be using an EdgeNavigator in your app? I’d identified an issue, and have a fix ready for 1.1, that address a problem with activity and EdgeNavigator.

4

No EdgeNavigator in my app.

Actually u have a full code in my reply to reproduce it.

thnx!

5

Is the render value is changing from true to false correctly for you? I’ve tested and it appears to work for me, but I haven’t tested the MapView aspect yet.

6

yes… it works the “true/false” but once the map is shown it’s always on top of the screen no matter if i navigate to page3 or back to page1 (both in Android/iOS)

7

still same problem with 1.1.1

8

Layer=Overlay on the panel :wink:

9

sorry… in wich panel?

10

still not working in 1.2.0 :frowning:

11

Hi, thank you for the research in this thread.

I also got the same trouble and tried the sample code written by zaulin above.
But, it still doesn’t work for me.
Does anyone find the solution? Or, Is there any minimum and perfect sample code (for MapView + Overlay popup) provided by Fuse team?(I already googled it, but I couldn’t reach.)

Note:

  • The “render” value mentioned by edA-qa mort-ora-y was changed correctly.

  • But the popup page was drawn under the nativeview host on iPhone preview. (On Fuse local preview, it worked well.)

  • I also read this part: “The only exception is when Fuse.Controls.NativeViewHost.RenderToTexture is enabled, which comes with its own set of limitations.” in your NativeViewHost document. But, still not get the exact meaning.

Development Env:

  • Fuse version: 1.2.1

  • Test Device: iPhone SE, iOS 11.0.2

  • Machine: MacbookAir Mid 2012, OS 10.13

Thank you in advance. Anyway, I like Fuse.

EDIT:

I somehow realized what I wanted by including the popup panel in the NativeViewHost of MapView.
This is just like a sample explained in the docs of NativeHostView:
https://www.fusetools.com/docs/fuse/controls/nativeviewhost

<Panel>
    <NativeViewHost>
        <Panel Alignment="Top" Padding="15" Color="#0006">
            <Text>This text is layered on top of the WebView</Text>
        </Panel>
        <WebView Url="http://example.com" />
    </NativeViewHost>
</Panel>