jvectormap: Draw lines between markers?

Question

I'm trying to verify if it is possible to draw lines between markers on a map using jvectormap.

Here is an idea of what I'm trying to achieve: http://i.imgur.com/p1Zypv3.gif

Can someone give me a hint if this is feasible and if so how?

Appreciating any input.

Answer 1

This can be done with a combination of Jvectormap, Jvectormaps coordinates converter method latLngToPoint() and an SVG layer on top of the Jvectormap. In fact, utilizing the SVG.js as a layer on top of Jvectormap lets you do virtually anything that you could do with SVG while substituting points with latitude-longitude coordinates.

You'll need to load Jvectormap, the Jvectormap map file, svg.js, and svg.path.js plugin (see https://svgdotjs.github.io) in the page header. You'll also need to create two divs in one that can overlap with CSS absolute settings.

<div id="mapContainer" style="position:relative">
    <div id="map" style="position:absolute;top:0px;left:0px"></div>
    <div id="svgMapOverlay" style="position:absolute;top:0px;left:0px"></div>
</div>

Create an array of markers with latitude and longitude for drawing lines to and from on the map:

var markerArray = [
    {name:'Houston', latLng:[29.761993,-95.369568]},
    {name:'New York', latLng:[40.710833,-74.002533]},
    {name:'Kansas City', latLng:[39.115145,-94.633484]}
];

Then set up your Jvectormap using the markers above:

var map = $('#map').vectorMap({
    map: 'us_aea_en',
    zoomMin: 1,
    zoomMax: 1,
    markers: markerArray
});

Finally, recall your map as an object, create your SVG layer, convert the lat-long coordinates to points inside the div:

var map = $('#map').vectorMap('get', 'mapObject');
var draw = SVG('svgMapOverlay').size(660, 400);
var coords1 = map.latLngToPoint(markerArray[0].latLng[0],markerArray[0].latLng[1]);
var coords2 = map.latLngToPoint(markerArray[1].latLng[0],markerArray[1].latLng[1]);
draw.path().attr({ fill: 'none',stroke: '#c00', 'stroke-width': 2 }).M(coords1.x, coords1.y).L(coords2.x, coords2.y);

Most of this JS should go into a $(function() call or $(document).ready(function() block for starting up.

You can see this JSFiddle for more details: http://jsfiddle.net/ruzel/V8dyd/

Disclaimer: I don't know what happens with zooming; it's turned off for this example.

Answer 2

Finally I tried to implement the functionality of adding Lines to JVectorMap. The solution with SVG is fine, but doesn't work with Zoom, Move and Panzoom. So I added directly to JVectorMap the option to specify Lines, similar to Regions and markers.You can review the status of Pull Request https://github.com/bjornd/jvectormap/pull/431 where everything is included. Now you can draw line using

var lines = [ {points: [[50.0755,14.4378], [55.7558,37.6173]], text:"Prague - Moscow];

Still, the pull request needs to be included in new version of jvectormap, hope the author will do it soon :) The working code is at my personnal blog here: https://sevenhillsaway.com/map/