Re: [OpenLayers-Users] problems with loading speed

[Michael]

Andreas, your performance tips page,

http://ol-performance.appspot.com/,

is splendid!

Michael


On 9/16/2011 8:35 AM, Andreas Hocevar wrote:

Hi,

having 22 layers on the map not only results in slow loading, but also in slow 
dragging performance, expecially if these layers are tiled layers. Just imagine 
the number of DOM elements the browser's rendering engine has to reposition 
while drawing. As already suggested by others, it does make sense to combine 
layers when they come from the same server. In the case of WMS, this can easily 
be done by configure the layers param with a list of layers instead of a single 
one, e.g.

new OpenLayers.Layer.WMS("my layer", "http://my/url";, {layers: ["a","b","c"]});

instead of

new OpenLayers.Layer.WMS("my layer", "http://my/url";, {layers: "a"});
new OpenLayers.Layer.WMS("my layer", "http://my/url";, {layers: "b"});
new OpenLayers.Layer.WMS("my layer", "http://my/url";, {layers: "c"});

You can also look at http://ol-performance.appspot.com/, which covers this and 
other performance improvement tips.

Andreas.

On Sep 16, 2011, at 07:47 , boho wrote:

hi ...
I have 22 layers to be displayed with OpenLayers wms service.
All layers have been displayed properly by the browser, but for loading, the
browser takes a very long time, about almost 3 minutes ...

the question then becomes, is there a way to speed up loading the browser
with OpenLayers?

My code looks like this:

