I need to draw a polyline between two points using the shortest distance. Example, my location is New York, I have a location in China and I want to draw a polyline connecting the two locations.

Where I am - see fiddle here: /

The problem is that when I draw the line it does use the shortest distance. In the above example it draws from the US to China with the line going to the right, the longest way round the Earth, not the left, which is the shortest way.

What am I missing? Any ideas how to draw the line according to the shortest distance?

Any help much appreciated.

HTML:

<link rel="stylesheet" href=".6.4/leaflet.css" />
<!--[if lte IE 8]>
   <link rel="stylesheet" href=".6.4/leaflet.ie.css" />
<![endif]-->

<script src=".6.4/leaflet.js"></script>

<div id="map" style="height:500px;"></div>

JS:

//example user location
var userLocation = new L.LatLng(35.974, -83.496);

var map = L.map('map').setView(userLocation, 1);
L.tileLayer('http://{s}.tile.cloudmade/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: 'Map data &copy; <a href="">OpenStreetMap</a> contributors, <a href=".0/">CC-BY-SA</a>, Imagery © <a href="">CloudMade</a>'
}).addTo(map);


var marker = new L.Marker(userLocation);
map.addLayer(marker);

//random locations around the world
var items = [{
    //china
    lat: "65.337",
    lon: "158.027"
}, {
    //colombia
    lat: "2.389",
    lon: "-72.598"
}, {
    //libya
    lat: "24.782",
    lon: "17.402"
}];

drawData();

//draw all the data on the map
function drawData() {
    var item, o;
    //draw markers for all items
    for (item in items) {
        o = items[item];
        var loc = new L.LatLng(o.lat, o.lon);
        createPolyLine(loc, userLocation);
    }
}

//draw polyline
function createPolyLine(loc1, loc2) {

    var latlongs = [loc1, loc2];
    var polyline = new L.Polyline(latlongs, {
        color: 'green',
        opacity: 1,
        weight: 1,
        clickable: false
    }).addTo(map);

    //distance
    var s = 'About ' + (loc1.distanceTo(loc2) / 1000).toFixed(0) + 'km away from you.</p>';

    var marker = L.marker(loc1).addTo(map);
    if (marker) {
        marker.bindPopup(s);
    }
}

I need to draw a polyline between two points using the shortest distance. Example, my location is New York, I have a location in China and I want to draw a polyline connecting the two locations.

Where I am - see fiddle here: http://jsfiddle/Vsq4D/1/

The problem is that when I draw the line it does use the shortest distance. In the above example it draws from the US to China with the line going to the right, the longest way round the Earth, not the left, which is the shortest way.

What am I missing? Any ideas how to draw the line according to the shortest distance?

Any help much appreciated.

HTML:

<link rel="stylesheet" href="http://cdn.leafletjs./leaflet-0.6.4/leaflet.css" />
<!--[if lte IE 8]>
   <link rel="stylesheet" href="http://cdn.leafletjs./leaflet-0.6.4/leaflet.ie.css" />
<![endif]-->

<script src="http://cdn.leafletjs./leaflet-0.6.4/leaflet.js"></script>

<div id="map" style="height:500px;"></div>

JS:

//example user location
var userLocation = new L.LatLng(35.974, -83.496);

var map = L.map('map').setView(userLocation, 1);
L.tileLayer('http://{s}.tile.cloudmade./BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: 'Map data &copy; <a href="http://openstreetmap">OpenStreetMap</a> contributors, <a href="http://creativemons/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.">CloudMade</a>'
}).addTo(map);


var marker = new L.Marker(userLocation);
map.addLayer(marker);

//random locations around the world
var items = [{
    //china
    lat: "65.337",
    lon: "158.027"
}, {
    //colombia
    lat: "2.389",
    lon: "-72.598"
}, {
    //libya
    lat: "24.782",
    lon: "17.402"
}];

drawData();

//draw all the data on the map
function drawData() {
    var item, o;
    //draw markers for all items
    for (item in items) {
        o = items[item];
        var loc = new L.LatLng(o.lat, o.lon);
        createPolyLine(loc, userLocation);
    }
}

//draw polyline
function createPolyLine(loc1, loc2) {

    var latlongs = [loc1, loc2];
    var polyline = new L.Polyline(latlongs, {
        color: 'green',
        opacity: 1,
        weight: 1,
        clickable: false
    }).addTo(map);

    //distance
    var s = 'About ' + (loc1.distanceTo(loc2) / 1000).toFixed(0) + 'km away from you.</p>';

    var marker = L.marker(loc1).addTo(map);
    if (marker) {
        marker.bindPopup(s);
    }
}

• javascript
• maps
• gis
• leaflet

1 Answer 1

Here's a working jsfiddle that answers the line problem. There is a method attached to the LatLng object called wrap that is supposed to help. I had to experiment a bit to get it work. I settled on

if (Math.abs(loc1.lng - loc2.lng) > 180) {
  latlongs = [loc1.wrap(179, -179), loc2];
}

Unfortunately, as you can see, the marker for China isn't replicated. I added the worldCopyJump: true option to the map object, but it doesn't fix that particular problem. Not sure how to fix that.

Edit: For posterity's sake, I forgot to mention that the reason it wasn't working before was because of the transition over the International Date Line.