Problem databinding markers to Each on MapView

Bug Reports
1

Fuse 0.11.0.6138, preview on iOS and Android. Was broken somewhere between 0.10 and 0.11. @sunjammer says it’s related to the Each implementation.

Consider the following UX:

<App Theme="Basic" Background="#333333ff">

    <JavaScript>
    var Observable = require("FuseJS/Observable");
    var markers = Observable();
    generate_markers();

    function Marker(latitude, longitude, label) {
        this.latitude = latitude;
        this.longitude = longitude;
        this.label = label;
    };

    function generate_markers() {
        for (var i = 0; i < 3; i++) {
            var lat = Math.floor((Math.random() * 60) + 1);
            var lng = Math.floor((Math.random() * 90) + 1);
            var name = "test marker at " + lat + " / " + lng;
            var marker = new Marker(lat, lng, name);
            markers.add(marker);
        }
        console.log("The markers are now: " + JSON.stringify(markers));
    };

    function marker_click(args) {
        console.log('Marker tapped: ' + JSON.stringify(args.label));
    };

    module.exports = {
        markers: markers,
        marker_click: marker_click,
        generate_markers: generate_markers
    };
    </JavaScript>

    <ClientPanel>
        <Panel Alignment="TopCenter">
            <Button Text="Generate markers">
                <Clicked Handler="{generate_markers}" />
            </Button>
        </Panel>
        <NativeViewHost Margin="0,60,0,0">
            <MapView Latitude="56.9489" Longitude="24.1064" Zoom="20000000" Style="Hybrid" MarkerTapped="{marker_click}">
                <Each Items="{markers}">
                    <MapMarker Latitude="{latitude}" Longitude="{longitude}" Label="{label}" />
                </Each>
            </MapView>
        </NativeViewHost>

    </ClientPanel>
</App>

and .unoproj:

{
  "RootNamespace":"",
  "Packages": [
        "Fuse.Animations",
        "Fuse.BasicTheme",
        "Fuse.Themes",
        "Fuse.Controls",
        "Fuse.Designer",
        "Fuse.Drawing",
        "Fuse.Drawing.Primitives",
        "Fuse.Effects",
        "Fuse.Elements",
        "Fuse.Entities",
        "Fuse.Gestures",
        "Fuse.Maps",
        "Fuse.Navigation",
        "Fuse.Shapes",
        "Fuse.Triggers",
        "Fuse.Reactive",
        "Fuse.Android",
        "Fuse.Desktop",
        "Fuse.iOS",
        "Fuse.Vibration",
        "FuseCore",
        "Uno.Collections",
        "Uno.Geometry"
  ],
  "Includes": [
    "*"
  ],
  "Android": {
    "Geo": {
      "ApiKey": "removed-my-api-key-use-your-own"
    }
  }
}

When launching the app, it initially generates 3 markers in the Observable that is databound to the Each under MapView, and is used to put the markers on the map.

However, the first 3 markers appear to have their latitude/longitude/label set to null (as you can see in console log when clicking on them), and they are grouped at 0/0 positions on the map (you can tell by the dark drop shadow).

If I then click the “Generate” button on top, the new markers appear on the map correctly. The original 3 markers still stay at 0/0. A click on one of the new markers shows a correct label in the console log.

2

Thanks for the test case, I’m on it :slight_smile:

3

Bug found and squashed <3