1

Using GeoExt 3.1.0, OpenLayers 4.4.1 and ExtJS 6.2.0.

I'm trying to make my first GIS web app and I am stuck trying to get the map to load with one of my layers in the center. While researching I was made to understand that this was achieved setting the view's extent. In my case I'm loading my tiles from geoserver and using one of its services to get the capabilities and thus its extent. The problem is I am not getting any errors but the map is not centering on the desired location EPSG:3795, but somewhere in the middle of the Atlantic, halfway between Leeward Antilles and Cabo Verde. Here is the code in full:

Ext.require([
    'GeoExt.component.Map',
    'GeoExt.data.store.LayersTree'
]);
var mapComponent;
var mapPanel;
var treePanel;
var descriptionPanel;

Ext.application({
    name: 'BasicTree',
    launch: function() {
        var parser = new ol.format.WMSCapabilities();
        fetch('http://localhost:8080/geoserver/ows?service=wms&version=1.3.0&request=GetCapabilities', {mode: 'cors'}).then(function(response) {
            return response.text();
        }).then(function(text) {
            var result = parser.read(text);
            var extent = getEX_GeographicBoundingBox(result);
            console.log(extent);
            var extentTransform = ol.proj.transform(extent, 'EPSG:4326', 'EPSG:3857');
            console.log(extentTransform);
            var layers = [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                }),
                new ol.layer.Tile({
                    source: new ol.source.TileWMS({
                        url: 'http://localhost:8080/geoserver/wms',
                        params: {'LAYERS': 'ws_geodeleg:prov'},
                        serverType: 'geoserver'
                    })
                }),
                new ol.layer.Tile({
                    source: new ol.source.TileWMS({
                        url: 'http://localhost:8080/geoserver/wms',
                        params: {'LAYERS': 'ws_geodeleg:muni'},
                        serverType: 'geoserver'
                    })
                })
            ];

            var view = new ol.View({
                center: ol.extent.getCenter(extentTransform),
                zoom: 5
            });

            var map = new ol.Map({
                layers: layers,
                view: view
            });

            mapComponent = Ext.create('GeoExt.component.Map', {
                map: map
            });

            var treeStore = Ext.create('GeoExt.data.store.LayersTree', {
                layerGroup: map.getLayerGroup()
            });

            treePanel = Ext.create('Ext.tree.Panel', {
                title: 'Tree Example',
                viewConfig: {
                    plugins: {ptype: 'treeviewdragdrop'}
                },
                store: treeStore,
                rootVisible: false,
                border: false
            });

            descriptionPanel = Ext.create('Ext.panel.Panel', {
                contentEl: 'content-el',
                title: 'Description',
                border: false,
            });

            Ext.create('Ext.panel.Panel', {
                width: '100%',
                height: document.documentElement.clientHeight,
                title: 'title',
                layout: {
                    type: 'border'
                },
                items: [
                    {
                        title: 'South Region is resizable',
                        region: 'south',
                        height: '20%',
                        split: true,
                        collapsible: true,
                        margin: '0 5 5 5'
                    },
                    {
                        title: 'West Region is collapsible',
                        region: 'west',
                        margin: '5 0 0 5',
                        width: '15%',
                        split: true,
                        collapsible: true,
                        id: 'west-region-container',
                        items: [treePanel, descriptionPanel]
                    },
                    {
                        title: 'Mapa',
                        region: 'center',
                        margin: '5 5 0 0',
                        items: [mapComponent]
                    }],
                renderTo: Ext.getBody()
            });
        });
    }
});

The getEX_GeographicBoundingBox function:

function getEX_GeographicBoundingBox(result){
    return result.Capability.Layer.Layer.find(l => l.Name === 'ws_geodeleg:prov').EX_GeographicBoundingBox;
}

In case it's useful:

console.log(extent) --> [-80.80061652889158, 21.94540368776222, -79.2899712690279, 23.222106568708703]

console.log(extentTransform) --> [-8994683.487778775, 2504971.556251283, -79.2899712690279, 23.222106568708703]
1

Change

var extentTransform = ol.proj.transform(extent, 'EPSG:4326', 'EPSG:3857');

with

var extentTransform = ol.proj.transformExtent(extent, 'EPSG:4326', 'EPSG:3857');

It wasn't giving any errors or anything, it just placed my view's center in the middle of the Atlantic. Checking the docs for the millionth time I noticed the other function and it worked perfectly.

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.