Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
OpenLayers 3 Wrapper for Vaadin
OpenLayers 3 Wrapper for Vaadin is a Vaadin wrapper for the OpenLayers 3 javascript library. The add-on is currently released as beta and most of the features should already work pretty reliably. In case you have any questions or comments related to the add-on, please post them in this thread.
Link to the add-on page:
https://vaadin.com/directory#!addon/openlayers-3-wrapper-for-vaadin
Matti Hosio: OpenLayers 3 Wrapper for Vaadin is a Vaadin wrapper for the OpenLayers 3 javascript library. The add-on is currently released as beta and most of the features should already work pretty reliably. In case you have any questions or comments related to the add-on, please post them in this thread.
Link to the add-on page:
https://vaadin.com/directory#!addon/openlayers-3-wrapper-for-vaadin
Hi Matti,
Firstable I have to say thank you very much for your work on OL3 Add-on For Vaadin.
I write to you because I'm working on GIS Web App and, of course, I'm using your add-on. I've read the code on https://github.com/VOL3/v-ol3. I've successfully with functions for presenting layers with WMS. For that, I'm using geserver and a postgis data base as the source for all the geospatial information.
My problem is when i want to do the things in reverse way. I mean, using a presented layer obtain the information about the register in the postgis table related. For example, clicking one polygon shows the database row..
I really appreciate your help with that.
PD: Sorry for my english.
Hello Guillermo,
So which layer are you using? If you are working with FeatureLayer to show your polygons, you could try org.vaadin.addon.vol3.interaction.OLSelectInteraction to capture the feature selects. See the url below for example.
https://github.com/VOL3/v-ol3-demo/blob/master/src/main/java/org/vaadin/OL3Demo.java
If that does not work for you, please elaborate a bit more what you are trying to achieve and which layers and sources you are using.
Best regards,
Matti
Well, I'll try to explain better.
For a base layer i'm using OLMapQuestSource with a OLMapQuestLayerName.OSM.
The mechanism that I'm using for presenting additional layers:
- Invoke a method that returns OLSource based on OLtileWMSSourceOptions object.
[*]This OLSource is used in a new OLTileLayer to create a new OLLayer.
[*]This Layer is added to the map and then is shown.
Every polygon i'm showing in my map is a row in a Postgis data base. I want to implement a functionality to show the information (all columns of the table ) of a specific polygon realated to the data base row.
Thanks in advance.
Thanks for clarifications,
Unfortunately the OL wrapper does not really help you there since the shapes are drawn on tiled images already at your WMS server. The OpenLayers client (wrapper) does not have any information on what is inside the tiles.
In order to achieve your goal, you could try to use the getFeatureInfo functionality if it is provided by your WMS server. At the moment, the add-on does not really help you with that. The underlying OpenLayers JS library has some support for this (tileWMS.getFeatureInfoUrl) but it is not wrapped by the current version of the add-on. This means that you need to modify the add-on or build the corresponding functionality on server side. The best approach depends on your application. In case you decide to fork the add-on, I will happily accept pull requests for that feature.
Regards,
Matti
Hi Im working on OpenLayers 3 Wrapper for Vaadin add-on to implement a simple application as shown in the demo in Vaadin Directory. But the widgetset compilation is failed. I included all the jars and required configurations. But cant find why it is giving the widgetset failed exception. Can anyone help me with this.?
What dependency management system are you using? Did you include the GWT-wrapper required by the add-on as well?
Regards,
Matti
Hi Matti, Is there any way to change the format of coordinates shown by MousePositionControl of Map? I want to change from degree decimal to HDMS.
Best Regards
Hi,
I made some code to made the possible to have The HDMS format on MousepositionControl.
Where i can send it ?
Hi all,
I'm been able to change the style of a given layer but I'm trying now to change the style of a specified feature unsuccessfully :(. The idea is to have the possibility of selecting a feature in a combobox and, given its Identifier, searching for it along the collection of features, and, once found it, being able to highlight it. For that reason I need to change its style (color, stroke, fill...). The code is implemented, but nothing happens! maybe it's required to refresh the map, but I neither know to make that.
Here you have my implementation:
if(myLayer.isVisible()){
List<OLFeature> features = ((OLVectorSource)myLayer.getSource()).getFeatures();
for (OLFeature f : features) //loop all features in the layer
{
if(f.getId().equals(id)){//we found it!
f.setStyle(createStyle("#2CE32F", 2.0));//passing color and width
}
}
}
Any help will be appreciated!
Many thanks in advance!
Cheers,
Ruben
I've just to find it out!
just I had to call to updateFeature from source object.
Thanks anyway!
Cheers, Ruben
Hi,
I have touble with the styleing.
I can draw circles and it works fine, but if set a color, the circle doesnt show up.
OLStyle s = new OLStyle();
s.circleStyle = new OLCircleStyle();
s.circleStyle.stroke = new OLStrokeStyle();
s.circleStyle.stroke.color = "#FFFFFF";
s.circleStyle.stroke.width = 3.0;
s.fillStyle = new OLFillStyle();
s.fillStyle.color = "#222333";
s.strokeStyle = s.circleStyle.stroke;
OLFeature f = new OLFeature();
f.setGeometry(p);
f.setStyle(s);
I just want to change the color, can someone please help?
if i remove f.setStyle(s); it shows up, but in the default color.
Thanks in advance
Ruben DF: Hi all,
I'm been able to change the style of a given layer but I'm trying now to change the style of a specified feature unsuccessfully :(. The idea is to have the possibility of selecting a feature in a combobox and, given its Identifier, searching for it along the collection of features, and, once found it, being able to highlight it. For that reason I need to change its style (color, stroke, fill...). The code is implemented, but nothing happens! maybe it's required to refresh the map, but I neither know to make that.
Here you have my implementation:
if(myLayer.isVisible()){ List<OLFeature> features = ((OLVectorSource)myLayer.getSource()).getFeatures(); for (OLFeature f : features) //loop all features in the layer { if(f.getId().equals(id)){//we found it! f.setStyle(createStyle("#2CE32F", 2.0));//passing color and width } } }
Any help will be appreciated!
Many thanks in advance!
Cheers,
Ruben
Hi, could you please post your createStyle() method.
I dont know what I am doning wrong, but when i create a style, the feature doesnt show up.
Thanks
hi folks,
i try to center my OpenLayer-Map over a specific coordinate where I set a Marker.
Ther marker is displayed but the map centers over 0/0 instead of the Markers location.
To center I use following Code:
public void showLocation(double latitude, double longitude){
OLCoordinate centerCoordinate = new OLCoordinate();
centerCoordinate.x = longitude;
centerCoordinate.y = latitude;
this.map.getView().setCenter(centerCoordinate);
this.map.getView().setZoom(5);
}
Zoom seems to work but center is not working, any one an Idea what the problem could be?
Hello Marc,
Maybe a coordinate space problem? Have you set input projection for your view?
viewOpts.setInputProjection(Projections.EPSG4326);
Cheers,
Matti
Andreas Windbichler:
Ruben DF: Hi all,
I'm been able to change the style of a given layer but I'm trying now to change the style of a specified feature unsuccessfully :(. The idea is to have the possibility of selecting a feature in a combobox and, given its Identifier, searching for it along the collection of features, and, once found it, being able to highlight it. For that reason I need to change its style (color, stroke, fill...). The code is implemented, but nothing happens! maybe it's required to refresh the map, but I neither know to make that.
Here you have my implementation:
if(myLayer.isVisible()){ List<OLFeature> features = ((OLVectorSource)myLayer.getSource()).getFeatures(); for (OLFeature f : features) //loop all features in the layer { if(f.getId().equals(id)){//we found it! f.setStyle(createStyle("#2CE32F", 2.0));//passing color and width } } }
Any help will be appreciated!
Many thanks in advance!
Cheers,
RubenHi, could you please post your createStyle() method.
I dont know what I am doning wrong, but when i create a style, the feature doesnt show up.
Thanks
To get started, you might want to have a look at:
https://github.com/VOL3/v-ol3/blob/master/v-ol3/src/test/java/org/vaadin/addon/vol3/demoandtestapp/StyleTestMap.java
Cheers,
Matti
Andreas Windbichler: Hi,
I have touble with the styleing.
I can draw circles and it works fine, but if set a color, the circle doesnt show up.OLStyle s = new OLStyle(); s.circleStyle = new OLCircleStyle(); s.circleStyle.stroke = new OLStrokeStyle(); s.circleStyle.stroke.color = "#FFFFFF"; s.circleStyle.stroke.width = 3.0; s.fillStyle = new OLFillStyle(); s.fillStyle.color = "#222333"; s.strokeStyle = s.circleStyle.stroke; OLFeature f = new OLFeature(); f.setGeometry(p); f.setStyle(s);
I just want to change the color, can someone please help?
if i remove f.setStyle(s); it shows up, but in the default color.Thanks in advance
Hmm... Try to add something like:
s.circleStyle.fill = new OLFillStyle("#222333");
Regards,
Matti
BHASKER KANDPAL: Hi Matti, Is there any way to change the format of coordinates shown by MousePositionControl of Map? I want to change from degree decimal to HDMS.
Best Regards
Did you try OLMousePositionControl.projection = "EPSG:4326" already?
Regards,
Matti
Matti Hosio:
BHASKER KANDPAL: Hi Matti, Is there any way to change the format of coordinates shown by MousePositionControl of Map? I want to change from degree decimal to HDMS.
Best Regards
Did you try OLMousePositionControl.projection = "EPSG:4326" already?
Regards,
Matti
Nevermind, I thought you were after normal lat/lon coordinates, but clearly HDMS is a bit different representation. Unfortunately it is not currently supported by the wrapper. Maybe you would like to contact Mr Claudio Pulerà (see above) and ask whether he is willing to share his solution with you.
Cheers,
Matti
Claudio Pulerà : Hi,
I made some code to made the possible to have The HDMS format on MousepositionControl.
Where i can send it ?
Hello Claudio,
Sorry for late answer. You can just send a pull request in github. I'll have a look and if your solution is generic enough, I'll be happy to include it in the master branch. That way the user community of the add-on could use your solution in any case.
Cheers,
Matti
Matti Hosio:
Andreas Windbichler: Hi,
I have touble with the styleing.
I can draw circles and it works fine, but if set a color, the circle doesnt show up.OLStyle s = new OLStyle(); s.circleStyle = new OLCircleStyle(); s.circleStyle.stroke = new OLStrokeStyle(); s.circleStyle.stroke.color = "#FFFFFF"; s.circleStyle.stroke.width = 3.0; s.fillStyle = new OLFillStyle(); s.fillStyle.color = "#222333"; s.strokeStyle = s.circleStyle.stroke; OLFeature f = new OLFeature(); f.setGeometry(p); f.setStyle(s);
I just want to change the color, can someone please help?
if i remove f.setStyle(s); it shows up, but in the default color.Thanks in advance
Hmm... Try to add something like:
s.circleStyle.fill = new OLFillStyle("#222333");
Regards,
Matti
Thanks for the help.
I could resolve my problem yesterday on my own.
After i recognized that I used an older Version (1.2) I updated it and found the StyleTestMap.java
Regards, Andreas
Matti Hosio: Hello Marc,
Maybe a coordinate space problem? Have you set input projection for your view?
viewOpts.setInputProjection(Projections.EPSG4326);
Cheers,
Matti
Hi Matti,
thanks for the Tip. I did forget to set the Projection. After I included this it works as expected.
Now I just have to figure out a way to calculate an appropriate zoom level. But that has nothing to do with the Add-on.
Regards
Marc
Hi guys,
already have my next trouble. I try to rotate some markers. I use Font Icons as the placeholder for markers, no Icon, only text.
Therefore I want to rotate the text. To do this i use following method:
style.textStyle.rotation = rotation;
Style is a OLStyle object.
I assumed that the rotation is a double value in degrees where 0 and 360 would point north/top of the map.
But somehow I don't understand the degree of rotation. 0 is north, as expected, but 1 does almost rotate to 40°, 2 to almost 100° and 3 something around 150°.
My ViewOptions are as follow:
OLViewOptions options=new OLViewOptions();
options.setMinZoom(1);
options.setInputProjection(Projections.EPSG4326);
options.setEnableRotation(true);
OLRotationConstraint rotationConstraint = new OLRotationConstraint();
rotationConstraint.constrained = false;
options.setRotationConstraint(rotationConstraint);
I'm thankfull for any ideas
Marc Poy: Hi guys,
already have my next trouble. I try to rotate some markers. I use Font Icons as the placeholder for markers, no Icon, only text.
Therefore I want to rotate the text. To do this i use following method:style.textStyle.rotation = rotation;
Style is a OLStyle object.
I assumed that the rotation is a double value in degrees where 0 and 360 would point north/top of the map.
But somehow I don't understand the degree of rotation. 0 is north, as expected, but 1 does almost rotate to 40°, 2 to almost 100° and 3 something around 150°.My ViewOptions are as follow:
OLViewOptions options=new OLViewOptions(); options.setMinZoom(1); options.setInputProjection(Projections.EPSG4326); options.setEnableRotation(true); OLRotationConstraint rotationConstraint = new OLRotationConstraint(); rotationConstraint.constrained = false; options.setRotationConstraint(rotationConstraint);
I'm thankfull for any ideas
Marc Poy: Hi guys,
already have my next trouble. I try to rotate some markers. I use Font Icons as the placeholder for markers, no Icon, only text.
Therefore I want to rotate the text. To do this i use following method:style.textStyle.rotation = rotation;
Style is a OLStyle object.
I assumed that the rotation is a double value in degrees where 0 and 360 would point north/top of the map.
But somehow I don't understand the degree of rotation. 0 is north, as expected, but 1 does almost rotate to 40°, 2 to almost 100° and 3 something around 150°.My ViewOptions are as follow:
OLViewOptions options=new OLViewOptions(); options.setMinZoom(1); options.setInputProjection(Projections.EPSG4326); options.setEnableRotation(true); OLRotationConstraint rotationConstraint = new OLRotationConstraint(); rotationConstraint.constrained = false; options.setRotationConstraint(rotationConstraint);
I'm thankfull for any ideas
To be honest, I haven't tested that by my self. Based on your description, you should be using radians as an unit of angle. This means you should use something like Math.PI / 2 to get 90 degrees and so on.
Cheers,
Matti
Hi Matti,
thanks for the tipp
I was too focused on the degrees.
I now use following method to get the radiant:
radiant = Math.toRadians(degree);
As 1° = PI/180
or radiant = degree * PI / 180
Greets
Marc
Andreas Windbichler:
Ruben DF: Hi all,
I'm been able to change the style of a given layer but I'm trying now to change the style of a specified feature unsuccessfully :(. The idea is to have the possibility of selecting a feature in a combobox and, given its Identifier, searching for it along the collection of features, and, once found it, being able to highlight it. For that reason I need to change its style (color, stroke, fill...). The code is implemented, but nothing happens! maybe it's required to refresh the map, but I neither know to make that.
Here you have my implementation:
if(myLayer.isVisible()){ List<OLFeature> features = ((OLVectorSource)myLayer.getSource()).getFeatures(); for (OLFeature f : features) //loop all features in the layer { if(f.getId().equals(id)){//we found it! f.setStyle(createStyle("#2CE32F", 2.0));//passing color and width } } }
Any help will be appreciated!
Many thanks in advance!
Cheers,
RubenHi, could you please post your createStyle() method.
I dont know what I am doning wrong, but when i create a style, the feature doesnt show up.
Thanks
Hi Andreas,
Sorry for delaying on my answer, I was on holidays. Glad to hear you solve your problem. As Matti told you, createStyle method is based on StyleTestMap.java. Remember also to call updateFeature() method once your style method is finished in order to refresh the feature on the map and visualize the changes.
Cheers,
Ruben
Hi,
I have created a few small examples using this addon, but now i struggle with a problem.
I try to extend the vaadin dasboard-demo by adding a view containing a v-ol3 addon.
Outside of the dashboard-demo (in a simple project containting only this one view) it works really well,
but in the dasboard-demo it doesnt.
I have Listeners added to the map.getView() and also set the map.getView().setCenter(x,y).
The setCenter has no effect and also the Listeners arend fired.
Now I found out that when using the dasboard demo, there are no XHR requests send whenever I change something in the view (zoom or move), but in my simple example it does. However the View also contains Buttons which work just fine.
The View used in both Projects is 1:1 the same code.
Any Ideas what I am missing?
Thanks in advance,
Andreas
Hi all,
is there a way to read the WMTS options from the Capabilities of the service?
Openlayer 3 supports: var options = ol.source.WMTS.optionsFromCapabilities(...).
This is a very convenient way to define the options.
Regards, Wolf
Fills are black inside polygons (OLPolygon) and points (OLPoint) using Safari Browser (Apple). It looks like Safari does not like transparencies and fill colors. I have no idea why it's happenning this behavious. Does anyone sound this familiar?
Some code:
/**
*
* @return A default style for features
*/
public final OLStyle setDefaultStyleFeatures(){
return setStyleFeatures("#3399CC", 2.0, "rgba(255,255,255,0.4", 5.0);
}
/**
*
* @return A defined style for features giving the color, width and fill (color and transparency) and the radius of circles (points)
*/
public final OLStyle setStyleFeatures(String color, double width, String fill, double radius){
OLStyle defaultStyle=new OLStyle();
defaultStyle.circleStyle=createCircleStyle(color, width, fill,radius);
return defaultStyle;
}
Thanks in advance.
Hi all,
I'm trying to change the feature icon using a style without succeding, the blue circle keeps showing up.
Can anyone tell me what I do wrong?
....
OLFeature feature = new OLFeature(id);
OLStyle style = StyleUtils.createDefaultStyle();
style.iconStyle = new OLIconStyle();
style.iconStyle.size = new double[] {32.0, 32.0};
style.iconStyle.src = "vaadin://img/Logo_Chrome.png";
//style.iconStyle.src = "http://icons.iconarchive.com/icons/appicns/simplified-app/256/appicns-Chrome-icon.png";
feature.setStyle(style);
feature.setGeometry(geometry);
...
Thanks in advance
Andreas Windbichler: Hi,
I have created a few small examples using this addon, but now i struggle with a problem.
I try to extend the vaadin dasboard-demo by adding a view containing a v-ol3 addon.
Outside of the dashboard-demo (in a simple project containting only this one view) it works really well,
but in the dasboard-demo it doesnt.
I have Listeners added to the map.getView() and also set the map.getView().setCenter(x,y).
The setCenter has no effect and also the Listeners arend fired.
Now I found out that when using the dasboard demo, there are no XHR requests send whenever I change something in the view (zoom or move), but in my simple example it does. However the View also contains Buttons which work just fine.
The View used in both Projects is 1:1 the same code.Any Ideas what I am missing?
Thanks in advance,
Andreas
Hello Andreas,
Sorry for not answering for a quite long time, just came back from a long vacation. Did you get this fixed? I would be really interested to know if there is some problems in using the add-on inside a bigger project. In case the problem still exists, I would be really happy if you could post me a sample code that shows the issue.
Best regards,
Matti
Wolf Michna: Hi all,
is there a way to read the WMTS options from the Capabilities of the service?
Openlayer 3 supports: var options = ol.source.WMTS.optionsFromCapabilities(...).
This is a very convenient way to define the options.
Regards, Wolf
Hello Wolf,
Thank you for your question. The feature is not implemented at the moment. I'll add a ticket for that since that could be a useful feature. Probably we need also support for getting the capabilities from the server and parsing the response as well.
Regards,
Matti
Jose Luis: Hi all,
I'm trying to change the feature icon using a style without succeding, the blue circle keeps showing up.
Can anyone tell me what I do wrong?.... OLFeature feature = new OLFeature(id); OLStyle style = StyleUtils.createDefaultStyle(); style.iconStyle = new OLIconStyle(); style.iconStyle.size = new double {32.0, 32.0}; style.iconStyle.src = "vaadin://img/Logo_Chrome.png"; //style.iconStyle.src = "http://icons.iconarchive.com/icons/appicns/simplified-app/256/appicns-Chrome-icon.png"; feature.setStyle(style); feature.setGeometry(geometry); ...
Thanks in advance
Hello Jose,
Something like this works for me:
OLStyle style= new OLStyle();
style.iconStyle=new OLIconStyle();
style.iconStyle.size=new double[]{32.0,32.0};
style.iconStyle.src = "VAADIN/img/flag.png";
pointFeature.setStyle(style);
The problem in your solution is probably that the default style includes something that makes the ol3 draw the circle instead of the icon. Also please check the src param for the icon.
Regards,
Matti
Hi Matti,
Is it relatively easy to coerse your plugin to allow me to display KML files in the browser? I've got a home-brew GIS written in Java, and until now have been dynamically exporting KML to be viewed in Google Earth. However, I'm hoping that I can use your plugin to allow me to start implementing in-browser editing tools, as Google Earth is completely read only.
Cheers,
Joe
Hello Josef,
Currently the add-on supports only "dynamic" vector data (you can display and edit features using the provided apis (OLVectorSource)). Any external feature source such as KML is not directly supported. Maybe you could use just another open source library for reading and writing KML files on the server side and handle displaying and editing the features using the OpenLayers wrapper?
Anyway, thank you for bringing this up. Now I know there is a demand for this kind of a functionality as well. I'll definitely add support for some static feature sources as soon as I find some time to do so. The underlying JS-api supports those already.
Regards,
Matti
Great news. Thanks for your quick response Matti. I suspect that we're going to me making a lot of use of this, so I imagine that I'll be putting some pull requests back your way in due course.
A quick one; how easy is it to support the Bing maps? It looks like OpenLayers supports this as a map source, but I didn't see any references to it in your code. Am I missing something, or does it need to be implemented?
Cheers,
Joe
Hello Josef,
Bing maps are not yet supported. I assume they added those to the OpenLayers v3 api after I did the first major version of my add-on. I'll add a ticket about it and try to find time to implement that as well at some point. Since this is my spare time project, I can not promise any time schedule though. You can always fork it of course.
Happy to take in pull requests in case you are willing to contribute your code back to the add-on. Adding support for new sources should be relatively straightforward if you follow the way the other sources and layers work.
Cheers,
Matti
Is it all server side, or do the client widgets need updating also? (My javascript foo is weak!)
Unfortunately some client side work is also required. There is very little javascript magic involved though since the client-side part is mostly GWT.