OpenLayers in native Javascript

Flow
1

Hi,

I’m trying to use OpenLayers in native Javascript with Vaadin. For that, I added the following code:


contentLayout.addComponent(mapLayout);
mapLayout.setDebugId("map");
window.executeJavaScript("window.onload = function(){"
				+ "alert('hi');"
				+ "map = new OpenLayers.Map ('map');"
				+ "var osm = new OpenLayers.Layer.OSM();"
				+ "map.addLayers([osm]
);" + "map.zoomToMaxExtent();"
				+ "alert('bye');" 
                                + "};");

All I get in the output window is an empty layout with “hi” and “bye” notifications.
I did not add a with reference to the API because I noticed (using firebug) that the API script is added to the DOM of the HTML page, I suppose by the OpenLayers Vaadin add-on that I have installed in the application.

Is this the right way to proceed?

Regards.

2

In my opinion you need to set a extent in Javascript (or call setCenter and setZoom).

Why do you want to use the pure Javascript instead of the add-on. I also play around with it and try to learn :smiley:

If you included the vaadin add-on there is no need to do this in pure javascript. I load my map with code like this … it’s from Demo.java from add-on source


...
        final OpenLayersMap map = new OpenLayersMap();
        map.setImmediate(true); // update extent and zoom to server as they
                                // change

        OpenStreetMapLayer osm = new OpenStreetMapLayer();
        map.setSizeFull();
        map.addLayer(osm);
        map.setCenter(22.805, 60.447);
	map.setZoom(15);
...
3

Hey Okie,

I don’t think that’s the problem. In my code, there is a zoomToMaxExtent() method that replaces the setCenter() and setZoom() methods.
Besides, that code works fine in a classic html/ javascript application.

Well, I want to use javascript because I’m more fluent using javascript OpenLayers and because I’d like to use other libraries like GeoExt, ExtJs… And also because I can’t even display a simple Geoserver WMS using Vaadin add-on …