OpenLayers Tileserver integration

Hi Folks,
I’m a newbie in the vaadin development and try to use the openlayers add-on to work with my own tiles server. The tiles are rendered from OpenStreetmap sources and are provided by my own Apache webserver.

At first I try to use the MapTilerLayer to access my tiles. Apache delivers a ‘tilemapresource.xml’ I builded from internet examples. In my gui the controls are loaded but there was no request to get only one map tile. Also the server side don’t produce any interesting log output.

My second trail was using the OpenStreetMapLayer. This one looks better and shows me the desired map. But unfortunately it loads the tiles from the OpenStreetMap servers.

The OpenLayers.js file describe a way to “subclass” the OpenLayers.Layer.OSM definition in Javascript to set a new url definition for the desired tiles server. In a former project I use this Javascript way to include my own servers and it worked really fine.

My question is now how is the best way to integrate my OSM like tiles server into my vaadin project?

Thank you for your help :slight_smile:

Hi,

The trick is to use your one script instead of the one hosted from openlayers.org. Then you can modify the script to fetch OSM tiles from your own server instead of the public ones.

Normally with VOL add-on you get this line into your apps widgetset (.gwt.xml file):

<inherits name="org.vaadin.vol.VolWidgetsetWithHostedScript" />

If you need/want to used a custom script replace that with these lines:

<!-- WS Compiler: manually edited -->
<!--  USE THIS IF YOU DON'T WANT TO USE THE HOSTED OL API -->
<inherits name="org.vaadin.vol.VolWidgetset" />

<!-- Version built/modified by you -->
<script src="OpenLayers.js"></script>

Also add your custom version of the OpenLayers.js file into “public” directory next to your .gwt.xml file. Then your widgetset don’t load the script form openlayers.org, but instead browsers will load the custom js. The same trick is also good if you wish to slim down the OpenLayers js size, by default it has huge set of features that are seldom required.

cheers,
matti

Hi Matti,
thank you for the response. I have already integrated my own hosted OpenLayers.js in the way you describe. But this not solve the problem with the tiles sources. In the moment I got the following ideas but I don’t know what’s the best way - or is there another one.

Solution 1: I use my own hosted OplenLayers.js an replace the server sources with my own tiles server in the file. In Vaadin I still use the OpenStreetMapLayer class to show the map. It will work but I don’t like it because I need to edit the original source and this can produce incompatibility with future releases.

Solution 2: I add my additional own Javascript and subclass there the OpenLayers.Layer.OSM type. This way solve the problem from solution 1 but how can I pass my own Javascript constructor to the vadin OpenStreetMapLayer? The source code tells it use only the constructor from OpenLayers.js.

Solution 3: I implement my own layer for the vaadin openlayers layer. But I have no idea what changes are needed. For instance is it necessary to change the source of the add-on and build the jar again or can I inherit some of the types in my own project without any changes of the original? A example or a source of information would be helpful.

Solution 4: I use the existing MapTilerLayer and find the reason why it don’t try to load my tiles.

I hope this describes my problem more clear.

Cheers.

Hi,

IMO you are quite safe with option 1 and it is clearly the most easiest to implement. OpenLayers is quite stable and nobody forces you to upgrade. If you wish to pave way for smoother upgrades you could check out the OL project from github, make your changes in own branch and then if important upgrades appear you can most likely merge them very easily.

Only issue I see is that you’d need to use both public openlayers servers and your own ones in the same app.

cheers,
matti

Okay, thank you to this point. I don’t like this solution it will gives me problems if I need different tiles server for different customers. In this case I need to provide different OpenLayers.js files for different installations.

I will look for a way to modify the URLs after creating the javascript osm layer object.

If I find something that fits I will post it.

Kind regards,
Okie

Hi,

Indeed it is better to make it configurable if you have more than one deployments (with multiple different tile servers). Just looked quickly the API. Here is an example:
http://wiki.openstreetmap.org/wiki/OpenLayers_Simple_Example#Extensions

In VOL project, steps would be to

  1. present a tileUrl in org.vaadin.vol.OpenStreetMapLayer and communicate that to client side in paintContent method
  2. Add a tileUrl parameter to org.vaadin.vol.client.wrappers.layer.OpenStreetMapLayer.create(String, String) (now just uses null and gets to default public servers)
  3. Override updateFromUIDL in org.vaadin.vol.client.ui.VOpenStreetMapLayer, store the tileUrl attribute received from server and use it in createLayer method

cheers,
matti

Hi Matti,
thank you for your help. After some widgetset compiling trouble - you know missing sources and stuff - I got it. :smiley:

Great!

Now I hope you find time to fill an issue report and attach a patch to
the project page
. Otherwise, you owe me a beer :grin:

cheers,
matti

Hello Matti,
I will publish the patch. But unfortunately there are some render problems in Firefox (Safari and Chrome works fine … IE is not tested :-D). After loading the map tiles, I can trace the requests and responses the at webserver and in FireBug but the map background is still light red. It seems the CSS style of loaded tiles is wrong. The problem is not present if I use the tiles from the original openstreetmap servers.
Because my tiles server is currently on my development machine I suppose some race contitions. I will try to verify and compare it with simple static web page. I’m curious about it. By the way - debugging in vaadin (with additional widgetsets and gwt debugging) is terrible, terrible slow.

Kind regards

For true in-browser debugging of the client side code, you could also consider trying out
SuperDevMode
. There is an
add-on
that makes setting it up easier.

I have solved the map problems. The guys and girls(?) from OpenLayers integrate some changes angains cross site scripting. I don’t understand it in all consequences but if you got only red tiles in Firefox you need to set an additional http header for your tiles. More information are
here
.

Thanx for the advice with the other debugging style. I have read around and will test it next days.

btw patchfile is delivered.