OpenLayers 3 Wrapper for Vaadin

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

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

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

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

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

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

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.