[Users] Base Layer Does Not Display on Initial Load

IT Intern itintern12 at gmail.com
Mon Sep 27 17:21:18 CEST 2010


Andreas,

Sigh, it's still not working out for me.  Now no base layer is coming up, my
zoom slider is not in the right position, and my map div is once again in
its own container :(

This is the code with the changes I have understood I should make:

    var options = {
                    controls: [new OpenLayers.Control.Navigation()],
                    maxExtent: new OpenLayers.Bounds(-20037508.34,
-20037508.34, 20037508.34, 20037508.34),
                    maxResolution: "auto",
                    projection: new OpenLayers.Projection("EPSG:900913"),
                    units: 'm',
                    allOverlays: false
            }


            //var map = new OpenLayers.Map(options);
            //map.addLayers([gphy, gmap, ghyb, osm, all_chn, all_tib,
chn_bridges, tib_bridges, chn_countys, tib_countys, chn_farms, tib_farms,
chn_glaciers, tib_glaciers, chn_grazing, tib_grazing, chn_hwyCrew,
tib_hwyCrew, chn_hospitals, tib_hospitals, chn_lakes, tib_lakes,
chn_monastaries, tib_monastaries, chn_pass, tib_pass, chn_rivers,
tib_rivers, chn_townships, tib_townships, chn_villages, tib_villages]);


            var mapPanel = new GeoExt.MapPanel({
                title: "Map",
                map: options,
                //center: map.setCenter(new OpenLayers.LonLat(93.9,
29.53).transform(new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject())),
                center: new OpenLayers.LonLat(93.9, 29.53).transform(new
OpenLayers.Projection("EPSG:4326")),//, map.getProjectionObject()),
                renderTo: document.body,
                width: 1500,
                height: 600,
                zoom: 9,
                region: "center",
                bbar: [{
                    xtype: "label",
                    text: "Scale = 1 : "
                }],
                items: [{
                    xtype: "gx_zoomslider",
                    vertical: true,
                    height: 300,
                    x: 10,
                    y: 20,
                    plugins: new GeoExt.ZoomSliderTip()
                }]
            });

            var map = mapPanel.map;

            map.addLayers([gphy, gmap, ghyb, osm, all_chn, all_tib,
chn_bridges, tib_bridges, chn_countys, tib_countys, chn_farms, tib_farms,
chn_glaciers, tib_glaciers, chn_grazing, tib_grazing, chn_hwyCrew,
tib_hwyCrew, chn_hospitals, tib_hospitals, chn_lakes, tib_lakes,
chn_monastaries, tib_monastaries, chn_pass, tib_pass, chn_rivers,
tib_rivers, chn_townships, tib_townships, chn_villages, tib_villages]);


Thank you,

elshae


On Mon, Sep 27, 2010 at 10:51 AM, Andreas Hocevar <ahocevar at opengeo.org>wrote:

