[OpenLayers-Users] mapfish - openlayers - extjs - jquery usage
problems
Fabio D'Ovidio
fabiodovidio at gmail.com
Thu Mar 12 19:48:04 EDT 2009
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 <bluecarto at gmail.com>
> 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 <fabiodovidio at gmail.com>
> 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: fabiodovidio at gmail.com
> >
> > _______________________________________________
> > Users mailing list
> > Users at openlayers.org
> > http://openlayers.org/mailman/listinfo/users
> >
>
>
>
> --
> Pierre GIRAUD
> http://www.camptocamp.com
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.osgeo.org/pipermail/openlayers-users/attachments/20090313/2d1292ec/attachment.html
More information about the Users
mailing list