1

I'm using OpenLayrs-3.6.0 and Extjs-6.0. I want to define GeoMap Panel class like this. In other words, I want to rewrite GeoExt.panel.Map in geoExt-2 library. for this I define a class as follow:

Ext.define('MyApp2.view.geo.Map', {
    extend: 'Ext.panel.Panel',
    requires: [
    ],
    xtype: 'geoMap',
    layout: 'fit',
    map: null,
    initComponent: function() {
        var me = this;

        var html = '<div id="myId" class="MyId" ></div>';


        mm = me.map;
        me.callParent(arguments);
        Ext.apply(me, {html: html});

        me.map = new ol.Map({
            target: 'myId',
            layers: [
                new ol.layer.Tile({
                    title: "Global Imagery",
                    source: new ol.source.TileWMS({
                        url: 'http://localhost:8080/geoserver/world/wms?service=WMS',
                        params: {LAYERS: 'world:worldRaster', VERSION: '1.1.1'}
                    })
                }),
            ],
            view: new ol.View({
                projection: 'EPSG:4326',
                center: [35, 41],
                zoom: 4
            })
        });
    },
});

The strategy is that create a panel and set its html with: <div id="map" class="map"></div>. I then create a ol.map instance and set its target with: "map"(the "id" of div in html panel).

This solution does not work, How do I do?

or

Someone knows a better solution?

  • 1
    geoext only works with extjs 4. Except if you are doing something completely custom it wont work. – elasticrash Jun 9 '15 at 8:38
  • I'm developing **my**GeoExt.panel.Map. I don't use GeoExt – Morteza Malvandi Jun 9 '15 at 9:51
3

If you want to use OpenLayers 3 with Ext JS 6 you should have a look at https://github.com/KaiVolland/geoext3. It will be merged into https://github.com/geoext/geoext3 in about two weeks.

Even if you don't want to use GeoExt 3 itself, you could use some code of the GeoExt.panel.Map and GeoExt.panel.MapController.

The most interesting part might be the onResize method in the controller:

onResize: function(){
    // Get the corresponding view of the controller (the mapPanel).
    var mapPanel = this.getView();
    if(!mapPanel.mapRendered){
        mapPanel.getMap().setTarget(mapPanel.getTargetEl().dom);
        mapPanel.mapRendered = true;
    } else {
        mapPanel.getMap().updateSize();
    }
}
  • yes thanks a lot. An irrelevant question: You're also active in the project OpenLayers 3? When 3D section is completed? – Morteza Malvandi Jun 9 '15 at 13:28
  • I'm not really active in OpenLayers 3 so i don't know much about the 3D-Section. But you can find releases of the cesium integration library here: github.com/openlayers/ol3-cesium/releases – Kai Jun 10 '15 at 9:06
2

in Ext 4.2 I am using Container inside of Panel: added in initComponent:

    th.items = [
        Ext.create('Ext.Component', {
            initComponent: function () {
                var me = this;
                th.mapContainerId = me.id;
                me.on("boxready", function () {
                    th.initMap();
                });

                me.on("resize", function () {
                    if (th.mapInst) {
                        th.mapInst.updateSize();
                    }
                });

                me.callParent(arguments);
            }
        })
    ];

th is Panel, and me is Container. It prefered to initialize the map instanse once when Container is ready and update map size when Outer Container's size changed

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.