> On Sep 27, 2010, at 16:15 , IT Intern wrote:
>
> > Andreas,
> >
> > What if I am using an Ext.Panel like this?
> >
> > var map = new OpenLayers.Map(options);
>
> Make sure that there is no div in your options.
>
> >
> > var mapPanel = new GeoExt.MapPanel({
> >                 title: "Map",
> >                 map: map,
>
> You can do this, but then you also have to destroy the map manually.
>
> >                 center: map.setCenter(new OpenLayers.LonLat(93.9,
> 29.53).transform(new OpenLayers.Projection("EPSG:4326"),
> map.getProjectionObject())),
>
> This is wrong. Just provide the center here. Don't call map.setCenter.
>
> >                 zoom: 9,
> >                 region: "center",
> >                 bbar: [{
> >                     xtype: "label",
> >                     text: "Scale = 1 : "
> >                 }],
> >                 items: [{
> >                     xtype: "gx_zoomslider",
> >                     vertical: true,
> >                     height: 300,
> >                     x: 10,
> >                     y: 20,
> >                     plugins: new GeoExt.ZoomSliderTip()
> >                 }]
> >             });
> >
> > new Ext.Panel({
> >                 width: 1800,
> >                 height: 600,
> >                 layout: "border",
> >                 renderTo: document.body,
> >                 items: [mapPanel, layerTree]
> >                 //items: [mapPanel, groupLayerNode]
> >             });
> >
> > Because I tried with just using map: options, for the mapPanel and then
> to refer back to my map was a pain.  I tried using mapPanel.map everywhere
> the original variable map was used and my code broke.
>
> var mapPanel = new GeoExt.MapPanel({});
> var map = mapPanel.map;
> // now map is an instance of OpenLayers.Map;
>
> >  I also added renderTo: document.body, but since I have the Ext.Panel, it
> placed the mapPanel in a separate div, even after specifying width and
> height.  My only other guess is maybe I need to get rid of the Ext.Panel,
> but then do I add the items: [layerTree] to the mapPanel instead?  I really
> like having the Ext.Panel instead and adding things to it...
>
> See above. The only reason why it could fail now is a "div" property in
> your map options.
>
> Regards,
> Andreas.
>
> >
> > Thank you,
> >
> > elshae
> >
> > On Sat, Sep 25, 2010 at 6:58 AM, Andreas Hocevar <ahocevar at opengeo.org>
> wrote:
> > Hi,
> >
> > you have to render the MapPanel to somewhere. Either add "renderTo:
> document.body" to the mapPanel's configuration, or add it to a container. If
> you do the former, you also have to configure a width and height on the
> mapPanel.
> >
> > Regards,
> > Andreas.
> >
> > On Sep 24, 2010, at 19:19 , IT Intern wrote:
> >
> > > Jason,
> > >
> > > I am using Google Streets actually :).  It just isn't working out for
> me atm...
> > >
> > >
> > > Andreas,
> > >
> > > I tried both suggestions.  I got rid of the 'map' parameter in the map
> instantiation and had the same result, the layer was blank.  Then I tried
> again with using my options variable in my mapPanel and nothing loaded up at
> all when I did this :(
> > > My entire page was blank...
> > >
> > > Thanks,
> > >
> > > elshae
> > >
> > > On Fri, Sep 24, 2010 at 10:39 AM, Andreas Hocevar <
> ahocevar at opengeo.org> wrote:
> > > Hi,
> > >
> > > the problem here is that you configure the OpenLayers map in the wrong
> mode. See below:
> > >
> > > On Sep 23, 2010, at 21:43 , IT Intern wrote:
> > >
> > > > Hello GeoExt users,
> > > >
> > > > This one's gotten me totally stumped.  I have some base layers and a
> few wms overlays.  When my page loads it shows the base layer for a quick
> second and then goes blank as it loads my overlays.  It stays blank until I
> click the map, etc.  Then it displays properly.  I've Googled all sorts of
> things concerning this sort of issue and have come up with nothing that
> gives me a hint as to why this could be.  This never happened to me before
> until I started using GeoExt to display my map.  Is it something in code I
> must write for GeoExt or OpenLayers so that this doesnt happen?  It's
> driving me crazy!!!
> > > >
> > > > Code:
> > > >
> > > > //Base Layers
> > > >
> > > >              var ghyb = new OpenLayers.Layer.Google(
> > > >                     "Google Hybrid",
> > > >                     {type: google.maps.MapTypeId.HYBRID,
> numZoomLevels: 20}
> > > >                 );
> > > >
> > > >             var gmap = new OpenLayers.Layer.Google(
> > > >                     "Google Streets", // the default
> > > >                     {numZoomLevels: 20},{visibility: true}
> > > >             );
> > > >
> > > >             var osm = new OpenLayers.Layer.OSM();
> > > >
> > > > //.....
> > > > ....
> > > > ....
> > > >
> > > > var options = {
> > > >                     controls: [new OpenLayers.Control.Navigation()],
> > > >                     maxExtent: new OpenLayers.Bounds(-20037508.34,
> -20037508.34, 20037508.34, 20037508.34),
> > > >                     maxResolution: "auto",
> > > >                     projection: new
> OpenLayers.Projection("EPSG:900913"),
> > > >                     units: 'm',
> > > >                     allOverlays: false
> > > >             }
> > > >
> > > >
> > > >             var map = new OpenLayers.Map('map', options);
> > >
> > > Wrong! If at all, use the following instead:
> > >
> > >              var map = new OpenLayers.Map(options);
> > >
> > > You don't want to render the map at this point, so you have to
> configure it without a map div.
> > >
> > >
> > > >             map.addLayers([gmap, ghyb, osm, all_chn, all_tib,
> chn_bridges, tib_bridges, chn_countys, tib_countys, chn_farms, tib_farms,
> chn_glaciers, tib_glaciers, chn_grazing, tib_grazing, chn_hwyCrew,
> tib_hwyCrew, chn_hospitals, tib_hospitals, chn_lakes, tib_lakes,
> chn_monastaries, tib_monastaries, chn_pass, tib_pass, chn_rivers,
> tib_rivers, chn_townships, tib_townships, chn_villages, tib_villages]);
> > > >
> > > >             var mapPanel = new GeoExt.MapPanel({
> > > >                 title: "Map",
> > > >                 map: map,
> > >
> > > Now the preferred way to configure a MapPanel would be to remove the
> "var map = ..." above entirely, and configure the map here:
> > >
> > >                  map: options,
> > >                  layers: [gmap, ghyb, osm, all_chn, all_tib,
> chn_bridges, tib_bridges, chn_countys, tib_countys, chn_farms, tib_farms,
> chn_glaciers, tib_glaciers, chn_grazing, tib_grazing, chn_hwyCrew,
> tib_hwyCrew, chn_hospitals, tib_hospitals, chn_lakes, tib_lakes,
> chn_monastaries, tib_monastaries, chn_pass, tib_pass, chn_rivers,
> tib_rivers, chn_townships, tib_townships, chn_villages, tib_villages]
> > >
> > > Regards,
> > > Andreas.
> > >
> > > >                 center: map.setCenter(new OpenLayers.LonLat(93.9,
> 29.53).transform(new OpenLayers.Projection("EPSG:4326"),
> map.getProjectionObject())),
> > > >                 zoom: 9,
> > > >                 region: "center",
> > > >                 bbar: [{
> > > >                     xtype: "label",
> > > >                     text: "Scale = 1 : "
> > > >                 }],
> > > >                 items: [{
> > > >                     xtype: "gx_zoomslider",
> > > >                     vertical: true,
> > > >                     height: 300,
> > > >                     x: 10,
> > > >                     y: 20,
> > > >                     plugins: new GeoExt.ZoomSliderTip()
> > > >                 }]
> > > >             });
> > > >
> > > >             var layerRoot = new Ext.tree.TreeNode({
> > > >                 text: "All Layers",
> > > >                 expanded: true,
> > > >                 autoLoad: true
> > > >                 });
> > > >
> > > > //Is there something to set here???
> > > >                 layerRoot.appendChild(new
> GeoExt.tree.BaseLayerContainer({
> > > >                 text: "Base Layers",
> > > >                 map: map,
> > > >                 layerStore: mapPanel.layers,
> > > >                 expanded: true,
> > > >                 autoLoad: true
> > > >                 }));
> > > >
> > > > //.....
> > > >
> > > > Thank you very much, I appreciate any suggestions :),
> > > >
> > > > elshae
> > > >
> > > >
> > > >
> > > > _______________________________________________
> > > > Users mailing list
> > > > Users at geoext.org
> > > > http://www.geoext.org/cgi-bin/mailman/listinfo/users
> > >
> > >
> > >
> > > --
> > > Andreas Hocevar
> > > OpenGeo - http://opengeo.org/
> > > Expert service straight from the developers.
> > >
> > >
> > > _______________________________________________
> > > Users mailing list
> > > Users at geoext.org
> > > http://www.geoext.org/cgi-bin/mailman/listinfo/users
> >
> >
> >
> > --
> > Andreas Hocevar
> > OpenGeo - http://opengeo.org/
> > Expert service straight from the developers.
> >
> >
> > _______________________________________________
> > Users mailing list
> > Users at geoext.org
> > http://www.geoext.org/cgi-bin/mailman/listinfo/users
>
> --
> Andreas Hocevar
> OpenGeo - http://opengeo.org/
> Expert service straight from the developers.
>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://www.geoext.org/pipermail/users/attachments/20100927/1bd167cd/attachment-0001.htm 


More information about the Users mailing list