# Show popup on top of a map view

**URL:** <https://forums.fusetools.com/t/show-popup-on-top-of-a-map-view/716>\
**Category:** How-to Discussions\
**Created:** [July 13, 2017, 9:21pm UTC](https://forums.fusetools.com/t/show-popup-on-top-of-a-map-view/716 "2017-07-13T21:21:51Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![zaulin](https://avatars.discourse-cdn.com/v4/letter/z/d26b3c/32.png) [@zaulin](https://forums.fusetools.com/u/zaulin)\
**Post date:** [July 13, 2017, 9:21pm UTC](https://forums.fusetools.com/t/show-popup-on-top-of-a-map-view/716/1 "2017-07-13T21:21:51Z")

</div>

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 ?

---

<div class="post-metadata">

**Author:** ![zaulin](https://avatars.discourse-cdn.com/v4/letter/z/d26b3c/32.png) [@zaulin](https://forums.fusetools.com/u/zaulin)\
**Post date:** [July 16, 2017, 12:38pm UTC](https://forums.fusetools.com/t/show-popup-on-top-of-a-map-view/716/2 "2017-07-16T12:38:58Z")

</div>

```
<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

---

<div class="post-metadata">

**Author:** ![edA-qa\_mort-ora-y](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/eda-qa_mort-ora-y/32/124_2.png) [@edA-qa\_mort-ora-y](https://forums.fusetools.com/u/edA-qa_mort-ora-y)\
**Post date:** [July 17, 2017, 8:56am UTC](https://forums.fusetools.com/t/show-popup-on-top-of-a-map-view/716/3 "2017-07-17T08:56:33Z")

</div>

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`.

---

<div class="post-metadata">

**Author:** ![zaulin](https://avatars.discourse-cdn.com/v4/letter/z/d26b3c/32.png) [@zaulin](https://forums.fusetools.com/u/zaulin)\
**Post date:** [July 17, 2017, 10:17am UTC](https://forums.fusetools.com/t/show-popup-on-top-of-a-map-view/716/4 "2017-07-17T10:17:50Z")

</div>

No EdgeNavigator in my app.

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

thnx!

---

<div class="post-metadata">

**Author:** ![edA-qa\_mort-ora-y](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/eda-qa_mort-ora-y/32/124_2.png) [@edA-qa\_mort-ora-y](https://forums.fusetools.com/u/edA-qa_mort-ora-y)\
**Post date:** [July 17, 2017, 11:24am UTC](https://forums.fusetools.com/t/show-popup-on-top-of-a-map-view/716/5 "2017-07-17T11:24:24Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![zaulin](https://avatars.discourse-cdn.com/v4/letter/z/d26b3c/32.png) [@zaulin](https://forums.fusetools.com/u/zaulin)\
**Post date:** [July 17, 2017, 2:39pm UTC](https://forums.fusetools.com/t/show-popup-on-top-of-a-map-view/716/6 "2017-07-17T14:39:13Z")

</div>

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)

---

<div class="post-metadata">

**Author:** ![zaulin](https://avatars.discourse-cdn.com/v4/letter/z/d26b3c/32.png) [@zaulin](https://forums.fusetools.com/u/zaulin)\
**Post date:** [July 25, 2017, 3:19pm UTC](https://forums.fusetools.com/t/show-popup-on-top-of-a-map-view/716/7 "2017-07-25T15:19:09Z")

</div>

still same problem with 1.1.1

---

<div class="post-metadata">

**Author:** ![John](https://avatars.discourse-cdn.com/v4/letter/j/a3d4f5/32.png) [@John](https://forums.fusetools.com/u/John)\
**Post date:** [July 26, 2017, 11:16am UTC](https://forums.fusetools.com/t/show-popup-on-top-of-a-map-view/716/8 "2017-07-26T11:16:55Z")

</div>

Layer=Overlay on the panel 😉

---

<div class="post-metadata">

**Author:** ![zaulin](https://avatars.discourse-cdn.com/v4/letter/z/d26b3c/32.png) [@zaulin](https://forums.fusetools.com/u/zaulin)\
**Post date:** [July 26, 2017, 8:27pm UTC](https://forums.fusetools.com/t/show-popup-on-top-of-a-map-view/716/9 "2017-07-26T20:27:46Z")

</div>

sorry… in wich panel?

---

<div class="post-metadata">

**Author:** ![zaulin](https://avatars.discourse-cdn.com/v4/letter/z/d26b3c/32.png) [@zaulin](https://forums.fusetools.com/u/zaulin)\
**Post date:** [August 14, 2017, 8:47pm UTC](https://forums.fusetools.com/t/show-popup-on-top-of-a-map-view/716/10 "2017-08-14T20:47:43Z")

</div>

still not working in 1.2.0 ☹

---

<div class="post-metadata">

**Author:** ![naosk8](https://avatars.discourse-cdn.com/v4/letter/n/919ad9/32.png) [@naosk8](https://forums.fusetools.com/u/naosk8)\
**Post date:** [October 14, 2017, 4:43pm UTC](https://forums.fusetools.com/t/show-popup-on-top-of-a-map-view/716/11 "2017-10-14T16:43:19Z")

</div>

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](https://www.fusetools.com/docs/fuse/controls/nativeviewhost)

```auto
<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>

```