[OpenLayers-Users] mapfish - openlayers - extjs - jquery usage problems

[Pierre GIRAUD]

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