Getting Click events from element on top of map view

Bug Reports
1

If I put an element on top of my MapView it shows just fine. However, any Click events are not recorded and are seemingly sent to the MapView instead. This is what I have:

        <NativeViewHost >
            <Panel>
                <ff.CompanyTeaser Height="0" ux:Name="companyPanel" CompanyName="{selectedCompanyInfo.name}" LastVisit="{selectedCompanyInfo.visitReadable}" Clicked="{doStuff}">
                </ff.CompanyTeaser>

                <MapView ux:Name="map" ShowMyLocation="True" ShowMyLocationButton="True" MarkerTapped="{onMarkerTapped}">

                    <Each Items="{companies.companies}">
                        <MapMarker Latitude="{lat}" Longitude="{long}" Label="{name}" IconFile="{pin}" />
                    </Each>
                </MapView>
            </Panel>
        </NativeViewHost>

My JS-file:

function doStuff() {
    console.log('Hei!');
}

module.exports = {
    doStuff: doStuff
}
2

It’s the ff.CompanyTeaser component that has the Clicked event.

3

Hi!

Its hard to tell what’s wrong without a more complete test case. A common problem is that elements are transparent. Try adding a HitTestMode="LocalBounds".

4

Sorry for prividing an incomplete version. Please find a complete one below. When I click on the white rectangle with the map under it, nothing happens. If I comment out the -bit, it logs “Clicked” as it should. The MapView somehow “steals” the click event from my rectangle. HitTestMode did not work, unfortuantely.

MainView.ux

<App>
    <NativeViewHost >
        <Panel>
            <Rectangle Alignment="Bottom" Background="White" HitTestMode="LocalBounds" Clicked="{log}" Height="500" />

            <MapView ShowMyLocation="True" ShowMyLocationButton="True">
            </MapView>
        </Panel>
    </NativeViewHost>

    <JavaScript>
        function log() {
            console.log('Clicked');
        }

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

</App>

maptest.unoproj:

{
  "RootNamespace":"",
  "Packages": [
  	"Fuse",
  	"FuseJS",
    "Fuse.Maps"
  ],
  "Includes": [
    "*"
  ],
  "Android": {
    "Geo": {
      "ApiKey": "<I don't think I am allowed to include this>"
    }
  },

}
5

It should be “MapView-bit”. The word “MapView” disappeared in my reply.

6

This is on an android phone in preview mode.

7

I have the same Problem when using a WebView:

<App>
	<JavaScript>
		function elementClicked() {
			console.log("Element pressed.");
		}

		module.exports = {
			elementClicked,
		};
	</JavaScript>
	<DockPanel>
		<StatusBarBackground Dock="Top" Background="#000000" />
		<NativeViewHost>
			<Panel ux:Name="otherPanel" Color="#0008" Visibility="Visible">
				<Panel Width="100" Height="100" Color="#4649ac" Alignment="TopLeft" Clicked="{elementClicked}" HitTestMode="LocalBounds" />
			</Panel>
			<WebView Url="https://www.fusetools.com" />
		</NativeViewHost>
		<BottomBarBackground Dock="Bottom" />
	</DockPanel>
</App>

The WebView “steals” the click event from the Panel above it. This also happens when I use a MapView instead of the WebView.

8

Hi there!
In the case of MapView the above should work on iOS, whereas Androids mapview for some reason is more greedy and steals all our clicks.
I’m not sure what the case is for WebView on Android vs. iOS though.

We’ll look into fixing this properly in the future but in the meantime, here’s a workaround

<App>
    <ClientPanel>
        <JavaScript>
            var clikcnt = 0;
            function clik(args){
                console.log("you clicked me! " + clikcnt);
                clikcnt += 1;
            }
            module.exports = {clik}
        </JavaScript>
        <NativeViewHost>
            <Button Alignment="Center" Clicked="{clik}" Width="100" Height="100" Color="#f000">
                <Clicked>
                    <Rotate Target="Visual" Degrees="360" Duration="0.2"/>
                </Clicked>
                <WhilePressed>
                    <Scale Factor="2" Duration="0.2" Delay="0.2"/>
                </WhilePressed>
                <Panel ux:Name="Visual">
                    <Text Value="Foo!" Alignment="Center" TextColor="#fff" FontSize="20"/>
                    <Circle Color="Green"/>
                </Panel>
            </Button>
            <MapView/>
        </NativeViewHost>
    </ClientPanel>
</App>

The trick here is that the Android native button still gets priority on top of the MapView, even if stuff like native rectangles and circles don’t.

So we simply do an invisible button and fill it with our custom visuals. :slight_smile:

It’s a bit hackish now but hopefully an acceptable workaround. It’s of course possible to use this to build a slightly more structured custom button class.

9

Hi Remi,

thanks for your fast reply.

Your workaround works wonderfully. I’ll use it for now :slight_smile:

Just for the record: I’m testing on Android where both WebView and MapView steal the clicks.

10

I also noticed (possibly related) that the Clicked, Tapped, Pressed events don’t work on the MapView. E.g.

<MapView Latitude="53.549269" Longitude="9.989252" Zoom="10" MarkerTapped="{onMarkerTapped}" ShowMyLocation="true" ShowMyLocationButton="true" Clicked="{onMapClicked}">

Doesn’t trigger onMapClicked.

11

I also came across this bug. After several hours of investigation I found the solution in this post.
I performed the workaround and it works but I wanted to know if there were any news about it.

The thing that I recommend doing is to report the bug on the documentation of the mapView otherwise you lose unnecessary hours to figure out what’s wrong.

Thank you
Giuseppe

12

We have the same issue too. We have a Map and a GraphicsView inside NativeViewHost (on top of the map). And graphics view do not receive tap/click events. We have to wrap everything in buttons. Not clean.