0

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) {
        //display map window if it is not visible
        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>
1

I have made some changes in the code can you try. I hope it will help.

    <script>

    var map;
    var basemap;
    var mylines;
    var selected_items;

        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) {
            //display map window if it is not visible
            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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.