[OpenLayers-Users] problems with loading speed

Fri Sep 16 10:03:25 EDT 2011

My solution asks a different question: with an eye towards speed, how do I minimize the number of layers in the browser?  I group the layers on the MapServer end of things.  Instead of having so many layers in the browser, request more per rendered image:

{layers: "coastal_hydro hydro_polys_big hydro_polys hydro_lines"}

We request that mapserver renders up to ~30 different layers in a single large tile, and on my desktop it takes ~.75 seconds.  We don't do caching because we allow the user to pick what layers they want.  It's sort of low tech but we get pretty good performance out of it.  We're also not running MapServer as a WMS, but I believe the principle holds.

-----Original Message-----
From: openlayers-users-bounces at lists.osgeo.org [mailto:openlayers-users-bounces at lists.osgeo.org] On Behalf Of boho
Sent: Friday, September 16, 2011 9:47 AM
To: users at openlayers.org
Subject: [OpenLayers-Users] problems with loading speed

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
Users at lists.osgeo.org
http://lists.osgeo.org/mailman/listinfo/openlayers-users