Question

I have 2 OpenLayers.LonLat objects, and I want to determine the distance in pixels for the current zoom between the 2. I’m using OpenLayers.Layer.getViewPortPxFromLonLat() to determine the x and y of the points and then subtract to see the difference between the 2, but the values that I get are very small for points that are 2000km apart.

Here is my code:

        var center_lonlat = new OpenLayers.LonLat(geometry.lon, geometry.lat);
        var center_px = layer.getViewPortPxFromLonLat(center_lonlat);

        var radius_m = parseFloat(feature.attributes["radius"]);
        var radius_lonlat = OpenLayers.Util.destinationVincenty(center_lonlat, 0, radius_m);
        var radius_px = layer.getViewPortPxFromLonLat(radius_lonlat);

        var radius = radius_px.y - center_px.y;

I’m trying here to draw a circle, giving that I receive a center point and a radius in meters. The LonLat object seems to be ok.

Am I doing something wrong ?

Answer 1

I found the issue: destinationVincenty() need and returns coordinates in wgs84 where my map was using spherical mercator projection.

I hope I got correctly the answer, because projections make me dizzy and never really understood them :(. I was looking in the console to the numbers for my coordinates and the coordinates from the map.getExtent() that is used to calculate the getViewPortPxFromLonLat() and I realised they are not in the right order of magnitude, and then it hit me.

So, the code is now:

        var spherical_mercator = new OpenLayers.Projection("EPSG:900913");
        var wgs84 = new OpenLayers.Projection("EPSG:4326");

        var map = feature.layer.map;
        var geometry = feature.geometry;
        var center_lonlat = new OpenLayers.LonLat(geometry.y, geometry.x);
        var center_px = map.getViewPortPxFromLonLat(center_lonlat);

        var radius_m = parseFloat(feature.attributes["radius"]);
        var radius_lonlat = OpenLayers.Util.destinationVincenty(center_lonlat.clone().transform(spherical_mercator, wgs84), 0, radius_m).transform(wgs84, spherical_mercator);
        var radius_px = map.getViewPortPxFromLonLat(radius_lonlat);

        var radius = Math.abs(radius_px.y - center_px.y);

Measured the circles with the OpenLayers.Control.ScaleLine, and the size is dead on 😀