Use 3rd party javascript library (OpenLayers)

asked 2014-09-05 13:20:12 +0800

zkh
22 ● 2

I'd like to add a http://openlayers.org/ (OpenLayers) map to my zul page and if access some data in my viewmodel with it. This using javascript. I'm aware that there is a zk openlayers component. Since it's dead since 2012 and doesn't allow me to draw on the map using javascript, I'm not willing to use it.

So far I've got the following:

    <?xml version="1.0" encoding="UTF-8"?>
    <?taglib uri="http://security/util" prefix="sec" ?>
    <?script src="openlayers.js" ?> <!-- The Openlayers js library, placed in the same folder as my zul page -->
    <zk xmlns="http://www.zkoss.org/2005/zul" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:n="http://www.zkoss.org/2005/zk/native" xmlns:h="http://www.w3.org/1999/xhtml" xsi:schemaLocation="http://www.zkoss.org/2005/zul http://www.zkoss.org/2005/zul/zul.xsd">
   <script type="text/javascript" defer="true"><![CDATA[     
    var mapdiv = document.getElementById(zk.Widget.$("$map").uuid + '');
    var map = new OpenLayers.Map(mapdiv);
    var wms = new OpenLayers.Layer.WMS(
           "OpenLayers WMS",
           "http://vmap0.tiles.osgeo.org/wms/vmap0",
           {'layers':'basic'} );
    map.addLayer(wms);
    map.zoomToMaxExtent();
    window.alert("MAP: " + map);]]></script>

      <window id="mainWin" apply="org.zkoss.bind.BindComposer" viewModel="@id('vm') @init('pathtomyVM')">
          <div id="map" width="800px" height="600px" />
      </window>
    </zk>

I've placed the openlayers.js library file in the same folder as my zul page. But this doesn't result in any output on the rendered page. Can somebody guide me through this?

Thanks, Zkh