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: https://i.sstatic.net/kGppM.gif

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

Appreciating any input.

Grig

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.

Chassepot

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/

Hamsun

Answer 3

So I have been trying out the @russellmania answer. It works, however only with the SVG version, which is included in the jsfiddle link. If I tried the same code with actual version of SVG, it crashes on the SVG saying "this.clear(...).attr" function is not defined. However, for me, I wanted the JVector zooming and map moving functionality to be still working. But with SVG layer over the map, it doesnt work. Or lets say, there are 2 options: 1) disable moving and zooming (I dont want this) 2) enable zooming, moving, but then SWG layer doesnt zoom and move the same as JVector does, so the path gets desynchronized from the map :)

I found a way to draw line in JVector using Markers. But this is not the correct way. So I am still going through jvectormap documentation, if there is anything how to draw a line directly in the jvectormap.

Hamsun

Answer 4

var markerIndex=1;
var markerCoords=[];
latLng={72,62};
markersCoords[markerIndex] = latLng;
map.addMarker(markerIndex, {latLng: [latLng.lat, latLng.lng]});
markerIndex += 1;

Vicenta