CODEWITHSUNDEEP
openlayers
ScottFree
ScottFree

Reputation: 632

External hyperlinks to control Openlayers map

I have a basic map defined like show below (pseudo code).

After the map.addLayers call there is a displayData(theid) which I want to call from the main body of the html document, the problem is I can't call the method. I can achieve what I am after if I bind an onclick event to the id of the <a> tag but there's going to be too many links to bind to each and every <a> tag

Clicking on one of the hyperlinks below results in no method displayData() defined.

Thanks for reading!

  <script>
        Ext.onReady(function() {
        map = new OpenLayers.Map();
        basemap = new OpenLayers.Layer.WMS(...);
        mylines = new OpenLayers.Layer.WMS(...);
        selected_items = new OpenLayers.Layer.Vector(...);
        map.addLayers([basemap, mylines, selected_items]);

        //attach an onclick even for the button on the search results page
        function displayData(theid) {
            OpenLayers.Request.GET({
                url: 'http://1.1.1.1:8080/geoserver/wfs?service=WFS&version=1.0.0&request=GetFeature&featureId='+theid,
                proxy: "../gis/geoserver.seam?url=",
                success: function(response) {
                //if were successful then add the returned features to the map and zoom to the extent
                var gmlReader = new OpenLayers.Format.GML({ extractAttributes: true });
                selected_items.removeAllFeatures();
                selected_items.addFeatures(gmlReader.read(response.responseText));
                map.zoomToExtent(selected_items.getDataExtent());
            }
        });
    }
}
</script>

<body>
    <div id="map" class="smallmap"></div>
    <br/><a href="" onlick="displayData('feature1');">View on map</a>
    <br/><a href="" onlick="displayData('feature2');">View on map</a>
    <br/><a href="" onlick="displayData('feature3');">View on map</a>
    <br/><a href="" onlick="displayData('feature4');">View on map</a>
</body>

Upvotes: 1

Views: 426

Answers (1)

Christophe Roussy
Christophe Roussy

Reputation: 17039

JavaScript has function scope which means that displayData is not 'visible' from outside

Ext.onReady(function() {
... stuff here is executed but is not visible from outside
}

To solve this you can declare a fake empty displayData outside of it or bind the click event of the links (via a class).

Upvotes: 1

Related Questions