[Users] Base Layer Does Not Display on Initial Load
Andreas Hocevar
ahocevar at opengeo.org
Mon Oct 25 09:52:57 CEST 2010
Hi,
do not configure separate LayerStores for your tree groups. Use the filter property of the loaders instead. The MapPanel won't handle multiple LayerStores.
Also, since a Google layer is involved, and Google layers don't like to be resized while loading, try to configure the MapPanel's layers property instead of calling map.addLayers() with your layers array.
Regards,
Andreas.
On Oct 4, 2010, at 21:34 , IT Intern wrote:
> This issue still remains unresolved for me..
> :(
>
> On Tue, Sep 28, 2010 at 9:34 AM, IT Intern <itintern12 at gmail.com> wrote:
> Ok, here is the full code to my map :)
>
> <html>
> <head>
> <title>GeoExt WMS Browser</title>
>
> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
> <script src="./ext-3.2.1/adapter/ext/ext-base.js" type="text/javascript"></script>
> <script src="./ext-3.2.1/ext-all.js" type="text/javascript"></script>
> <link rel="stylesheet" type="text/css" href="./ext-3.2.1/resources/css/ext-all.css"></link>
> <!--<link rel="stylesheet" type="text/css" href="./ext-3.2.1/resources/css/xtheme-access.css"></link>-->
> <script src="./GeoExt/lib/GeoExt.js" type="text/javascript"></script>
> <link rel="stylesheet" type="text/css" href="./GeoExt/resources/geoext-all-debug.css"></link>
>
> <link rel="stylesheet" href="http://openlayers.org/api/theme/default/style.css" type="text/css" />
> <link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css" type="text/css" />
> <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
>
> <script type="text/javascript">
> Ext.BLANK_IMAGE_URL = "./ext-3.2.1/resources/images/default/s.gif";
>
> Ext.onReady(function() {
>
>
> 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}
> );
>
> var gphy = new OpenLayers.Layer.Google(
> "Google Physical",
> {type: google.maps.MapTypeId.TERRAIN},{visibility: true}
> // used to be {type: G_PHYSICAL_MAP}
>
> );
>
>
> var osm = new OpenLayers.Layer.OSM();
>
> var all_chn = new OpenLayers.Layer.WMS(
> "All Points Chinese trans", "http://10.0.102.11:8080/geoserver/wms", {layers: 'cite:ALL _CHN_NAMES', transparent: true}, {isBaseLayer: false, displayInLayerSwitcher: true, visibility: false}
> );
>
> var all_tib = new OpenLayers.Layer.WMS(
> "All Points Tibetan trans", "http://10.0.102.11:8080/geoserver/wms", {layers: 'cite:ALL _TIB_NAMES', transparent: true}, {isBaseLayer: false, displayInLayerSwitcher: true, visibility: false}
> );
>
> var chn_bridges = new OpenLayers.Layer.WMS(
> "Bridges (Chinese trans)", "http://10.0.102.11:8080/geoserver/wms", {layers: 'cite:chn_bridges', transparent: true}, {isBaseLayer: false, displayInLayerSwitcher: true, visibility: false}
> );
>
> var tib_bridges = new OpenLayers.Layer.WMS(
> "Bridges (Tibetan trans)", "http://10.0.102.11:8080/geoserver/wms", {layers: 'cite:tib_bridges', transparent: true}, {isBaseLayer: false, displayInLayerSwitcher: true, visibility: false}
> );
>
> var chn_countys = new OpenLayers.Layer.WMS(
> "Counties (Chinese trans)", "http://10.0.102.11:8080/geoserver/wms", {layers: 'cite:chn_countys', transparent: true}, {isBaseLayer: false, displayInLayerSwitcher: true, visibility: false}
> );
>
> var tib_countys = new OpenLayers.Layer.WMS(
> "Counties (Tibetan trans)", "http://10.0.102.11:8080/geoserver/wms", {layers: 'cite:tib_countys', transparent: true}, {isBaseLayer: false, displayInLayerSwitcher: true, visibility: false}
> );
>
> var chn_farms = new OpenLayers.Layer.WMS(
> "Farms (Chinese trans)", "http://10.0.102.11:8080/geoserver/wms", {layers: 'cite:chn_farms', transparent: true}, {isBaseLayer: false, displayInLayerSwitcher: true, visibility: false}
> );
>
> var tib_farms = new OpenLayers.Layer.WMS(
> "Farms (Tibetan trans)", "http://10.0.102.11:8080/geoserver/wms", {layers: 'cite:tib_farms', transparent: true}, {isBaseLayer: false, displayInLayerSwitcher: true, visibility: false}
> );
>
> var chn_glaciers = new OpenLayers.Layer.WMS(
> "Glaciers (Chinese trans)", "http://10.0.102.11:8080/geoserver/wms", {layers: 'cite:chn_glaciers', transparent: true}, {isBaseLayer: false, displayInLayerSwitcher: true, visibility: false}
> );
>
> var tib_glaciers = new OpenLayers.Layer.WMS(
> "Glaciers (Tibetan trans)", "http://10.0.102.11:8080/geoserver/wms", {layers: 'cite:tib_glaciers', transparent: true}, {isBaseLayer: false, displayInLayerSwitcher: true, visibility: false}
> );
>
> var chn_grazing = new OpenLayers.Layer.WMS(
> "Grazing Points (Chinese trans)", "http://10.0.102.11:8080/geoserver/wms", {layers: 'cite:chn_grazing_points', transparent: true}, {isBaseLayer: false, displayInLayerSwitcher: true, visibility: false}
> );
>
> var tib_grazing = new OpenLayers.Layer.WMS(
> "Grazing Points (Tibetan trans)", "http://10.0.102.11:8080/geoserver/wms", {layers: 'cite:tib_grazing_points', transparent: true}, {isBaseLayer: false, displayInLayerSwitcher: true, visibility: false}
> );
>
> var chn_hwyCrew = new OpenLayers.Layer.WMS(
> "Highway Maintenance Crew (Chinese trans)", "http://10.0.102.11:8080/geoserver/wms", {layers: 'cite:chn_highway_maintenance_crews', transparent: true}, {isBaseLayer: false, displayInLayerSwitcher: true, visibility: false}
> );
>
> var tib_hwyCrew = new OpenLayers.Layer.WMS(
> "Highway Maintenance Crew (Tibetan trans)", "http://10.0.102.11:8080/geoserver/wms", {layers: 'cite:tib_highway_maintenance_crews', transparent: true}, {isBaseLayer: false, displayInLayerSwitcher: true, visibility: false}
> );
>
> var chn_hospitals = new OpenLayers.Layer.WMS(
> "Hospitals (Chinese trans)", "http://10.0.102.11:8080/geoserver/wms", {layers: 'cite:chn_hospitals', transparent: true}, {isBaseLayer: false, displayInLayerSwitcher: true, visibility: false}
> );
>
> var tib_hospitals = new OpenLayers.Layer.WMS(
> "Hospitals (Tibetan trans)", "http://10.0.102.11:8080/geoserver/wms", {layers: 'cite:tib_hospitals', transparent: true}, {isBaseLayer: false, displayInLayerSwitcher: true, visibility: false}
> );
>
> var chn_lakes = new OpenLayers.Layer.WMS(
> "Lakes (Chinese trans)", "http://10.0.102.11:8080/geoserver/wms", {layers: 'cite:chn_lakes', transparent: true}, {isBaseLayer: false, displayInLayerSwitcher: true, visibility: false}
> );
>
> var tib_lakes = new OpenLayers.Layer.WMS(
> "Lakes (Tibetan trans)", "http://10.0.102.11:8080/geoserver/wms", {layers: 'cite:tib_lakes', transparent: true}, {isBaseLayer: false, displayInLayerSwitcher: true, visibility: true}
> );
>
> var chn_monastaries = new OpenLayers.Layer.WMS(
> "Monastaries (Chinese trans)", "http://10.0.102.11:8080/geoserver/wms", {layers: 'cite:chn_monasterys', transparent: true}, {isBaseLayer: false, displayInLayerSwitcher: true, visibility: false}
> );
>
> var tib_monastaries = new OpenLayers.Layer.WMS(
> "Monastaries (Tibetan trans)", "http://10.0.102.11:8080/geoserver/wms", {layers: 'cite:tib_monasterys', transparent: true}, {isBaseLayer: false, displayInLayerSwitcher: true, visibility: false}
> );
>
> var chn_pass = new OpenLayers.Layer.WMS(
> "Pass (Chinese trans)", "http://10.0.102.11:8080/geoserver/wms", {layers: 'cite:chn_pass', transparent: true}, {isBaseLayer: false, displayInLayerSwitcher: true, visibility: false}
> );
>
> var tib_pass = new OpenLayers.Layer.WMS(
> "Pass (Tibetan trans)", "http://10.0.102.11:8080/geoserver/wms", {layers: 'cite:tib_pass', transparent: true}, {isBaseLayer: false, displayInLayerSwitcher: true, visibility: false}
> );
>
> var chn_rivers = new OpenLayers.Layer.WMS(
> "Rivers (Chinese trans)", "http://10.0.102.11:8080/geoserver/wms", {layers: 'cite:chn_rivers', transparent: true}, {isBaseLayer: false, displayInLayerSwitcher: true, visibility: false}
> );
>
> var tib_rivers = new OpenLayers.Layer.WMS(
> "Rivers (Tibetan trans)", "http://10.0.102.11:8080/geoserver/wms", {layers: 'cite:tib_rivers', transparent: true}, {isBaseLayer: false, displayInLayerSwitcher: true, visibility: false}
> );
>
> var chn_townships = new OpenLayers.Layer.WMS(
> "Townships (Chinese trans)", "http://10.0.102.11:8080/geoserver/wms", {layers: 'cite:chn_townships', transparent: true}, {isBaseLayer: false, displayInLayerSwitcher: true, visibility: false}
> );
>
> var tib_townships = new OpenLayers.Layer.WMS(
> "Townships (Tibetan trans)", "http://10.0.102.11:8080/geoserver/wms", {layers: 'cite:tib_townships', transparent: true}, {isBaseLayer: false, displayInLayerSwitcher: true, visibility: true}
> );
>
> var chn_villages = new OpenLayers.Layer.WMS(
> "Villages (Chinese trans)", "http://10.0.102.11:8080/geoserver/wms", {layers: 'cite:chn_villages', transparent: true}, {isBaseLayer: false, displayInLayerSwitcher: true, visibility: false}
> );
>
> var tib_villages = new OpenLayers.Layer.WMS(
> "Villages (Tibetan trans)", "http://10.0.102.11:8080/geoserver/wms", {layers: 'cite:tib_villages', transparent: true}, {isBaseLayer: false, displayInLayerSwitcher: true, visibility: true}
> );
>
>
> 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 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"), new OpenLayers.Projection("EPSG:900913")),
> 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]);
>
>
> var tibNaturalLayers = new GeoExt.data.LayerStore({
> map: map,
> initDir: 0,
> layers: [tib_villages, tib_rivers, tib_lakes, tib_grazing, tib_glaciers]
> });
>
> var chnNaturalLayers = new GeoExt.data.LayerStore({
> map: map,
> initDir: 0,
> layers: [chn_villages, chn_rivers, chn_lakes, chn_grazing, chn_glaciers]
> });
>
> var tibPointOfInterest = new GeoExt.data.LayerStore({
> map: map,
> initDir: 0,
> layers: [tib_pass, tib_monastaries, tib_hospitals, tib_hwyCrew, tib_bridges]
> });
>
> var chnPointOfInterest = new GeoExt.data.LayerStore({
> map: map,
> initDir: 0,
> layers: [chn_pass, chn_monastaries, chn_hospitals, chn_hwyCrew, chn_bridges]
> });
>
> var tibLands = new GeoExt.data.LayerStore({
> map: map,
> initDir: 0,
> layers: [tib_villages, tib_townships, tib_farms, tib_countys]
> });
>
> var chnLands = new GeoExt.data.LayerStore({
> map: map,
> initDir: 0,
> layers: [chn_villages, chn_townships, chn_farms, chn_countys]
>
> });
>
> var layerRoot = new Ext.tree.TreeNode({
> text: "All Layers",
> expanded: true
> });
>
>
> layerRoot.appendChild(new GeoExt.tree.BaseLayerContainer({
> text: "Base Layers",
> map: map,
> layerStore: mapPanel.layers,
> expanded: true
> }));
>
> layerRoot.appendChild(new GeoExt.tree.OverlayLayerContainer({
> text: "Natural Selection (Tibetan trans)",
> layerStore: tibNaturalLayers,
> expanded: false,
> loader: {param: "LAYERS"}
> }));
>
> layerRoot.appendChild(new GeoExt.tree.OverlayLayerContainer({
> text: "Natural Selection (Chinese trans)",
> layerStore: chnNaturalLayers,
> expanded: false,
> loader: {param: "LAYERS"}
> }));
>
> layerRoot.appendChild(new GeoExt.tree.OverlayLayerContainer({
> text: "Points of Interest (Tibetan trans)",
> layerStore: tibPointOfInterest,
> expanded: false,
> loader: {param: "LAYERS"}
> }));
>
> layerRoot.appendChild(new GeoExt.tree.OverlayLayerContainer({
> text: "Points of Interest (Chinese trans)",
> layerStore: chnPointOfInterest,
> expanded: false,
> loader: {param: "LAYERS"}
> }));
>
> layerRoot.appendChild(new GeoExt.tree.OverlayLayerContainer({
> text: "Lands (Tibetan trans)",
> layerStore: tibLands,
> expanded: false,
> loader: {param: "LAYERS"}
> }));
>
> layerRoot.appendChild(new GeoExt.tree.OverlayLayerContainer({
> text: "Lands (Chinese trans)",
> layerStore: chnLands,
> expanded: false,
> loader: {param: "LAYERS", baseAttrs: {iconCls: 'myClass'}}
> }));
>
> var layerTree = new Ext.tree.TreePanel({
> region: "west",
> title: "Map Layers",
> root: layerRoot,
> loader: new Ext.tree.TreeLoader({applyLoader: false}),
> enableDD: true,
> collapsible: true,
> width: 300,
> expanded: true
> });
>
>
> var scaleCombo = new Ext.form.ComboBox({
> width: 130,
> mode: "local",
> emptyText: "Scale",
> triggerAction: "all",
> displayField: "scale",
> store: new GeoExt.data.ScaleStore({
> map: mapPanel.map
> }),
> listeners: {
> select: function(combo, record) {
> mapPanel.map.zoomTo(record.get("level"));
> }
> }
> });
>
> mapPanel.map.events.register("zoomend", this, function() {
> scaleCombo.setValue(mapPanel.map.getScale());
> });
> mapPanel.getBottomToolbar().add(scaleCombo);
>
>
>
>
> /*var tree = new Ext.tree.TreePanel({
> region: "west",
> title: "Map Layers",
> width: 200,
> autoScroll: true,
> enableDD: true,
> lines: true,
> rootVisible: true,
> root: new GeoExt.tree.LayerContainer({
>
> layerStore: mapPanel.layers,
> expanded: true
> }),
> bbar: [{
> text: "Remove from Map",
> handler: function() {
> var node = tree.getSelectionModel().getSelectedNode();
> if(node) {
> mapPanel.map.removeLayer(node.layer);
> }
> }
> }]
> });*/
>
> var legend = new GeoExt.LegendPanel({
> region: "east",
> title: "Legend",
> width: 200,
> autoScroll: true,
> layerStore: mapPanel.layers
>
> });
>
> new Ext.Panel({
> width: 1800,
> height: 600,
> layout: "border",
> renderTo: document.body,
> items: [layerTree, mapPanel, legend]
> //items: [mapPanel, groupLayerNode]
> });
>
>
> var info = new OpenLayers.Control.WMSGetFeatureInfo({
> url: 'http://10.0.102.11:8080/geoserver/wms',
> title: 'Identify features by clicking',
> queryVisible: true,
> eventListeners: {
> getfeatureinfo: function(event){
> if(event.text.length != 687) {
> map.addPopup(new OpenLayers.Popup.FramedCloud(
> "chicken",
> map.getLonLatFromPixel(event.xy),
> null,
> event.text + '<div>name: Hello!</div>',
> null,
> true
> ));
> }
> }
> }
> });
> map.addControl(info);
> info.activate();
>
> });
> </script>
> </head>
> <body>
> </body>
> </html>
>
> Thank you,
>
> elshae
>
> On Tue, Sep 28, 2010 at 6:59 AM, Sarah Schuessler <sarah_flip at yahoo.de> wrote:
> Without any code we can`t say anything.
> Did you checked misspelling, code mistakes?
>
> best regards
> Sarah
>
> Von: IT Intern <itintern12 at gmail.com>
> An: users at geoext.org
> Gesendet: Dienstag, den 28. September 2010, 0:18:20 Uhr
> Betreff: Re: [Users] Base Layer Does Not Display on Initial Load
>
> Also if it helps any, I'm getting the following errors in my firebug console...
>
> OpenLayers is not defined
> symbolizers: [OpenLayers.Feature.Vector.style["default"]],
> Featur...erer.js (line 36)
>
> OpenLayers is not defined
> "eq": OpenLayers.Filter.Comparison.EQUAL_TO,
> form.js (line 78)
>
> I've yet to conquer this issue so any other advices would be great and very much appreciated :)
>
> Thank you,
>
> elshae
>
>
> On Mon, Sep 27, 2010 at 11:46 AM, IT Intern <itintern12 at gmail.com> wrote:
> Andreas,
>
> I have added the other changes you recommended. Everything looks good, except now it is back to what I started with. The Google Base layer loads first and as my overlays are loading, it disappears. I am positive that all my overlays are transparent...
>
>
> var options = {
> controls: [new OpenLayers.Control.Navigation()],
> maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34),
> units: 'm',
> allOverlays: false
> }
>
> 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"), new OpenLayers.Projection("EPSG:900913")),
>
> 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]);
>
>
> Thanks,
>
> elshae
>
>
> On Mon, Sep 27, 2010 at 11:38 AM, Andreas Hocevar <ahocevar at opengeo.org> wrote:
> Three things:
>
> * don't use map.getProjectionObject() in your transform - it is not available yet
> * don't use maxResolution: "auto".
> * remove the renderTo config option from your MapPanel.
>
> -Andreas.
>
> On Sep 27, 2010, at 17:21 , IT Intern wrote:
>
> > 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
> >
> >
>
>
> _______________________________________________
> Users mailing list
> Users at geoext.org
> http://www.geoext.org/cgi-bin/mailman/listinfo/users
>
>
>
> _______________________________________________
> 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.
More information about the Users
mailing list