OpenLayers 3 Wrapper for Vaadin

[mhosio (Matti Hosio)]

@Josef Karthauser

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?

That is exactly what the input projection should do. Transforms your center point from given input projection to the map projection. I’d suggest to find out the real coordinates and projections you are dealing with. What is the projection used by your map source?

-Matti

[mhosio (Matti Hosio)]

@Josef Karthauser

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

Maybe it would be more simple to just add viewChangeListener to your view and react to the extentChanged callback. That should give you the coordinates in your input projection format (EPSG426 aka wgs84)

Regards,
Matti

[Jose137 (Jose Luis)]

Hi Matti,
Thank you for fixing it.

[Josef33 (Josef Karthauser)]

@Matti Hosio

@Josef Karthauser

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?

Maybe it would be more simple to just add viewChangeListener to your view and react to the extentChanged callback. That should give you the coordinates in your input projection format (EPSG426 aka wgs84)

Regards,
Matti

Ahha. I thought that the extend was just to restrict the pan of the map. You’re right! Listening to changes in the extent are returning exactly the coordinates that I’m looking for.

I also found that I could fit the view to a bounding box by using:

map.view.fitExtent(new OLExtent(new OLCoordinate(box.west, box.north), new OLCoordinate(box.east, box.south)))

Perfect.

Thanks Matti.

[Josef33 (Josef Karthauser)]

Next challenge. How do I go about sizing an OLMap component? Whatever I do I can’t get it to do anything other than take the size according to the size of the browser window, rather than fit within the enclosing component.

Again, am I doing anything wrong here?

[code]
Layout applicationPanel = new VerticalSplitPanel();
applicationPanel.setSizeFull();
setContent(applicationPanel);

applicationPanel.firstComponent = new MyOLMap();
[/code]This sets up a split panel with the top and bottom taking 50% of the display each.

The map, in the top split, however, is not sized within the bounds of that split. When I drag the split panel separate it reveals that the map is actually full screen sized, and only the top half was showing.

I’ve tried paying around with setting the height and width on the OLMap object, but nothing appears to change the behaviour.

Is this a feature of OpenLayers? How do I go about making the map change aspect ratio as the containing component proportions change?

Thanks,
Joe

p.s. sorry for all the questions - I hope you’re not getting bored of them!

[Anant2 (Anant Jagania)]

@Matti Hosio

@Matti Hosio

@Matti Hosio

@Anant Jagania

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));
            }
        });
    }
}

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

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

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

Regards,
Matti

Thanks Matti,

New MapInitialize listener and approach 2 both adds the Overview map but its not loaded initially. Only when I collapse and uncollapse, it renders map in it. I haven’t tried loading on Button click as I am creating only Javascript Overview map.

[Josef33 (Josef Karthauser)]

@Matti Hosio

@Josef Karthauser

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?

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.

I forgot to report that @Push and using UI.access did the trick perfectly. Thanks :).

Joe

[Josef33 (Josef Karthauser)]

@Josef Karthauser

Next challenge. How do I go about sizing an OLMap component? Whatever I do I can’t get it to do anything other than take the size according to the size of the browser window, rather than fit within the enclosing component.

Again, am I doing anything wrong here?

Layout applicationPanel = new VerticalSplitPanel();
applicationPanel.setSizeFull();
setContent(applicationPanel);

applicationPanel.firstComponent = new MyOLMap();

Ok, sorry. It was a total school boy error. Although I was setting applicationPanel to fullSize, I wasn’t setting ‘this’ to fullSize - hence the strange layout behaviour.

Works nicely now. Sorry for the noise.

Layout applicationPanel = new VerticalSplitPanel();
applicationPanel.setSizeFull();
setContent(applicationPanel);
[b]
this.setFullSize();
[/b]

applicationPanel.firstComponent = new MyOLMap();
applicationPalen.firstComponent.setFullSize();

[Josef33 (Josef Karthauser)]

Have I found an OLModifyInteraction bug, or is it a feature?

If I add some features, and then set one of them to have a modification interaction on it, when I add additional features they become editable, even though I didn’t set an interaction. Is that to be expected?

vectorSource.addFeature(feature1)
vectorSource.addFeature(feature2)
map.addInteraction(new OLModifyInteraction(layer, new OLModifyInteractionOptions(), feature2))
vectorSource.addFeature(feature3)

After this, feature1 is no editable, but both feature2 and feature3 are editable. If I take a look at map.getInteractions() I don’t see any additional interactions defined, only the one on feature2.

This is with open layers 1.0.2.

Is this a known issue, or an issue with open layers itself? Is there a workaround?

Thanks,
Joe

[Josef33 (Josef Karthauser)]

@Josef Karthauser

Have I found an OLModifyInteraction bug, or is it a feature?

vectorSource.addFeature(feature1)
vectorSource.addFeature(feature2)
map.addInteraction(new OLModifyInteraction(layer, new OLModifyInteractionOptions(), feature2))
vectorSource.addFeature(feature3)

After this, feature1 is no editable, but both feature2 and feature3 are editable. If I take a look at map.getInteractions() I don’t see any additional interactions defined, only the one on feature2.

Ahha! Found it. There is a bug, but it’s ticked by my bug. What I actually had was:

vectorSource.addFeature(feature1) vectorSource.addFeature(feature2) map.addInteraction(new OLModifyInteraction(layer, new OLModifyInteractionOptions(), feature2)) vectorSource.removeFeatureById(feature2.id) vectorSource.addFeature(feature3) i.e. I inadvertantly was removing my feature, for which there was an interaction defined. That’s what caused the error.

It’s interesting to understand what’s going on here though. So, is probably a feature, not a bug, but I would have thought that the interaction ought to have been removed by the code when the feature was… that might be a good refinement to make.

