[OpenLayers-Users] OpenLayers 2.2 breaks with jQuery

Tue Nov 21 20:15:29 EST 2006

Hi list,

While with version 2.1 of OpenLayers there was no problem to use both 
OpenLayers' Prototype and jQuery javascript framework, it doesn't work 
anymore with version 2.2.

Firebug error message:
"this.div.appendChild is not a function" in Map.js (line 136):
this.div.appendChild(this.viewPortDiv);

I followed the jQuery guide how to run jQuery together with Prototype 
library (http://jquery.com/docs/PrototypeAndJQuery/)

I tested with the Wiki example:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="jp" lang="jp">
<head>
  <meta http-equiv="Content-type"  content="text/html; charset=UTF-8" />
  <title>OpenLayers Demo</title>

  <!-- jQuery -->
  <script type="text/javascript" 
src="http://jquery.com/src/jquery-latest.pack.js"></script>
  <script type="text/javascript">
    JQ = $;  // rename $ function to use jQuery together with Prototype
  </script>

  <!-- OpenLayers -->
  <script type="text/javascript" src="./2.2/lib/OpenLayers.js"></script>
</head>

<body>
  <div id="map" style="width:100%;height:100%;"></div>
  <script defer="defer" type="text/javascript">
    var map = new OpenLayers.Map('map');
    var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
        "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
    map.addLayer(wms);
    map.zoomToMaxExtent();
  </script>
</body>

Would be nice somebody knows a solution how to use both, OpenLayers and 
jQuery.

Daniel