showing map using Observable have a issue. Map marker change every time.

General
1

Hi Fuse. I have a small problem. Im using a simple map and its working when i put values directly. But when i use a observable to put dynamic data, the map marker will go place to place when i zoom or swipe the screen. any idea?
im using my macmini. tested the issue in nexus 5x and also in iphone 6s…

<App>
 <JavaScript>
  var Observable = require("FuseJS/Observable");
  var cityName = Observable();
  var cityLong = Observable();
  var cityLat = Observable();
  cityName.value="Colombo";
  cityLong.value="79.86124300000006";
  cityLat.value="6.9270786";
  module.exports = {cityName,cityLong,cityLat};
 </JavaScript>
 
            <NativeViewHost >
                <MapView Latitude="{cityLat}" Longitude="{cityLong}" Zoom="10" >
                    <MapMarker Latitude="{cityLat}" Longitude="{cityLong}" Label="{cityName}"/>
                </MapView>
            </NativeViewHost>
</App>
2

Thanks for reporting! A ticket has been logged, an you can follow it here.

3

thanks mate… waiting for the fix.

4

Right, this is not a bug but expected behaviour actually. Funny I didn’t notice immediately.

The thing is that you’re using the same variables for latitude and longitude both on the MapView and the MapMarker, which means that the position of the marker is updated to that of the map itself every time you pan around.

You need to use separate variables for the map, and the markers, like so:

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

        var mapLat = Observable();
        var mapLon = Observable();

        var markerLabel = Observable();
        var markerLat = Observable();
        var markerLon = Observable();

        markerLabel.value="Colombo";
        markerLat.value="6.9270786";
        markerLon.value="79.86124300000006";

        mapLat.value="6.9270786";
        mapLon.value="79.86124300000006";

        module.exports = {
            markerLabel: markerLabel,
            markerLat: markerLat,
            markerLon: markerLon,
            mapLat: mapLat,
            mapLon: mapLon
        };
    </JavaScript>

    <NativeViewHost >
        <MapView Latitude="{mapLat}" Longitude="{mapLon}" Zoom="10">
            <MapMarker Latitude="{markerLat}" Longitude="{markerLon}" Label="{markerLabel}" />
        </MapView>
    </NativeViewHost>
</App>