OpenLayers 3 Wrapper for Vaadin

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: 

1. 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.

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,
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

 

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

Glad that you got that fixed.

-Matti
 

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,
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 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.