# Binding MapMarker to items in PageControl

**URL:** <https://forums.fusetools.com/t/binding-mapmarker-to-items-in-pagecontrol/6023>\
**Category:** How-to Discussions\
**Created:** [January 4, 2018, 11:20am UTC](https://forums.fusetools.com/t/binding-mapmarker-to-items-in-pagecontrol/6023 "2018-01-04T11:20:48Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Enrico](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/enrico/32/144_2.png) [@Enrico](https://forums.fusetools.com/u/Enrico)\
**Post date:** [January 4, 2018, 11:20am UTC](https://forums.fusetools.com/t/binding-mapmarker-to-items-in-pagecontrol/6023/1 "2018-01-04T11:20:48Z")

</div>

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

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

```

---

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [January 4, 2018, 12:20pm UTC](https://forums.fusetools.com/t/binding-mapmarker-to-items-in-pagecontrol/6023/2 "2018-01-04T12:20:03Z")

</div>

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](https://www.fusetools.com/docs/fuse/controls/mapmarker#section-table-of-contents) 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:

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

```