MapView MarkerTapped updating Observables

How-to Discussions
1

I have a problem with MapView MarkerTapped,

var contact = Observable("");
var contactInfo = Observable(
  {Latitude:59.913580, Longitude:10.731637, Label:"Klingenberggata 7"},
  {Latitude:59.920814, Longitude:10.683548, Label:"Sjølyst / Karenlyst Allé 9"},
  {Latitude:59.912191, Longitude:10.742993, Label:"Steen og Strøm Magasin"},
  {Latitude:59.910617, Longitude:10.728045, Label:"Aker Brygge / Grundingen 1"},
  {Latitude:59.916261, Longitude:10.714986, Label:"Frognerveien 8"});

  function updateInfo(arg){
    contact.clear();
    contact.add(arg);
    console.log("1." + arg.Label);
  }

Then trying to use updateInfo to display the label beneath the mapview:

    <NativeViewHost ux:Name="mapy" Alignment="Left" Width="100%">
      
      <MapView Height="450" MarkerTapped="{updateInfo}" ShowMyLocationButton="true" AllowZoom="false" ShowMyLocation="true" Latitude="59.910617" Longitude="10.728045" Zoom="12" >
        <Each Items="{contactInfo}">
          <MapMarker Latitude="{Latitude}" Longitude="{Longitude}" Label="{Label}"/>
        </Each>
      </MapView>
    </NativeViewHost>

    <Each Items="{contact}">
      <Text Value="{Label}"/>
    </Each>

But theres no text and actually on my sony x3 the app crashes after a minute after tapping a couple of markers

2

contact.add(arg); - What you’re doing here is to add the entire data context for MapView to your observable. I suspect this might be why something crashes after a while.

Also, note that the label passed to MarkerTapped is is all lowercase. E.g. it’s arg.label without capital “L”.

What you want to do is probably: contact.add({"Label": arg.label});

And a small tip: when having trouble with handlers and their arguments it can be useful to do a console.log(JSON.stringify(arg)) just to work out what’s in there. :slight_smile: