Binding MapMarker to items in PageControl

How-to Discussions
1

Given the following code, I’m trying without success to achieve the following two goals:

  1. when a MapMarker is tapped only the data of that marker is shown in the opened EdgeNavigator
  2. when a category tab is tapped the map should display only the markers relative to the tapped category
    <App>
        <JavaScript>
            
            var Observable  = require("FuseJS/Observable");
            var GeoLocation = require("FuseJS/GeoLocation");

            var data          = Observable();

            var json = {
                "events": [
                    {
                        category: "Music",
                        items: [
                            {"ID": "34", "latitude": "45.6471393", "longitude": "13.7762199"},
                            {"ID": "12", "latitude": "45.6477503", "longitude": "13.7656562"}
                        ]
                    },
                    {
                        category: "Theatre",
                        items: [
                            {"ID": "64", "latitude": "45.6526666", "longitude": "13.7838803"}
                        ]
                    },
                    {
                        category: "Shows",
                        items: [
                            {"ID": "87", "latitude": "45.6519166", "longitude": "13.7821208"},
                            {"ID": "56", "latitude": "45.6511967", "longitude": "13.7777434"},
                            {"ID": "99", "latitude": "45.6455902", "longitude": "13.7616651"}
                        ]
                    }
                ]
            };

            data.replaceAll(json.events);

            module.exports = {
                data:               data,
                onMarkerTapped:     onMarkerTapped
            };

            function onMarkerTapped(args) {
                console.log("Marker press: " + args.label);
                EdgeNavigator.open("Bottom");
            }

        </JavaScript>

        <NativeViewHost>
            <EdgeNavigator ux:Name="EdgeNavigator">
                
                <Sidebar ux:Name="menu" Edge="Bottom">
                    
                </Sidebar>

                <MapView Latitude="45.6471390" Longitude="13.7762199" Zoom="14" MarkerTapped="{onMarkerTapped}" ShowMyLocation="True" ShowMyLocationButton="True">    
                    <Each Items="{data.items}">
                        <MapMarker Latitude="{latitude}" Longitude="{longitude}" Label="{ID}" />
                    </Each>
                </MapView>

            </EdgeNavigator>
        </NativeViewHost>


        <!-- ====================================================================== -->
        <StackPanel ux:Class="Sidebar" Background="#37474F">
            <DockPanel Dock="Top">
                        
                <ScrollView AllowedScrollDirections="Horizontal">
                    <PageIndicator Navigation="slides" Orientation="Horizontal" Margin="6,6,6,6">
                        <StackPanel Dock="Top" ux:Template="Dot" Width="100" Height="200">
                            <Rectangle Height="40">
                                <SolidColor Color="#FFFFFF" />
                                <Text TextAlignment="Center" Alignment="Center" Value="{Page Title}" TextWrapping="Wrap" Color="#000000"/>
                                <Clicked>
                                    <NavigateTo Target="{Page Visual}"/>
                                </Clicked>
                            </Rectangle>
                        </StackPanel>
                    </PageIndicator>
                </ScrollView>
     
                <PageControl ux:Name="slides">
                    <Each Items="{data}">
                        <MyPage Title="{category}" />
                    </Each>
                </PageControl>

            </DockPanel>
        </StackPanel>

        <!-- ====================================================================== -->
        <Page ux:Class="MyPage">
            <ScrollView Margin="0,50,0,0">
                <StackPanel ItemSpacing="6" >
                    <Each Items="{items}">
                        <Text Value="{ID}" Color="#FFFFFF"/>
                    </Each>
                </StackPanel>
            </ScrollView>
        </Page>
    </App>
2

Thanks for posting a complete, minimal reproduction. Pleasure to work with!

