OpenLayers 3 Wrapper for Vaadin

Flow
61

Hi Matti,

thank you for your help so far.

I am looking for the “marker layer functionality” - icon + html popup, realized in OpenLayers3 with vector layer and features and popover. An example or hint would be very helpful.

Regards,
Wolf

62

You are right! Thank you for spotting the bug. Fixed now in the master branch and will be released in the next version (today).

https://github.com/VOL3/v-ol3/issues/53

Cheers,
Matti

63

Hello Wolf,

There is not really advanced features to implement things like that but I added today the basic support. Please have a look at

https://github.com/VOL3/v-ol3/blob/master/v-ol3/src/test/java/org/vaadin/addon/vol3/demoandtestapp/IconFeatureMap.java

And upgrade to the latest version of the add-on.

Cheers,
Matti

64

Hello Wolf,

With the latest version, you can display basic html popovers (overlays) on specified map coordinates. Combine that with map click listeners or feature selection listeners (OLSelectInteraction) and you should be good to go. Basic example available in
https://github.com/VOL3/v-ol3/blob/master/v-ol3/src/test/java/org/vaadin/addon/vol3/demoandtestapp/IconFeatureMap.java

The limitation is that the popovers contain only raw html. Unfortunately no Vaadin components supported in there.

Cheers,
Matti

65

Should be fixed now in the latest version. Thanks for the bug report, Jose.

Regards,
Matti

66

Hello Matti,
thank you, this is a very good basic solution!
Cheers,
Wolf

67

Hi Matti,

Sorry if this is a trivial question; I’m struggling to work out how to set the centre of the view to a Wgs84 coordinate. I’m not sure what the default coordinate system is that’s underlying the map, nor how to map Wgs84 coords into it.

Is this easy?

Thanks,
Joe

68

Hi Matti,

Current way of initializing map in OLMapConnector makes it hard for creating Map extension. This is due to client Map is created only when ConnectorHierarchy is changed. e.g. Adding some overlay like OverviewMap in the map extension. Map is not initialized (until ConnectorHierarchy is changed) and adding any control to Map fails. I suggest to initialize the client map during connector initialization.

@Connect(MapExtension.class)
public class MapExtensionConnector extends AbstractExtensionConnector {
    
    @Override protected void extend(ServerConnector target) {
        OLMapConnector olMapConnector = (OLMapConnector)target;
        final MapWidget widget = olMapConnector.getWidget();
       
        // Approach 1: Fails with Javascript errors of map being undefined
        Map map = widget.getMap(); 
        map.addControl(OverviewMap.create(extent, URL, layer)); 

        // Approach 2: No Javascript error but overviewmap shows nothing but DIV element, no map
        olMapConnector.addConnectorHierarchyChangeHandler(new ConnectorHierarchyChangeEvent.ConnectorHierarchyChangeHandler() {
            public void onConnectorHierarchyChange(ConnectorHierarchyChangeEvent connectorHierarchyChangeEvent) {
                Map map = widget.getMap();
                map.addControl(OverviewMap.create(extent, URL, layer));
            }
        });
    }
}
69

Hello Josef,

Try to create your view like this:

OLViewOptions opts=new OLViewOptions();
opts.setInputProjection(Projections.EPSG4326);
OLView view=new OLView(opts);

Cheers,
Matti

70

Hello Anant,

The reason I defer the map initialization to connectionhierarchy change is that the state information is not available in the connector init. But I could add an initialization hook to the connector to make extending the wrapper a bit easier. I don’t see directly why the Approach 2 would fail though.

-Matti

71

Does your overview map work if added to the map afterwards? I mean attaching the extension in response to a button click for instance?

-Matti

72

Anyway, I added the initalization hook. Feel free to try version 1.0.3 and check if that works for you.

Regards,
Matti

73

Ahha, that’s the ticket. Thanks Matti.

If I want to change the view position manually after the map has been displayed, how do I do that?

I’ve tried:

    map.view.setCenter(new OLCoordinate((box.east + box.west) / 2.0, (box.north + box.south) / 2.0))

