More than one MapMarker updated using refreshAll

How-to Discussions
1

I’m trying to make a Map where I can see with a MapMarker the position of each person. Through a websocket I send this JSON:

{"latitud":"37.32461046","longitud":"-122.02443333","titulo":"person1"}

The difference between each person is the property titulo. I thought that the best option would be to use refreshAll method of Observable.

JS Code

var marcadores = Observable();

function start(){
  ws = new WebSocket(ws:addres);
  ws.onopen = function(){
    // OnOpen code
  }
  ws.onmessage = function(message){
    console.log(message.date);
    var marcadorWeb = JSON.parse("["+message.data+"]");

    if(marcadorWeb.titulo != undefined){
      marcadores.refreshAll(marcadorWeb,
        //Compare on ID
        function(oldItem, newItem){
          return oldItem.titulo == newItem.titulo;
        },
        // Update text
        function(oldItem, newItem){
          oldItem.longitud.value = newItem.longitud;
          oldItem.latitud.value = newItem.latitud;
        },
        // Map to object with an observable version of text
        function(newItem){
          return {
            titulo: newItem.titulo,
            latitud: Observable(newItem.latitud),
            longitud: Observable(newItem.longitud),
          };
        }
      );
    }

  }

  ws.onclose = function(){
    // close code
  };
}

start();

var marcadoresView = marcadores.map(function(item, index){
  return {
    item: item,
    index: index
  };
});

module.exports = {
  marcadoresux: marcadoresView
}

UX Code

<NativeViewHost>
    <MapView Latitude="37.3396769" Longitude="-5.841805399999998" Zoom="12">
        <Each Items="{marcadoresux}">
            <MapMarker Latitude="{item.latitud}" Longitude="{item.longitud}" Label="{item.titulo}" />
        </Each>
    </MapView>
</NativeViewHost>

The problem comes when titulo changes, because in the MapView I still see just one MapMarker and no another one with a different titulo and coordinates.

For example:

-First I received:

{"latitud":"37.32461046","longitud":"-122.02443333","titulo":"person1"}

Then Observable is { latitud: "37.32461046", longitud: "-122.02443333", titulo: "person1" }

-If I received another websocket message with the same titulo I want an latitude and longitude update of the object with that titulo , but if it’s not the same, I want that refreshAll adds another object to the Observable, but it’s not what happen in the practice.

Websocket message: {"latitud":"37.32461046","longitud":"-122.02443333","titulo":"person2"}

Then Observable should be { latitud: "37.32461046", longitud: "-122.02443333", titulo: "person1" }, { latitud: "37.32461046", longitud: "-122.02443333", titulo: "person2" }

But in my project that Observable would be: { latitud: "37.32461046", longitud: "-122.02443333", titulo: "person2" }.