Okay, let’s break it down.

  1. You will want to use MapMarker.Tapped event instead of the one on MapView, because the former feeds the whole data context of the marker in args.
  2. Then, when you receive the marker data in that callback, you can assign the data to an Observable or do something else to display information about that selected marker. How you do it in both JS and UX code is totally up to you.
  3. For tracking the selected category, you need to implement a bit more logic. We can just use the ActiveIndex property of that PageControl of yours, and create a derived observable that filters the items from data observable, based on the currently selected page.

Here’s some code to illustrate the three points:

<App>
    <JavaScript>
        
        var Observable  = require("FuseJS/Observable");
        var GeoLocation = require("FuseJS/GeoLocation");

        var data          = Observable();

        var json = {
            "events": [
                {
                    category: "Music",
                    items: [
                        {"ID": "34", "latitude": "45.6471393", "longitude": "13.7762199"},
                        {"ID": "12", "latitude": "45.6477503", "longitude": "13.7656562"}
                    ]
                },
                {
                    category: "Theatre",
                    items: [
                        {"ID": "64", "latitude": "45.6526666", "longitude": "13.7838803"}
                    ]
                },
                {
                    category: "Shows",
                    items: [
                        {"ID": "87", "latitude": "45.6519166", "longitude": "13.7821208"},
                        {"ID": "56", "latitude": "45.6511967", "longitude": "13.7777434"},
                        {"ID": "99", "latitude": "45.6455902", "longitude": "13.7616651"}
                    ]
                }
            ]
        };

        data.replaceAll(json.events);

        var selectedMarker = Observable();

        function onMarkerTapped(args) {
            console.log("Marker press: " + JSON.stringify(args.data));
            selectedMarker.value= args.data;
            EdgeNavigator.open("Bottom");
        }

        var activeIndex = Observable(0);
        var filteredMarkers = activeIndex.flatMap(function(x) {
        	return data.getAt(x);
        });

        module.exports = {
            data:               data,
            filteredMarkers:    filteredMarkers,
            onMarkerTapped:     onMarkerTapped,
            activeIndex:        activeIndex
        };

    </JavaScript>

    <NativeViewHost>
        <EdgeNavigator ux:Name="EdgeNavigator">
            
            <Sidebar ux:Name="menu" Edge="Bottom">
                
            </Sidebar>

            <MapView Latitude="45.6471390" Longitude="13.7762199" Zoom="14" ShowMyLocation="True" ShowMyLocationButton="True">    
                <Each Items="{filteredMarkers.items}">
                    <MapMarker Latitude="{latitude}" Longitude="{longitude}" Label="{ID}" Tapped="{onMarkerTapped}" />
                </Each>
            </MapView>

        </EdgeNavigator>
    </NativeViewHost>


    <!-- ====================================================================== -->
    <StackPanel ux:Class="Sidebar" Background="#37474F">
        <DockPanel Dock="Top">
                    
            <ScrollView AllowedScrollDirections="Horizontal">
                <PageIndicator Navigation="slides" Orientation="Horizontal" Margin="6,6,6,6">
                    <StackPanel Dock="Top" ux:Template="Dot" Width="100" Height="200">
                        <Rectangle Height="40">
                            <SolidColor Color="#FFFFFF" />
                            <Text TextAlignment="Center" Alignment="Center" Value="{Page Title}" TextWrapping="Wrap" Color="#000000"/>
                            <Clicked>
                                <NavigateTo Target="{Page Visual}"/>
                            </Clicked>
                        </Rectangle>
                    </StackPanel>
                </PageIndicator>
            </ScrollView>
 
            <PageControl ux:Name="slides" ActiveIndex="{activeIndex}">
                <Each Items="{data}">
                    <MyPage Title="{category}" />
                </Each>
            </PageControl>

        </DockPanel>
    </StackPanel>

    <!-- ====================================================================== -->
    <Page ux:Class="MyPage">
        <ScrollView Margin="0,50,0,0">
            <StackPanel ItemSpacing="6" >
                <Each Items="{items}">
                    <Text Value="{ID}" Color="#FFFFFF"/>
                </Each>
            </StackPanel>
        </ScrollView>
    </Page>
</App>