Hello Pierre, yes sure, we tryied! Unfortunately the problem was related to ExtJs and Mozilla Firefox 3, not to $ function. Anyway what you indicate remains the only solution for using OpenLayers and jQuery library together (unless you want to change the name of $ function in OL or in jQuery). Thank you very much!
Fabio D'Ovidio 2009/3/12 Pierre GIRAUD <[email protected]> > Hi Fabio, > > This might be stupid but did you try the following ? > > var map = new OpenLayers.Map('map'); > > OpenLayers.Map constructor can be given either a DOM Element or the id > of a DOM Element. > > Hope this helps, > Pierre > > > On Wed, Mar 11, 2009 at 5:46 PM, Fabio D'Ovidio <[email protected]> > wrote: > > Hello, > > in order to use jquery library toghether with mapfish client i try to > > summarize the problems related to: > > > > * $ function definition in OpenLayers > > * Extjs usage with jquery > > > > OpenLayers uses part of prototype library (without include it) in the > > following files: > > > > * Util.js > > * Ajax.js > > * Events.js > > * Calss.js > > > > In particular in Util.js $ function is defined as following: > > /** > > * Maintain $() from prototype > > */ > > if ($ == null) { > > var $ = OpenLayers.Util.getElement; > > } > > > > jQuery library also define a $ function as: $ = jQuery > > > > Than, jQuery library is shipped with ExtJS, and MapFish ships with > > ExtJS. In particular ExtJS does not load jQuery dynamically, you need to > > include it in your HTML > > with script tags in this order: > > > > 1. jquery.js > > 2. ext-jquery-adapter.js > > 3. ext-all.js (or your choice of files) > > > > Now, my HTML script with script tags is as following: > > > > viewport:null; > > map:null; > > > > // reference local blank image > > Ext.BLANK_IMAGE_URL = > '../../mfbase/ext/resources/images/default/s.gif'; > > > > Ext.onReady(function(){ > > > > var map = new OpenLayers.Map(*$('map')*); > > this.map = map; > > > > var wms = new OpenLayers.Layer.WMS("OpenLayers WMS", > > "http://labs.metacarta.com/wms/vmap0";, {layers: 'basic'}, > > {buffer: 0}); > > > > map.addLayers([wms]); > > map.addControl(new OpenLayers.Control.LayerSwitcher()); > > map.setCenter(new OpenLayers.LonLat(17, 2), 2); > > > > var window = new Ext.Window({ > > title: 'Map', > > width: 500, > > height: 300, > > minWidth: 300, > > minHeight: 200, > > layout: 'fit', > > plain: true, > > bodyStyle: 'padding:5px;', > > items: [{ > > xtype: 'mapcomponent', > > map: map > > }] > > }); > > window.show(); > > > > }); > > > > and obviously I have a div in HTML template to display the map: > > > > <div id="map"></div> > > > > For all these reasons I must solve two problems: > > > > 1. re-name $ function in Util.js > > 2. include js files in the correct way to use mapfish with jQuery > > > > So I try in this way: > > > > 1. I changed Util.js like this: > > > > var jq = OpenLayers.Util.getElement; > > > > and my script become: > > > > viewport:null; > > map:null; > > > > // reference local blank image > > Ext.BLANK_IMAGE_URL = > > '../../mfbase/ext/resources/images/default/s.gif'; > > > > Ext.onReady(function(){ > > > > var map = new OpenLayers.Map(*jq('map')*); > > this.map = map; > > > > var wms = new OpenLayers.Layer.WMS("OpenLayers WMS", > > "http://labs.metacarta.com/wms/vmap0";, {layers: > > 'basic'}, {buffer: 0}); > > > > map.addLayers([wms]); > > map.addControl(new OpenLayers.Control.LayerSwitcher()); > > map.setCenter(new OpenLayers.LonLat(17, 2), 2); > > > > var window = new Ext.Window({ > > title: 'Map', > > width: 500, > > height: 300, > > minWidth: 300, > > minHeight: 200, > > layout: 'fit', > > plain: true, > > bodyStyle: 'padding:5px;', > > items: [{ > > xtype: 'mapcomponent', > > map: map > > }] > > }); > > window.show(); > > > > }); > > > > > > (I tryed also using *jQuery.noConflict();* before my script > > without changing Util.js file) > > > > 2. I included in my script JS files in this order: > > jquery.js,\ > > ext-jquery-adapter.js,\ > > ext-all.js > > > > and the error is: > > "A[C.xtype || D] is not a constructor" > > that deals with ExtJS (maybe on onReady event, I read this post: > > http://extjs.com/forum/showthread.php?t=53502&highlight=onready+onload) > > > > If I don't chage Util.js (or use *jQuery.noConflict() function*) I have > > the following error: > > > > "this.div.appendChild is not a function" > > > > because: > > 1) I load up jQuery, this defines the $ function > > 2) I load OpenLayers, this checks if $ exists, and because it does exist, > > it is not redefined in the OL (prototype) way > > 3) I initialize my map and send it the string 'map' as the first > > argument > > 4) OpenLayers tries to place your map in the DOM element $('map'), but > > because $() is still a jQuery function that doesn't return a DOM element, > > and I get the error about appendChild not being defined! > > > > How can I solve these problems? :-( > > Please, help me if you can :-) > > > > Thank you very much!! > > > > -- > > Fabio D'Ovidio > > Geospatial solutions > > > > INOVA s.r.l. > > Web : http://www.inovaos.it > > Tel.: 081 197 57 600 > > mail: [email protected] > > > > _______________________________________________ > > Users mailing list > > [email protected] > > http://openlayers.org/mailman/listinfo/users > > > > > > -- > Pierre GIRAUD > http://www.camptocamp.com >
_______________________________________________ Users mailing list [email protected] http://openlayers.org/mailman/listinfo/users
