Update a web view by selecting a map annotation

Question

I'm using Appcelerator Alloy. I have a map with several annotations and a web view underneath it. I want to be able to select an annotation on the map and have the web view show a web page based on that annotation.

So for example, select the Belarus annotation, and the web view shows the wikipedia page for Belarus.

Here is what I have roughly so far:

Map.xml

<Alloy>
<Window title="Map">
    <Module method="createView" module="ti.map"  id="mapview" height="250" top="0" >
        <Annotation id="belarus" onClick="refresh" url="https://en.wikipedia.org/wiki/Belarus" />
        <Annotation id="belgium" />
        <Annotation id="bosniaAndHerzegovina" />
        <Annotation id="bulgaria" />
    </Module>
    <WebView id="webview" url="https://en.wikipedia.org/wiki/Austria" top="252" />
</Window>

(the Js is more pseudo code than anything because I'm not sure what should actually go there) Map.Js

function refresh(){
//set url based on which annotation was selected
var url = $.this.url;

if(url != null){
    //update the web view with the new url
$.webview.reload(url);  };

Answer 1

Turns out it was a fairly simple mistake. Instead of putting the onCLick call on the annotation it should have been on the map module itself.

.XML Code

<Alloy>
<Window title="Map">
    <Module method="createView" module="ti.map"  onClick="refresh" id="mapview" height="250" top="0" >
        <Annotation id="belarus" />
        <Annotation id="belgium" />
        <Annotation id="bosniaAndHerzegovina" />
        <Annotation id="bulgaria" />
    </Module>
    <WebView id="webview" url="https://en.wikipedia.org/wiki/Austria" top="252" />
    </WebView>
</Window>

.js Code

function refresh(evt){
var url = evt.annotation.url;
$.webview.url = url;};

miga was very helpful with the webview url.