[GIS] How to add extent to OpenLayers map in AngularJS

angularjsopenlayers

I am using AngularJS and angular-openlayers-directives to make a simple map, now I saw this simple example online HERE.

I just wanted to modify the code, to add an extent so that layers beyond a certain dimension would not be loaded, so my code looks as follows:

var coordinate1, coordinate2,
coordinate1 = ol.proj.fromLonLat([77.6013, 12.9044]),
coordinate2 = ol.proj.fromLonLat([77.6885, 12.9536]),
latlon = ol.proj.fromLonLat([77.6244159, 12.9370699]);

app.controller('DemoController', [ '$scope', function($scope) {
    angular.extend($scope, {
        quebec: {
            lat: latlon[0],
            lon: latlon[1],
            zoom: 5
        },
        bing: {
        extent:[coordinate1[0], coordinate1[1], coordinate2[0], coordinate2[1]],
            source: {
                name: 'Bing Maps',
                type: 'BingMaps',
                key: 'Aj6XtE1Q1rIvehmjn2Rh1LR2qvMGZ-8vPS9Hn3jCeUiToM77JFnf-kFRzyMELDol',
                imagerySet: 'Road'
            }
        }
    });

} ]);

See how I am generating the coordinates:

var coordinate1, coordinate2,
coordinate1 = ol.proj.fromLonLat([77.6013, 12.9044]),
coordinate2 = ol.proj.fromLonLat([77.6885, 12.9536]),
latlon = ol.proj.fromLonLat([77.6244159, 12.9370699]);

and using them in the following fashion :

quebec: {
     lat: latlon[0],
     lon: latlon[1],
     zoom: 5
   }

and also here:

extent:[coordinate1[0], coordinate1[1], coordinate2[0], coordinate2[1]]

Now this does't work, if I remove the extent parameter, I realize the map is somewhere in the Arabian sea, which is not the coordinates I have specified. So Where am I going wrong here and how do I specify extent using the angular-openlayers-directive?

Best Answer

The coordinates you supply are getting mixed up. I can't decipher where you are trying to show. But when you initialise the coordinates using ol.proj.fromLonLat this function accepts and returns a coordinate in order xy eg lonlat as per the method signature, see here http://openlayers.org/en/v3.11.1/apidoc/ol.proj.html#.fromLonLat

Change the variable latlon to lonlat

And change the point to the following, as at the moment the x and y are getting mixed up.

quebec: {
        lon: lonlat[0],
        lat: lonlat[1],
        zoom: 5
    },

But also ensure that the coordinates you're giving are in the order xy/lonlat. I think that the extent is set correctly, if the coordinates are in xy/lonlat.

I don't know if this will fix your issue, but should make it easier to work out.

Related Question