How to draw a track to display?

Former Member over 5 years ago

HI,

I´ve got a Latitude Longitude points series which I want to draw on a display of a watch. The problem is with projecting the Lat/Lng pairs into the pixels. I´ve got the bounding box of the track. So far I´ve been using this function which plots some tracks just fine, but a lot of them is squashed. Mainly those tracks that are bigger in width, than height. I´ve seen a lot of apps use this feature, but nowhere to find the proper formula to project the points.

function transformToPixels(lat, lon){
        var westLongitude = boundingBox[1].toDegrees()[1]; 
        var eastLongitude = boundingBox[0].toDegrees()[1];
        var northLatitude = boundingBox[1].toDegrees()[0];
        var southLatitude = boundingBox[0].toDegrees()[0];
        var longitudeDiff = eastLongitude - westLongitude;
        var latitudeDiff = northLatitude - southLatitude;
        var xPixel = (((eastLongitude - lon) / (longitudeDiff).toDouble()) * DISPLAY_WIDTH).toNumber();
        var yPixel = (((northLatitude - lat) / (latitudeDiff).toDouble()) * DISPLAY_HEIGHT).toNumber();
        return [xPixel - 3, yPixel + 20]; //figured these numbers to somehow fit the space
    }

Thanks for help.

0 jim_m_58 over 5 years ago

if you want the n-s scale to be the same as the e-w scale, adjust the bounding box to make it so and ignore points outside of that. A few things to consider, is you'll have the cases where lat is +and lon is +, lat is + and lon is -, lat is -, lon is +, lat is - and lon is -. Just something to test. If you do set the scale to be the same, you probably want to consider doing some kind of pan/zoom

Also, let's say you have 500 lat/lon pairs. You don't really want to display them all, but instead display a reasonable number. It helps with the battery (fewer draws when the screen updates) and can eliminate some clutter.

So if you have 100 pairs, maybe display them all. 200, every other one. 300 every 3rd one, 500, every 5th one, etc...

0 Former Member over 5 years ago in reply to jim_m_58

The watch receives simplified list of pairs with https://github.com/mourner/simplify-js.

Thank you for pointing out some problems of my code. I´ve read some articles about the projection from Lat/Lng to X/Y, but those only confused me more than I was.