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.

Answer 2

If you check the documentation you'll find the answer:

At http://docs.appcelerator.com/platform/latest/#!/api/Modules.Map you'll see an example with an annotation click:

mapview.addEventListener('click', function(evt) {
    Ti.API.info("Clicked " + evt.clicksource + " on " + evt.latitude + "," + evt.longitude);
});

and at the webview page: http://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.WebView you can see that you need to set the url to change the webview.

So inside the click event from above you'll do something like:

$.webview.url = "https://...";

and it will load the page. Check the clicksource ID to see which annotation was clicked