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 © <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 © <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);