Use 3rd party javascript library (OpenLayers)

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

zkh gravatar image 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",
           {'layers':'basic'} );
    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" />

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

delete flag offensive retag edit

3 Answers

Sort by ยป oldest newest most voted

answered 2014-09-05 20:40:20 +0800

windeyu gravatar image windeyu flag of United States
288 3

Why don't you try the following when creating the Map?

var map = new OpenLayers.Map(zk.Widget.$("$map").uuid);

link publish delete flag offensive edit


That's practicly the same as in my example, but sadly enough, it doesn't work.

zkh ( 2014-09-09 13:04:32 +0800 )edit

answered 2014-09-10 00:10:21 +0800

mat996 gravatar image mat996

Hi, perhaps that your javascript function is never called.

Try to put it into the zk.afterLoad 'event'

<script type="text/javascript" defer="true"><![CDATA[
    zk.afterLoad( function () {

       var mapdiv = document.getElementById(zk.Widget.$("$map").uuid + '');




link publish delete flag offensive edit

answered 2018-09-22 00:31:31 +0800

nazarenomartin83 gravatar image nazarenomartin83

Hi, exist any way to get "Latitude/Longitude" from map or the marker clicked by user? Thanks.

link publish delete flag offensive edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools




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

Seen: 25 times

Last updated: Sep 22 '18

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More