0

I'd like to know how to define 'Open Street Map' as basemap in the function GeoExplorer.js

The createLayout function is defined as :

createLayout:function(){
        this.map=new OpenLayers.Map({
            ....
        });

            layers: [

                //=========base layer

                new OpenLayers.Layer.WMS(
                    "Global Imagery (vmap) [Online]",
                    "http://labs.metacarta.com/wms/vmap0",
                    {
                        layers: "basic",
                        transparent: "true",
                        format: "image/png"
                    },
                    {isBaseLayer: true, visibility: false}
                ),
                new OpenLayers.Layer.WMS("Global Imagery (OpenGeo) [Online]",
                    "http://maps.opengeo.org/geowebcache/service/wms", {
                        layers: "bluemarble"
                    },{
                        //buffer: 0,
                        isBaseLayer: true,
                        visibility: false
                    }
                )
            ]
        });

Instead of 'Global Imagery' base map, I'd like to use 'OpenStreetMap' or 'Google Maps'.


I edited advice from the answer(s) into this :

this.mapPanel=new GeoExt.MapPanel({
            layout:"anchor",border:true,region:"center",
            map:this.map,
            center:mapConfig.center&&new OpenLayers.LonLat(mapConfig.center[0],mapConfig.center[1]),
            zoom:mapConfig.zoom,
            items:[{
                xtype:"gx_zoomslider",
                vertical:true,height:100,
                plugins:new GeoExt.ZoomSliderTip({template:"<div>Zoom Level: {zoom}</div>"})},
                this.createMapOverlay()
            ],
            layers: [


//====base layer=====
                    new OpenLayers.Layer.OSM("OpenLayers"),
//=====overlays=====

                new OpenLayers.Layer.WMS("dim_bts_geo",
                    "http://localhost:8080/geoserver/wms", {
                        layers: "dw1:dim_bts_geo",
                        transparent: true,
                        format: "image/gif"
                    }, {
                        isBaseLayer: false,
                        buffer: 0,
                        visibility: false
                    }
                )


            ]
        });

However, No map component is showing anymore. the page is just empty.

Do I need to change anything apart from the the basemap definition?


After the answer by @g07kore, I integrated in my main page

<script src="http://maps.google.com/maps/api/js?v=3&amp;sensor=false"></script>

Then in GeoExplorer.js, the createLayout function is :

createLayout:function(){
        this.map=new OpenLayers.Map({
            theme:null,
            allOverlays:false,controls:[
                new OpenLayers.Control.PanPanel(),
                new OpenLayers.Control.ZoomPanel()
            ],
            projection:this.initialConfig.map.projection,
            units:this.initialConfig.map.units,
            maxResolution:this.initialConfig.map.maxResolution,
            maxExtent:this.initialConfig.map.maxExtent&&OpenLayers.Bounds.fromArray(this.initialConfig.map.maxExtent),
            numZoomLevels:this.initialConfig.map.numZoomLevels||20
        });
        this.createFeatureLayer();
        this.map.addLayer(this.featureLayer);
        var mapConfig=this.initialConfig.map||{};



        var googleBaseMap = new OpenLayers.Layer.Google("Google Satellite", {'type' : google.maps.MapTypeId.HYBRID});  

        this.mapPanel=new GeoExt.MapPanel({
            layout:"anchor",border:true,region:"center",
            map:this.map,
            center:mapConfig.center&&new OpenLayers.LonLat(mapConfig.center[0],mapConfig.center[1]),
            zoom:mapConfig.zoom,
            items:[{
                xtype:"gx_zoomslider",
                vertical:true,height:100,
                plugins:new GeoExt.ZoomSliderTip({template:"<div>Zoom Level: {zoom}</div>"})},
                this.createMapOverlay()
            ],


             layers: [googleBaseMap];

});

However, no map component is showing, I don't know if the basemap definition is wrong .

  • 1
    You should edit the question rather than provide multiple answers showing what you have tried – nmtoken Nov 1 '16 at 10:19
1

Just this

  new OpenLayers.Layer.OSM("OpenLayers");

It is defined as a baseLayer by default.

0

Google would be

new OpenLayers.Layer.Google("Google Satellite", {'type' : google.maps.MapTypeId.HYBRID});

But honestly i would change the codes a bit. I recommend to declare your Basemaps outside of the GeoExt elements. Something like

var googleBaseMap = new OpenLayers.Layer.Google("Google Satellite", {'type' : google.maps.MapTypeId.HYBRID});    

and add layers like

layers: [googleBaseMap, someOtherMap, anotherMap];

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.