ZK Openlayers Integration

July 3, 2012 by Jumper Chen | 20 Comments »

ZK Team is pleased to present to our users a preview version of a great, free, and API based ZK Add-on component – Openlayers, which integrates a powerful JavaScript Map library Openlayers.

The current version supports;

13 different layers including Bing, Google, OSM, WMS
13 different controls including MousePositon, OverviewMap, PanZoom, PanZoomBar, Panel, SelectFeature etc.

and others such as Marker, Strategy, Feature and Geometry.

ZK Version

Applicable to ZK 6.0.0+

Video Demo

This demo shows 18 Openlayers map examples which shares the same functionality and API usage as the corresponding JavaScript library. See Openlayers’ Examples

Component Usage

As demonstrated in the video, we have designed Java API based objects to manipulate ZK Openlayers components in the same way as Javascript API.

For example:

ZK version:

@Wire
private Openlayers map;

public void doAfterCompose(Window comp) throws Exception {
    super.doAfterCompose(comp);

    Layer shaded = new VirtualEarth("Shaded", toMap(
            pair("type", VirtualEarth.Type.SHADED)));

    Layer hybrid = new VirtualEarth("Hybrid", toMap(
            pair("type", VirtualEarth.Type.HYBRID)));

    Layer aerial = new VirtualEarth("Aerial", toMap(
            pair("type", VirtualEarth.Type.AERIAL)));

    map.addLayers(Arrays.asList(shaded, hybrid, aerial));
    map.addControl(new LayerSwitcher());
    map.setCenter(new LonLat(-110, 45), 3);
}

Javascript library version:

var map;
 
function init(){
    
    map = new OpenLayers.Map("map");

    var shaded = new OpenLayers.Layer.VirtualEarth("Shaded", {
        type: VEMapStyle.Shaded
    });
    var hybrid = new OpenLayers.Layer.VirtualEarth("Hybrid", {
        type: VEMapStyle.Hybrid
    });
    var aerial = new OpenLayers.Layer.VirtualEarth("Aerial", {
        type: VEMapStyle.Aerial
    });

    map.addLayers([shaded, hybrid, aerial]);
    map.addControl(new OpenLayers.Control.LayerSwitcher());
    map.setCenter(new OpenLayers.LonLat(-110, 45), 3);
}

As you can see, we instantiate a Layer Java object with its required options, which has the same options from JavaScript’s library, and specify into the map variable, ZK component, to display a Bing Map example in this case.

Note: toMap and pair methods come from a utility Java class, org.zkoss.openlayers.util.Helper in order to generate Map objects easier and more JavaScript-like.

For more examples, please refer to the demo source code of the ZK Openlayers project.

Summary

The current ZK Openlayers project is on bleeding edge, and aims to fully integrate with all of Openlayers functions into this component. So we are more than happy to hear if you are interested in contributing to this component, please fork the project on github, and then pull your changes back to this project.

Resource

Download runnable example here.
Visit the project home here.

If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.

Tags: Ajax, Java, javascript, Map Library, Openlayers, ZK 6, ZK Addon

20 Responses to “ZK Openlayers Integration”

Guito says:

07/10/2012 at 10:28

Hi, been looking at this and sounds really promising. Are you planning to add support for callback events such as clicking on a marker can be read in Java?

Also been trying to implement a simple popup example such as http://openlayers.org/dev/examples/light-basic.html but without success. Any hints?
Jumper Chen says:

07/13/2012 at 03:23

Hi Guito,

The callback events will be implemented in the future, when the project is official release.

About the popup example, the current preview version is not supported yet.

Regards,
Jumper
Diego says:

07/16/2012 at 08:17

how to import this project in Netbeans IDE? do not understand how to add openlayers.js
Jumper Chen says:

07/17/2012 at 03:29

I think you can import the eclipse’s project from Netbeans, and you don’t need to add the openlayers.js by yourself while using this component.

Regards,
Jumper
Diego says:

07/17/2012 at 09:26

jumper, I have this error
org.zkoss.zk.ui.metainfo.DefinitionNotFoundException: file :/ C :/ Users…mple / multimap-mercator.zul: 4:54: Component definition not found: openlayers in [LanguageDefinition: xul / html].
how resolve this error?
Jumper Chen says:

