0

I tried to make a WebMap with GeoExt and everything is working, but I don't see a scalebar.

var mapPanel, tree;
    Ext.application({
        name: 'test',
        launch: function() {
           mapPanel = Ext.create('GeoExt.panel.Map', {
                title: 'test',          
                border: true,
                region: "center",
                map: {allOverlays: false},
                center: [14.000000,47.00000],
                zoom: 11, 

              layers: [

                    new OpenLayers.Layer.WMS("OpenStreetMap",
                        "http://ows.terrestris.de/osm-gray/service?",
                        {layers: 'OSM-WMS' },
                        {
                            attribution: '&copy; terrestris GmbH & Co. KG <br>' +
                                'Data &copy; OpenStreetMap ' +
                                '<a href="http://www.openstreetmap.org/copyright/en"' +
                                'target="_blank">contributors<a>'           
                        }
                    ), .... ]

        var store = Ext.create('Ext.data.TreeStore', {
            model: 'GeoExt.data.LayerTreeModel',
            root: {
                expanded: true,
                children: [
                   {
                        plugins: ['gx_overlaylayercontainer'],
                        expanded: true,
                        text: "Layer"
                    },
                     {
                        plugins: ['gx_baselayercontainer'],
                        expanded: true,
                        text: "Base Maps"
                    }

                ]
            }
        });

       tree = Ext.create('GeoExt.tree.Panel', {
            border: true,
            region: "west",
            title: "Layers",
            width: 285,
            height: 200,
            split: true,
            collapsible: true,
            collapseMode: "mini",
            autoScroll: true,
            store: store,
            rootVisible: false,
            lines: false,
            tbar: true  
        });

        Ext.create('Ext.Viewport', {
            layout:"fit",
            hideBorders: true,
            items: {
                layout: "border",
                background: "red",
                deferredRender: false,
                items: [mapPanel, tree, {
                    contentEl: "desc",
                    region: "north",
                    bodyStyle: {"padding": "5px"},
                    collapsible: true,
                    collapseMode: "mini",
                    split: true,
                    width: 200,
                    height: 150,
                    title: "test"

                }]
            }
        });

    } 
});

How can I change the code to get the scale bar for the OSM?

  • Welcome to GIS.SE. You might get better help if you create a working example in jsFiddle or similar. – John Powell Feb 18 '15 at 12:14
1

You can for example define the map as a variable and point to this variable when you create your MapPanel:

var your_map=new OpenLayers.Map({allOverlays: false});

mapPanel = Ext.create('GeoExt.panel.Map', {
                title: 'test',          
                border: true,
                region: "center",
                map: your_map,
                center: [14.000000,47.00000],
                .......  // your other settings
              });

var your_scalebar=new OpenLayers.Control.ScaleLine(); 
your_map.addControl(your_scalebar);

Edit1: jsfiddle added: http://jsfiddle.net/expedio/rxr2mhee/

1

You may be able to create an OpenLayers control and display it on your map.

new OpenLayers.Control.ScaleLine({}) 

Documentation found here.

Looks like GeoExt explains a little on OpenLayers controls here also.

  • Thanks for your answer. I will try the OpenLayers control and tell you if I got it. – Franzi Feb 23 '15 at 7:38

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.