where my box coordinates are Wgs84, but the map doesn’t scroll to the new centre when I do that. (I’m doing it in a different thread, so I don’t know if that’s a problem…) Is there something I need to call to get the client to sync with the server model?

Joe

74

It looks like roughly the coordinate is being set, but there is an offset which suggests that the OL3 view isn’t quite Wgs84. (My box is coming from a BBOX param in a Google Earth request - what I’m trying to do is to use Google Earth as a remote control for my Vaadin app, so that the OL3 map view tracks the Google Earth position.)

Joe

75

The different thread is most likely the problem. In any Vaadin application, if you do any UI changes in a separate background thread, you should do the modifications inside UI.access and have push enabled.

Cheers,
Matti

76

Good; I thought that might be the case - I’ll investigate how to do that.

With respect to the coodinate issue, (I’m sorry - I’m still in a bit of a confused state about coordiante transformations).

Using:

 OLViewOptions opt = new OLViewOptions();
 opt.setInputProjection(Projections.EPSG4326);

Is EPSG4326 exactly equivalent to Wgs84, and does that control the output projection too?

I suppose that part of the problem may be that I have a bounding box (west, east, north, south) that I’m trying to replicate with the view, and need to map into a centre and zoom (given that the map aspect ration might be different to the input bounding box). However, if I just average the box to get a rough centre [(e+w)/2,(n+s)/2]
it see appears that the OL3 map centre is roughtly what I expect, but it’s off by upward of a whole bounding box size. So, I’m wondering whether I also need to set a ‘OutputProjection’ so that I can set the view centre in exactly WSG84 as well.

Am I confused?

Cheers Matti! :slight_smile:
Joe

77
78

Hunting around on google, I came across the following reference to OpenLayers and OpenStreetMap:


http://wiki.openstreetmap.org/wiki/OpenLayers_Simple_Example

var fromProj  ection = new OpenLayers.Projection("EPSG:4326"); // transform from WGS 1984
var toProjection = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
var extent = new OpenLayers.Bounds(-1.32,51.71,-1.18,51.80).transform(fromProjection,toProjection);

function init() {
  var options = {};
  map = new OpenLayers.Map("Map", options);
  var newLayer = new OpenLayers.Layer.OSM( "New Layer", "URL_TO_TILES/${z}/${x}/${y}.png", {zoomOffset: 13, resolutions: [19.1092570678711,9.55462853393555,4.77731426696777,2.38865713348389]
} );
  map.addLayer(newLayer);
  map.setCenter(new OpenLayers.LonLat(-1.25,51.75).transform(fromProjection,toProjection), 0); // 0=relative zoom level }
}

This suggests that there’s a different approach, other than using EPSG4326; I’m not sure how to replicate that in OL3. Do I need to use an external library to do the conversion? Or, have I missed the LonLat interface in OL3?

79

Ok, it looks like it is working! My OL3 component was larger than the browser window and so the centre point wasn’t where I was expecting it to be! Looks like setting the centre on the EPSG4326 view, as previously recommended, is working just fine.

I’m still struggling to work out how to get the OL3 component view box in Wgs84 coordinates though. Getting the centre is ok, but how do I transform that and the zoom parameter into pair of coordinates which express the size of the view port in the browser in map coords?

I want to do a database search for the view port box, and then populate the map component with features from that database search.

Sorry I’m being so needy - I’m still on a learning curve!

Many thanks for your help so far!
Cheers,
Joe

80

I am by no means a GIS expert but as far as I know EPSG4326 is a projection based on Wgs84. If you are showing a map on a flat screen, you are doing some type of a projection anyways. So EPSG4326 is based on WGS84 but is not the same thing.

Also there is no OutputProjection option. The input projection should handle conversion from api calls to map coordinate system and back. If you want to focus to a bounding box, why not just use view.fitExtent api instead of view.setCenter?

Finally, I would guess the problems you are hitting are related to projections. I would suggest that you do some more research related to projections the google earth uses and then to the projection your map source uses. As said, I am no GIS expert so really can not help you there much further. Maybe other members of the community know better?

Anyone in the forum reading this, feel free to take over if you have done something like this before.

Regards,
Matti