Update markers on a Map

Bug Reports
1

I want to update Markers on a map when a button is pressed.

Here is a test case when pressing a button only change the title of the Markers.

Clicking on the button does not update the title of the Marker.

Is it normal behaviour ? Do I need to add something ?

Thanks for your help

<App Background="#332A6C">
<iOS.StatusBarConfig Style = "Light"/>
	<DockPanel>
		<JavaScript>
			var Observable = require("FuseJS/Observable");
			var markers = Observable();

    		function Marker(title, lat, lng) {
    			this.title = title;
       	 		this.lat = lat;
        		this.lng = lng;
    		};

			for (var i = 0; i < 100 ; i++) {
				var lat = Math.random(i)+48;
				var lng = Math.random(i)+2;
				var title = "Marker_"+i.toString();
				var marker = new Marker(title, lat, lng);
				markers.add(marker);
			}

			function toggle() {
				markers.refreshAll(markers,
					function(oldItem,newItem) {
						return oldItem.lat == newItem.lat;
					},
					function(oldItem,newItem) {
						oldItem.title = "Hello";
						console.log("Hello");
					},
					function(newItem){}
				);
			}


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

		<StatusBarBackground Dock="Top"/>
		<BottomBarBackground Dock="Bottom"/>
			<NativeViewHost>
				 <Button Text="Switch" Clicked="{toggle}" Alignment="TopRight"/>
	              <MapView Latitude="48.5" Longitude="2.5" Zoom="10" ShowMyLocation="true" ShowMyLocationButton="true">
	            	<Each Items="{markers}">
	                	<MapMarker Latitude="{lat}" Longitude="{lng}" Label="{title}"/>
	            	</Each>
            	</MapView>
            </NativeViewHost>
        </DockPanel>
</App>

Fuse version : 0.27
MacOs : 10.11.4

2

Changing the code to make the title an Observable as well is working.

See the code below :

<App>
<iOS.StatusBarConfig Style = "Light"/>
	<DockPanel>
		<JavaScript>
			var Observable = require("FuseJS/Observable");
			var markers = Observable();

    		function addMarker(title, desc, lat, lng, icon) {
    			markers.add({
	    			title: Observable(title),
	    			desc: desc,
	       	     lat: lat,
	        		lng: lng,
                    icon: icon
        		});
    		};




			for (var i = 0; i < 100 ; i++) {
				var lat = Math.random(i)+48;
				var lng = Math.random(i)+2;
				var title = "Marker_"+i.toString();
				var desc = "Hello_"+i.toString();
				var icon = "/Assets/pin_b_O.png";
				var icon_bis = "/Assets/pin_s_O.png";
				addMarker(title, desc, lat, lng, icon);
			}

			function toggle() {
				markers.refreshAll(markers,
					function(oldItem,newItem) {
						return oldItem.lat == newItem.lat;
					},
					function(oldItem,newItem) {
						oldItem.title.value = newItem.desc;
					},
					function(newItem){}
				);
			}


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

		<StatusBarBackground Dock="Top"/>
		<BottomBarBackground Dock="Bottom"/>
			<NativeViewHost>
				 <Button Text="Switch" Clicked="{toggle}" Alignment="TopRight"/>
	              <MapView Latitude="48.5" Longitude="2.5" Zoom="10" ShowMyLocation="true" ShowMyLocationButton="true">
	            	<Each Items="{markers}">
	                	<MapMarker Latitude="{lat}" Longitude="{lng}" Label="{title}"/>
	            	</Each>
            	</MapView>
            </NativeViewHost>
        </DockPanel>
</App>
3

However, making icon field as an Observable does not work … :’(

Test case (Fuse 0.27.1 // MacOs 10.11.4)

<App>
<iOS.StatusBarConfig Style = "Light"/>
	<DockPanel>
		<JavaScript>
			var Observable = require("FuseJS/Observable");
			var markers = Observable();

    		function addMarker(title, desc, lat, lng, icon, icon_bis) {
    			markers.add({
	    			title: Observable(title),
	    			desc: desc,
	       	 		lat: lat,
	        		lng: lng,
	        		icon: Observable(icon),
	        		icon_bis: icon_bis
        		});
    		};




			for (var i = 0; i < 100 ; i++) {
				var lat = Math.random(i)+48;
				var lng = Math.random(i)+2;
				var title = "Marker_"+i.toString();
				var desc = "Hello_"+i.toString();
				var icon = "/Assets/pin_b_0.png";
				var icon_bis = "/Assets/pin_s_0.png";
				addMarker(title, desc, lat, lng, icon.toString(), icon_bis.toString());
			}

			function toggle() {
				markers.refreshAll(markers,
					function(oldItem,newItem) {
						return oldItem.lat == newItem.lat;
					},
					function(oldItem,newItem) {
						oldItem.icon.value = newItem.icon_bis;
					},
					function(newItem){}
				);
			}


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

		<StatusBarBackground Dock="Top"/>
		<BottomBarBackground Dock="Bottom"/>
			<NativeViewHost>
				 <Button Text="Switch" Clicked="{toggle}" Alignment="TopRight"/>
	              <MapView Latitude="48.5" Longitude="2.5" Zoom="10">
	            	<Each Items="{markers}">
	                	<MapMarker Latitude="{lat}" Longitude="{lng}" Label="{title}" IconFile="{icon}"/>
	            	</Each>
            	</MapView>
            </NativeViewHost>
        </DockPanel>
</App>

Throw the error :

libc++abi.dylib: terminating with uncaught exception of type uThrowable: Uno.Exception
(lldb)
4

This is interesting, thanks for sharing this code. I’ll make an issue for the icon snafu