4

I've created OL3 OSM layer in ExtJS 5 (previously did it with OL2). On my desktop everything looks fine , but on the mobile phone the map looks stretched (This is denver for example).

enter image description here

This is the code I used :

Ext.define('ExtOL.view.Map', {
extend: 'Ext.panel.Panel',
region: 'center',
xtype: 'map',
rtl: true,
html: "<div id='gis_map'></div>", // The map will be drawn inside    
stateful: false,    
border: true,
listeners: {
    afterrender: function () {            

        var extent = ol.proj.transform([34.7193330, 31.8573201, 34.9892725, 32.2086729], 'EPSG:4326', 'EPSG:3857');
        var center = ol.proj.transform([34.8543028, 32.0329965], 'EPSG:4326', 'EPSG:3857');

        layers = [];

        var osm = new ol.layer.Tile({
            source: new ol.source.OSM({})
        });          

        layers.push(osm);

        var view = new ol.View({
            projection: 'EPSG:3857',
            center: center,
            zoom: 15,
            minZoom: 0,
            maxZoom: 16
        });

        map = new ol.Map({
            target: 'gis_map',
            renderer: 'canvas',                
            layers: layers,                
            view: view
        });

        map.getView().fitExtent(extent, map.getSize());




    },
    // The resize handle is necessary to set the map!
    resize: function () {
        var size = [document.getElementById(this.id + "-body").offsetWidth, document.getElementById(this.id + "-body").offsetHeight];
        //console.log(size);            
        map.setSize(size);
    }
},
   initComponent: function () {

        this.callParent(arguments);
    }
});

And this is the App init :

Ext.define('ExtOL.Application', {
extend: 'Ext.app.Application',    
name: 'ExtOL',
views: ['Map', 'Panel','LayerSwitcher'],
controllers: [],
stores: [],    
launch: function () {
    Ext.create('Ext.container.Viewport', {
        layout: 'border',
        rtl: true,
        style: 'border:1px solid;padding:2px;background:#157fcc',
        bodyBorder: true,
        defaults: {
            bodyPadding: 0
        },
        items: [
            {
                xtype: 'map'
            }
          ]
        });
    }
});

Any idea why the map is stretching ?

2
  • I'm sorry, can you explain in detail I'dnot quite understand
    – user50424
    Apr 13 '15 at 11:16
  • What dont you understand?
    – Alophind
    Apr 13 '15 at 17:55
0

Problem solved by defining both the viewport AND the panel as layout fit.

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.