# Show panel on top of map in Android bug

**URL:** <https://forums.fusetools.com/t/show-panel-on-top-of-map-in-android-bug/4802>\
**Category:** Bug Reports\
**Created:** [April 15, 2018, 1:46pm UTC](https://forums.fusetools.com/t/show-panel-on-top-of-map-in-android-bug/4802 "2018-04-15T13:46:55Z")\
**Posts on this page:** 1\
**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:** [April 15, 2018, 1:46pm UTC](https://forums.fusetools.com/t/show-panel-on-top-of-map-in-android-bug/4802/1 "2018-04-15T13:46:55Z")

</div>

Hi

I have several problems when displaying a panel on top of a map in Android (working ok in iOS + local)

I guess it’s something related to the GraphicsView as when i remove it more or less it works 🙂

here you have a sample minimal code that is not working (i have other samples where the map freezes when the popup is shown)

code:

```
   <App>
	<JavaScript>

		var Observable = require("FuseJS/Observable");

		var uxMapPageMapMarkers = Observable();
		var uxMapPageLat = Observable(40.9908991);
		var uxMapPageLng = Observable(0.9236690999999837);
		var uxMapPageZoom = Observable(12);
		var inPanelVisibility = Observable();

		var itemList = Observable();

		mapMarkers = new Array();

		mapMarkers.push({
			name: "my place",
			lat: 40.9908991,
			lng: 0.9236690999999837
		});

		uxMapPageMapMarkers.replaceAll(mapMarkers);

		function myFunction() {
			inPanelVisibility.value = "Visible";

			itemList.clear();
			itemList.add(new CustomSquare());
		}

		function uxMapOnMapMarkerTapped(args) {
			inPanelVisibility.value = "Visible";
		}

		function CustomSquare() {
			this.value = 1
		}

		module.exports = {

    		uxMapPageMapMarkers: uxMapPageMapMarkers,
    		uxMapOnMapMarkerTapped: uxMapOnMapMarkerTapped,

    		uxMapPageZoom: uxMapPageZoom,

    		uxMapPageLat: uxMapPageLat,
    		uxMapPageLng: uxMapPageLng,
    		inPanelVisibility: inPanelVisibility,

    		myFunction: myFunction,

			itemList: itemList
		}

	</JavaScript>

	<Panel>

		<DockPanel>

			<Panel Dock="Top" Background="#ff0000" Height="80" HitTestMode="LocalVisualAndChildren">
				<Clicked>
					<Callback Handler="{myFunction}"/>
				</Clicked>

			</Panel>

			<Panel Background="#00ff00">
				<NativeViewHost ux:Name="NativeView">
					
					<Panel ux:Name="inPanel" Visibility="Collapsed">
                		<GraphicsView>
							<Panel Background="#00ff00" Height="300" HitTestMode="LocalVisualAndChildren" Alignment="VerticalCenter">

								<!--Each Items="{itemList}">
									<CustomSquare/>
								</Each-->

								<Clicked>
									<Set inPanel.Visibility="Collapsed"/>
								</Clicked>
							</Panel>
							<DataBinding Target="inPanel.Visibility" Key="inPanelVisibility" />

						
						</GraphicsView>
					</Panel>

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

		</DockPanel>

		<Panel ux:Class="CustomSquare" Height="50%" Background="#0000ff">
		</Panel>

	</Panel>
</App>

```

Fuse version: 1.8.1  
Mac OS  
Android (both 6.0.1. and 7.0)