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

Get Adobe Flash player

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:

private Openlayers map;

public void doAfterCompose(Window comp) throws Exception {

    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.


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.


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

25 Responses to “ZK Openlayers Integration”

  1. Guito says:

    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?

  2. Jumper Chen says:

    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.


  3. Diego says:

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

  4. Jumper Chen says:

    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.


  5. Diego says:

    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?

  6. Jumper Chen says:

    Hi Diego,

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

  7. Diego says:

    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?

  8. Jumper Chen says:

    Hi Diego, have you installed the m2e (maven project for eclipse) plugin?

  9. Francesco D'Amore says:

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

  10. Fernando says:

    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

  11. ft.dev says:

    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)

  12. CodeWarrior says:

    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 ?


  13. CodeWarrior says:

    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()));
    System.out.println( ((MousePosition)((Openlayers)arg0.getTarget()).getControl(__mouseUUID)).toClientWidget().toJSONString());

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




  14. Vlad says:

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

  15. Fernando says:

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


  16. fernando says:

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


  17. Fernando says:

    help please!!!!

  18. Monomamerto says:

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

  19. Patrick says:

    Is there any progress ?

    It would be so nice having this feature.

  20. Jumper Chen says:

    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.

  21. Fernando says:

    Is there any other way to obtain a characteristic of a layer may not be from WMS and have to use another type of layer. Someone could help me.

  22. Rodrigo says:

    I want to obtain onClick event to a Vector in a vectorLayer. Any suggestions?

  23. Miguel says:

    I have the same problem when trying to load an attribute of a layer with WMS GetFeatureInfo. Is there any solution for this issue?

  24. ismail says:

    I couldn’t download the file, links are broken please help

  25. Daniel Alzate says:

    Hello …

    May anybody help me to find out the way to do animated zoom on the map ?

    I was able to animate the pan with:

    map.setOptions(toMap(pair(“panTween”, “OpenLayers.Easing.Expo.easeOut”)));
    map.setOptions(toMap(pair(“panDuration”, “500″)));

    I applied those rules to zoomTween and zoomDuration but it seem not to work


Leave a Reply