07/19/2012 at 07:07

Hi Diego,

It looks like the Openlayers project or the lang-addon.xml is not in your classpath.
Diego says:

08/15/2012 at 05:20

Hi Jumper .When import the project in eclipse,take me as a project and not as a javaproyect and not Zul proyect.
Follow the 3 simple steps that I read in the readme but I can not run it because I asked for a main.
are missing something?
Jumper Chen says:

08/15/2012 at 19:07

Hi Diego, have you installed the m2e (maven project for eclipse) plugin?
Francesco D'Amore says:

10/05/2012 at 02:41

Perfect…… this component is missing for many GIS comunity. Thank you.
Fernando says:

11/06/2012 at 04:57

Hi, took several attempts and I can not run the component, I use netbeans, you can put together a very simple example so I can get started

as always thank you for your cooperation
ft.dev says:

11/20/2012 at 09:35

Hi,
I have a project in which I would like to use OpenLayers but I am afraid of using your preview version.
So when the official version will be released ?

I am new to ZK. is it possible to use javascript library directly to ZK ?
(for exemple using OpenLayers but with its javascript code)
CodeWarrior says:

12/03/2012 at 14:52

Hi Jumperchen,

THIS is exactly what I was looking for….. It works like a charme……
Only one question…….
if I want to obtain a LonLat from an onClick event (Click on Map)

How could I do that ?????

Is there a release date yet ?

Patrick
CodeWarrior says:

12/03/2012 at 16:38

Exactly what I was looking for…….

works like a charme…….
could you provide me with an example how to obtain the
LatLon when clicking the Map?

It fires the onClick Event but then I have no Idea how to obtain the LatLon

map.addEventListener(“onClick”, new EventListener() {

public void onEvent(Event arg0) throws Exception {
// Messagebox.show(((Openlayers)arg0.getTarget()));
Messagebox.show(arg0.getName()+”|”+arg0.getData()+”|”+arg0.getPage());
System.out.println( ((MousePosition)((Openlayers)arg0.getTarget()).getControl(__mouseUUID)).toClientWidget().toJSONString());

String cUID = ((Openlayers)arg0.getTarget()).getUuid();

};

});

THANKS
Vlad says:

01/05/2013 at 11:14

Good project! But no any activity a half of a year… when we can see the new version with callback events?
Fernando says:

03/12/2013 at 08:46

Hey, great job congratulations.
Eh one built from geoserver (WMS plane) which has many Feature Type. I’m trying to get me to click feature CTITULAR value, not how, anyone can help me please

WMS wms_muni4 = new WMS(
“muni5″, “http://localhost:8085/geoserver/municipalidad/wms?”,
toMap(pair(“layers”, “municipalidad:Parcelas”),
pair(“opacity”, 0.7),
pair(“transparent”, true),
pair(“featureType”, “CTITULAR”),
pair(“isBaseLayer”, false)));

map.addLayer(wms_muni4);
fernando says:

03/12/2013 at 08:55

Hey, great job congratulations.
Eh one built from geoserver (WMS plane) which has many Feature Type. I’m trying to get me to click feature CTITULAR value, not how, anyone can help me please.
PD: in openlayers exiting OpenLayers.Control.WMSGetFeatureInfo

WMS wms_muni4 = new WMS(
“muni5″, “http://localhost:8085/geoserver/municipalidad/wms?”,
toMap(pair(“layers”, “municipalidad:Parcelas”),
pair(“opacity”, 0.7),
pair(“transparent”, true),
pair(“featureType”, “CTITULAR”),
pair(“isBaseLayer”, false)));

map.addLayer(wms_muni4);
Fernando says:

03/18/2013 at 15:18

help please!!!!
Monomamerto says:

04/23/2013 at 19:05

Is it possible to move a vector in a layer?. thanks. Mono
Patrick says:

04/24/2013 at 09:24

Is there any progress ?

It would be so nice having this feature.
Jumper Chen says:

04/25/2013 at 19:52

Hi All,

Please post the issue and feature to the issue tracker – https://github.com/zkoss/openlayers/issues

And we can follow them and discuss there.

CALENDAR