javascriptappceleratorappcelerator-titaniumappcelerator-alloy

Update a web view by selecting a map annotation


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);  };

Solution

  • 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.