how to calculate distance between 2 sets of lat/lng

Question

I am using a react-native-gmaps module for a tracking app. It is a light package with a few methods exposed.

<RNGMap
ref={'gmap'}
style={{ width: this.state.mapWidth, height: this.state.mapHeight }}
markers={this.state.markers}
zoomLevel={this.state.zoom}
onMapChange={(e) => this._handleMapChange(e) }
center={this.state.center}
onMarkerClick={(e) => this._handleMarkerPress(e) }/>

For every polyline point that is placed on the map the map gets re-centered. (move the map and it bounces back to center) It is following the user. I have added a icon that enables/disables this option. What I would like to do is remind the user that this option is available. I have placed a icon on the right side of the map.

I want to use the

onMapChange

method to do this. I want the icon to change colors when the user moves the map.(if the followMe option is set to true).

    _handleMapChange(e) {

    console.log(e)

    if (this.state.isFollowing) {
        this.setState({ followingIconBackground: colors.rgba.mapBlue })
    TimerMixin.setTimeout.call(this, () => {
        this.setState({ followingIconBackground: colors.rgba.mapGrey })
    }, 100)
    }
}

The problem is this method gets triggered every time the map moves. so I need to set a minimum lat/lng distance change to prevent my function triggering every time a polyline point is added to the map. How to I calculate this? The similar questions out there seem to be over complicated for this.

So I assume it would be something like this. But I am not sure how or what to compare

    var oldLat;
var oldLng;
_handleMapChange(e) {

    if (compare old with new  )
    if (this.state.isFollowing) {
        this.setState({ followingIconBackground: colors.rgba.mapBlue })
        TimerMixin.setTimeout.call(this, () => {
            this.setState({ followingIconBackground: colors.rgba.mapGrey })
        }, 100)
    }
    oldLat = e.lat
    oldLng = e.lng
}

You may wish to calculate the euclidean distance. It's sqrt(Δx^2+Δy^2). — Paul Stelian, Jul 03 '16 at 17:03
It's one of the simplest things actually. The Δ sign I use there actually means variation -- the difference between the old and the new value, with any sign. — Paul Stelian, Jul 03 '16 at 17:08
Are you looking to calculate the distance between two points given their lat/long? if so, check out : http://stackoverflow.com/questions/27928/calculate-distance-between-two-latitude-longitude-points-haversine-formula — JonSG, Jul 03 '16 at 18:03

score 2 · Accepted Answer · answered Jul 03 '16 at 17:16

For Advanced geospatial calculus, I use http://turfjs.org/
(can be used server Side and Front Side)

var point1 = {
  "type": "Feature",
  "properties": {},
  "geometry": {
    "type": "Point",
    "coordinates": [-75.343, 39.984]
  }
};
var point2 = {
  "type": "Feature",
  "properties": {},
  "geometry": {
    "type": "Point",
    "coordinates": [-75.534, 39.123]
  }
};
var units = "miles";

var points = {
  "type": "FeatureCollection",
  "features": [point1, point2]
};

//=points

var distance = turf.distance(point1, point2, units);

//=distance

source: http://turfjs.org/docs/#distance

You'll need to create your points as GeoJson, (as described above)

how to calculate distance between 2 sets of lat/lng

1 Answers1