[Josef33 (Josef Karthauser)]

@Josef Karthauser

@Josef Karthauser

Have I found an OLModifyInteraction bug, or is it a feature?

vectorSource.addFeature(feature1)
vectorSource.addFeature(feature2)
map.addInteraction(new OLModifyInteraction(layer, new OLModifyInteractionOptions(), feature2))
vectorSource.addFeature(feature3)

After this, feature1 is no editable, but both feature2 and feature3 are editable. If I take a look at map.getInteractions() I don’t see any additional interactions defined, only the one on feature2.

Ok, no, I was right the first time. There does appear to be a bug.

After the following interactions on a vector source:

vectorSource.addFeature(feature1)
vectorSource.addFeature(feature2)
map.addInteraction(new OLModifyInteraction(layer, new OLModifyInteractionOptions(), feature2))
vectorSource.addFeature(feature3)

I find that feature1 is not editable, and feature2 is editable. However, feature3 is also editable.

[Josef33 (Josef Karthauser)]

@Josef Karthauser

Ok, no, I was right the first time. There does appear to be a bug.

After the following interactions on a vector source:

vectorSource.addFeature(feature1)
vectorSource.addFeature(feature2)
map.addInteraction(new OLModifyInteraction(layer, new OLModifyInteractionOptions(), feature2))
vectorSource.addFeature(feature3)

I find that feature1 is not editable, and feature2 is editable. However, feature3 is also editable.

Looks like a bug/feature in OLModifyInteractionConnector.java; it’s when new features are added to the layer they are being added to the interaction, which is the wrong thing to do if the features were already restricted.

I’ll post a fix on github.

[Hilco1 (Hilco Kats)]

Don’t know if this is the right place to write this, but I noticed a bug in OLPoint. The methods getLongitude() and getLatitude() both return the point’s x-coordinate. Fortunately I can work around this by just using getX() and getY(), but still it would need a fix…

[Deleted691 (Deleted User)]

Hi, I have a problem I cant figure out.
I have a SplitPanel (or a Vertical/HorizontalPanel) in which I add a Map and a Combobox. Everytime i type something in the combox the map “moves down” or the margin to the top gets bigger (there even appears a scroll bar next to the map).

Here is the buildLayout method of my View:

[code]
private void buildLayout() {
OLMap olMap = new OLMap();
OLSource olsource = new OLMapQuestSource(OLMapQuestLayerName.OSM);
OLTileLayer olTileLayer = new OLTileLayer(olsource);
olMap.addLayer(olTileLayer);

OLViewOptions options=new OLViewOptions();
OLView olview=new OLView(options);
olview.setZoom(1);
olview.setCenter(0, 0);

olMap.setView(olview);

VerticalSplitPanel splitPanel = new VerticalSplitPanel();
splitPanel.setFirstComponent(olMap);
splitPanel.setSecondComponent(new ComboBox(“test”));
splitPanel.setSplitPosition(80,Unit.PERCENTAGE);

this.addComponent(splitPanel);

this.setSizeFull();
}
[/code]Maybe this is a common issue and is not related to v-ol.

I am using:
vaadin version: 7.5.10
v-ol3 verison: 1.0.3
and valo theme (if it matters).

Thanks in advance,
Andreas

[Michael266 (Michael Hofmann)]

Dear Matti

First, it’s really a great Add-on!!! (We’re currently using version 0.1.7 with Vaadin 7.5.5).

Now we’re testing vaadin 7.6.1 and get the following exception (full stack trace is attached):

Error sending hierarchy change eventscom.google.gwt.event.shared.UmbrellaException: Exception caught: (TypeError) : Cannot read property 'nullMethod' of null I guess it’s is because the Add-on is not compatible yet with vaadin 7.6.1??? (Or do you have an idea what the problem on “our” side could be?).

We’re using:

• vaadin-client-7.6.1.jar
• v-ol3-1.0.3
• gwt-ol3-1.0.3
• ContextMenu-4.5.0
  

Kind regards,
Michael
22658.txt (6.36 KB)

[mhosio (Matti Hosio)]

Hello Michael,

Thank you for letting me know. Most likely a compatibility issue with 7.6. I’ll have a look and address the issue in next version. Unfortunately I am very busy with some other projects at the moment so probably can not promise the next release before the end of this month. Is this a blocker for you?

Regards,
Matti

[Michael266 (Michael Hofmann)]

Thanks a lot for the fast response! If time permits it would be great otherwise we definitely have no problem to ship our product (on 5th Feb.) with vaadin 7.5!

Kind regards,
Michael

[Ievgen3 (Ievgen Anikushyn)]

Hi, Matti!

You’ve done a great job, addon is really good. I’m interesting in one thing, could it be possible to use a static image like a map, I mean any static image, smth like here http://openlayers.org/en/v3.2.0/examples/static-image.html.

Thanks in advance.

[Ievgen3 (Ievgen Anikushyn)]

Any thoughts on this?

[mhosio (Matti Hosio)]

@Ievgen Anikushyn

Hi, Matti!

You’ve done a great job, addon is really good. I’m interesting in one thing, could it be possible to use a static image like a map, I mean any static image, smth like here http://openlayers.org/en/v3.2.0/examples/static-image.html.

Thanks in advance.

Hello Ievgen,

Thank you! Currently there is no support for static image source in the add-on. Also the supported projections are the ones that are supported by proj4js. So at the moment this is not possible with the add-on. On the other hand, there is nothing that would make it impossible to implement such features. I will add issues for adding support for those in github and try to address that in a future release. Can not promise any time schedule at this point, though.

Cheers,
Matti