function init(){
                
                
                var lon = 99.09668;
                var lat = 2.890000;
                var zoom = 14;
                
                var map = new OpenLayers.Map('map',{ controls: [] });
                var myStyles = new OpenLayers.StyleMap({
                "default": new OpenLayers.Style({
                    pointRadius: "${type}", // sized according to type
attribute
                    fillColor: "#ffcc66",
                    strokeColor: "#ff9933",
                    strokeWidth: 2,
                    graphicZIndex: 1
                }),
                "select": new OpenLayers.Style({
                    fillColor: "#66ccff",
                    strokeColor: "#3399ff",
                    graphicZIndex: 2
                })
            });

                
                var layer = new
OpenLayers.Layer.WMS('Batas_Kab_region','http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/Apache/htdocs/petaPAD/batasKab.map&;;',{layers:'Batas_Kab_region',transparent:true,
format: 'image/gif'}, {isBaseLayer: true});
                
                var KEC = new
OpenLayers.Layer.WMS('KEC','http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/Apache/htdocs/petaPAD/batasKab.map&;;',{layers:'KEC',transparent:true,
format: 'image/gif'}, {isBaseLayer: false});
                var BANK = new
OpenLayers.Layer.WMS('BANK','http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/Apache/htdocs/petaPAD/batasKab.map&;;',{layers:'BANK',transparent:true,
format: 'image/gif'}, {isBaseLayer: false});
                
                var FASILITAS_IBADAH = new
OpenLayers.Layer.WMS('FASILITAS_IBADAH','http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/Apache/htdocs/petaPAD/batasKab.map&;;',{layers:'FASILITAS_IBADAH',transparent:true,
format: 'image/gif'}, {isBaseLayer: false});
                
                var FASILITAS_LAINNYA = new
OpenLayers.Layer.WMS('FASILITAS_LAINNYA','http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/Apache/htdocs/petaPAD/batasKab.map&;;',{layers:'FASILITAS_LAINNYA',transparent:true,
format: 'image/gif'}, {isBaseLayer: false});
                
                var FASILITAS_PENDIDIKAN = new
OpenLayers.Layer.WMS('FASILITAS_PENDIDIKAN','http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/Apache/htdocs/petaPAD/batasKab.map&;;',{layers:'FASILITAS_PENDIDIKAN',transparent:true,
format: 'image/gif'}, {isBaseLayer: false});
                
                var Jembatan = new
OpenLayers.Layer.WMS('Jembatan','http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/Apache/htdocs/petaPAD/batasKab.map&;;',{layers:'Jembatan',transparent:true,
format: 'image/gif'}, {isBaseLayer: false});
                
                var KANTOR_CAMAT = new
OpenLayers.Layer.WMS('KANTOR_CAMAT','http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/Apache/htdocs/petaPAD/batasKab.map&;;',{layers:'KANTOR_CAMAT',transparent:true,
format: 'image/gif'}, {isBaseLayer: false});
                
                var KANTOR_LURAH = new
OpenLayers.Layer.WMS('KANTOR_LURAH','http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/Apache/htdocs/petaPAD/batasKab.map&;;',{layers:'KANTOR_LURAH',transparent:true,
format: 'image/gif'}, {isBaseLayer: false});
                
                var KANTOR_WALIKOTA_PEMATANGSIANTAR = new
OpenLayers.Layer.WMS('KANTOR_WALIKOTA_PEMATANGSIANTAR','http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/Apache/htdocs/petaPAD/batasKab.map&;;',{layers:'KANTOR_WALIKOTA_PEMATANGSIANTAR',transparent:true,
format: 'image/gif'}, {isBaseLayer: false});
                
                var Kel_Siantar = new
OpenLayers.Layer.WMS('Kel_Siantar','http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/Apache/htdocs/petaPAD/batasKab.map&;;',{layers:'Kel_Siantar',transparent:true,
format: 'image/gif'}, {isBaseLayer: false});
                
                var KOTA_PEMATANGSIANTAR = new
OpenLayers.Layer.WMS('KOTA_PEMATANGSIANTAR','http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/Apache/htdocs/petaPAD/batasKab.map&;;',{layers:'KOTA_PEMATANGSIANTAR',transparent:true,
format: 'image/gif'}, {isBaseLayer: false});
                
                var KTR_PEMERINTAHANPOLISI = new
OpenLayers.Layer.WMS('KTR_PEMERINTAHAN_&_POLISI','http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/Apache/htdocs/petaPAD/batasKab.map&;;',{layers:'KTR_PEMERINTAHAN_&_POLISI',transparent:true,
format: 'image/gif'}, {isBaseLayer: false});
                
                var REL_KERETA_API = new
OpenLayers.Layer.WMS('REL_KERETA_API','http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/Apache/htdocs/petaPAD/batasKab.map&;;',{layers:'REL_KERETA_API',transparent:true,
format: 'image/gif'}, {isBaseLayer: false});
                
                var RUMAH_SAKIT_UMUM = new
OpenLayers.Layer.WMS('RUMAH_SAKIT_UMUM','http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/Apache/htdocs/petaPAD/batasKab.map&;;',{layers:'RUMAH_SAKIT_UMUM',transparent:true,
format: 'image/gif'}, {isBaseLayer: false});
                
                var Siantar_RingRoad = new
OpenLayers.Layer.WMS('Siantar_RingRoad','http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/Apache/htdocs/petaPAD/batasKab.map&;;',{layers:'Siantar_RingRoad',transparent:true,
format: 'image/gif'}, {isBaseLayer: false});
                
                var SIANTAR_GANG = new
OpenLayers.Layer.WMS('SIANTAR_GANG','http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/Apache/htdocs/petaPAD/batasKab.map&;;',{layers:'SIANTAR_GANG',transparent:true,
format: 'image/gif'}, {isBaseLayer: false});
                
                var SIANTAR_JALAN_KOTA = new
OpenLayers.Layer.WMS('SIANTAR_JALAN_KOTA','http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/Apache/htdocs/petaPAD/batasKab.map&;;',{layers:'SIANTAR_JALAN_KOTA',transparent:true,
format: 'image/gif'}, {isBaseLayer: false});
                
                var SIANTAR_JALAN_PROPINSI = new
OpenLayers.Layer.WMS('SIANTAR_JALAN_PROPINSI','http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/Apache/htdocs/petaPAD/batasKab.map&;;',{layers:'SIANTAR_JALAN_PROPINSI',transparent:true,
format: 'image/gif'}, {isBaseLayer: false});
                
                var SIANTAR_JALAN_NEGARA = new
OpenLayers.Layer.WMS('SIANTAR_JALAN_NEGARA','http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/Apache/htdocs/petaPAD/batasKab.map&;;',{layers:'SIANTAR_JALAN_NEGARA',transparent:true,
format: 'image/gif'}, {isBaseLayer: false});
                
                var SPBU = new
OpenLayers.Layer.WMS('SPBU','http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/Apache/htdocs/petaPAD/batasKab.map&;;',{layers:'SPBU',transparent:true,
format: 'image/gif'}, {isBaseLayer: false});
                
                var SUNGAI = new
OpenLayers.Layer.WMS('SUNGAI','http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/Apache/htdocs/petaPAD/batasKab.map&;;',{layers:'SUNGAI',transparent:true,
format: 'image/gif'}, {isBaseLayer: false});
                            vlayer = new OpenLayers.Layer.Vector( "Editable" );
            map.addLayer(vlayer);


            zb = new OpenLayers.Control.ZoomBox(
                {title:"Zoom box: Selecting it you can zoom on an area by
clicking and dragging."});
            var panel = new OpenLayers.Control.Panel({defaultControl: zb});
            panel.addControls([
                new OpenLayers.Control.MouseDefaults(
                    {title:'You can use the default mouse configuration'}),
                zb,
                new OpenLayers.Control.DrawFeature(vlayer,
OpenLayers.Handler.Path,
                    {title:'Draw a feature'}),
                new OpenLayers.Control.ZoomToMaxExtent({title:"Zoom to the
max extent"})
            ]);
                        
        
map.addLayers([layer,KEC,Kel_Siantar,SUNGAI,Siantar_RingRoad,SIANTAR_GANG,SIANTAR_JALAN_KOTA,SIANTAR_JALAN_PROPINSI,SIANTAR_JALAN_NEGARA,BANK,FASILITAS_IBADAH,FASILITAS_LAINNYA,FASILITAS_PENDIDIKAN,Jembatan,KANTOR_CAMAT,KANTOR_LURAH,KANTOR_WALIKOTA_PEMATANGSIANTAR,KTR_PEMERINTAHANPOLISI,REL_KERETA_API,RUMAH_SAKIT_UMUM,SPBU]);
                map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);

I really hope the answer from my friends ...


--
View this message in context: 
http://osgeo-org.1803224.n2.nabble.com/problems-with-loading-speed-tp6800977p6800977.html
Sent from the OpenLayers Users mailing list archive at Nabble.com.
_______________________________________________
Users mailing list
us...@lists.osgeo.org
http://lists.osgeo.org/mailman/listinfo/openlayers-users

_______________________________________________
Users mailing list
us...@lists.osgeo.org
http://lists.osgeo.org/mailman/listinfo/openlayers-users