MapMarker

How-to Discussions
1

By using ‘MapView’ and ‘MapMarker’,

I created the source below in order to display the user-selected marker and generic markers.

<JavaScript>
..
let selectedMarker = Observable();
...
function markerTapped(event) {

    if (selectedMarker.value) {
        selectedMarker.value.selected.value = false;
    }

    event.data.selected.value = true;
    selectedMarker.value = event.data;
}
...
</JavaScript>

...

<NativeViewHost>
<MapView
    ux:Name="myMap"
    Latitude="{myLat}"
    Longitude="{myLng}"
    Zoom="{mapZoom}"
    ShowMyLocation="true"
    ShowMyLocationButton="true"
    AllowTilt="false"
    AllowRotate="false">

    <Each Items="{markerList}">

        <WhileTrue Value="{selected}" Invert="true">
            <MapMarker
                Latitude="{lat}" Longitude="{lng}" Label="{name}" IconFile="assets/icons/marker.png"
                Tapped="{markerTapped}"/>
        </WhileTrue>
        <WhileTrue Value="{selected}">
            <MapMarker
                Latitude="{lat}" Longitude="{lng}" Label="{name}" IconFile="assets/icons/marker_on.png"
                Tapped="{markerTapped}"/>
        </WhileTrue>

    </Each>
</MapView>
</NativeViewHost>
...

However, there is a problem.

The shape of the ‘user-selected marker’ is changed, but a sorting problem has occurred.

What I want is, an ‘user-selected marker’ to be visible above other markers.

However, when several markers overlap, the ‘user-selected markers’ are often displayed below the normal markers.

<WhileTrue Value="{selected}">
    <MapMarker
        Latitude="{lat}" Longitude="{lng}" Label="{name}" IconFile="assets/icons/marker_on.png"
        Tapped="{markerTapped}"/>
</WhileTrue>

Is there a way to get the desired MapMarker to the top of other markers?

2

Could you please provide a complete, minimal reproduction that we could copy-paste and run to see the issue ourselves? Otherwise it’s just blind debugging.

In particular, I’m lacking the full JavaScript code, and the icons you toggle. Think of the reproduction as a single-UX-file-app.

If it was me, I’d perhaps only put some modifiers (like a Change) in the WhileTrue, instead of having instances of MapMarker being added and removed to the layout as that boolean value changes.