0

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?

1
  • After a bit of testing , i beleive the extent is being set correctly , so i believe , my coordinates are going wrong !! :( , i don't know why. Commented Nov 24, 2015 at 14:07

2 Answers 2

2

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.

2
  • what is lonlat , there is nothing of that name in my code. Commented Nov 25, 2015 at 4:17
  • From you code latlon = ol.proj.fromLonLat([77.6244159, 12.9370699]); I'm suggesting changing that variable latlon to lonlat, so that there's no confusion with the ordering of lon and lat.
    – Tedd
    Commented Nov 25, 2015 at 10:52
0

To add extent to OpenLayers map in AngularJS follow below steps. These steps fixed my issue.

  1. Add import { fromLonLat } from 'ol/proj' lib in your component.ts file where logic is written.

enter image description here

  1. Add fromLonLat([long, lat]) under view object as shown below.

enter image description here

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.