javascript - two polyline side-by-side between a pair of markers leaflet -


how can have 2 or more polylines side-by-side between pair of markers in leaflet.js?

here code, don't see happening: http://jsfiddle.net/abarik/q9bxl1z6/1/

// html <div id="map" style="height:500px;"></div>  //example user location var userlocation = new l.latlng(35.974, -83.496);  var map = l.map('map',        {center: userlocation,         zoom: 1,           worldcopyjump: true,       }); l.tilelayer('http://{s}.tile.cloudmade.com/bc9a493b41014caabb98f0471d759707/997/256/{z}/{x}/{y}.png', {     maxzoom: 18,     attribution: 'map data &copy; <a href="http://openstreetmap.org">openstreetmap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">cc-by-sa</a>, imagery © <a href="http://cloudmade.com">cloudmade</a>' }).addto(map);   var marker = new l.circlemarker(userlocation, {radius:10, fillcolor:'red'}); map.addlayer(marker);  //random locations around world var items = [{     //china     lat: "65.337",     lon: "158.027" }, {     //colombia     lat: "2.389",     lon: "-72.598" }];  drawdata();  //draw data on map function drawdata() {     var item, o;     //draw markers items     (item in items) {         o = items[item];         var loc = new l.latlng(o.lat, o.lon);         createmultiplepolyline(loc, userlocation);     } }  //draw polyline function createmultiplepolyline(loc1, loc2) {      var latlongs = [loc1, loc2];     // 2 polylines overlapping, how show them side-by-side?????     var polyline0 = new l.polyline(latlongs, {         color: 'green',         opacity: 1,         weight: 1,         clickable: false     }).addto(map);      var polyline1 = new l.polyline(latlongs, {         color: 'pink',         opacity: 1,         weight: 1,         clickable: false     }).addto(map);      //distance     var s = 'about ' + (loc1.distanceto(loc2) / 1000).tofixed(0) + 'km away you.</p>';      var marker = l.circlemarker(loc1, {radius:20, fillcolor:'red'}).addto(map);     if (marker) {         marker.bindpopup(s);     }  } 

found answer finally, after lot of googling :)

http://jsfiddle.net/abarik/q9bxl1z6/4/

using plugin: https://github.com/bbecquet/leaflet.polylineoffset

//example of parallel lines var loc0 = [0,0]; var map = l.map('map',        {center: loc0,         zoom: 8,           worldcopyjump: true,       }); l.tilelayer('http://{s}.tile.cloudmade.com/bc9a493b41014caabb98f0471d759707/997/256/{z}/{x}/{y}.png', {     maxzoom: 18,     attribution: 'map data &copy; <a href="http://openstreetmap.org">openstreetmap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">cc-by-sa</a>, imagery © <a href="http://cloudmade.com">cloudmade</a>' }).addto(map);  var loc0 = [0,0]; var radius = 10; var radiustolatscale = 0.000005; var marker0 = new l.circlemarker(loc0, {radius:radius, fillcolor:'red'}).bindpopup('0'); map.addlayer(marker0);  var loc1 = [0,1]; var marker1 = new l.circlemarker(loc1, {radius:radius, fillcolor:'blue'}).bindpopup('1'); map.addlayer(marker1);  var latlongs0 = [loc0, loc1]; // middle line var polyline0 = new l.polyline(latlongs0, {     color: 'green',     opacity: 1,     weight: 1,     clickable: false }).addto(map);  // top line var polyline0 = new l.polyline(latlongs0, {     color: 'red',     opacity: 1,     weight: 1,     clickable: false,     offset: radius }).addto(map);  // bottom line var polyline0 = new l.polyline(latlongs0, {     color: 'pink',     opacity: 1,     weight: 1,     clickable: false,     offset: -radius }).addto(map); 

Popular posts from this blog

c# - ODP.NET Oracle.ManagedDataAccess causes ORA-12537 network session end of file -

matlab - Compression and Decompression of ECG Signal using HUFFMAN ALGORITHM -

utf 8 - split utf-8 string into bytes in python -